初识 DOM 及些许感性理解

2017-04-17 本文已影响0人饥人谷_Bayes

学完 JavaScript，还在疑惑其作用的时候，DOM 蹦了出来。有些不知所云，几番查阅只有，意识到自己有着不少误解，将新的理解总结出来，以供之后再来审视。

DOM vs HTML

DOM 是什么，在哪能看到 DOM 吗？使用浏览器阅读网页的时候，按 <kbd>f12</kbd> 打开开发者工具，你会看到这样的画面

标注的部分，就是常常听说的 DOM 了。

看上去，这个我们写的 HTML 似乎一样呀。

如果再研究研究，就能发现，两者还是有些区别的。下面是对 DOM 进行了操作的结果。

DOM vs JS

1993 年，HTML 发布
1996 年，JavaScript 发布
1996 年，CSS 发布
1998 年，XML 发布

时间先暂停在 1998 年以前，现在人们有了 HTML 表达文档的内容，CSS 描述文档的样式，也有了 JavaScript，但当时并没有 DOM 标准。这意味着，例如 .addEventListener 之类的方法无法使用。也就是说，怎么「操作」文档，这不是 JavaScript^[1] 的范畴！

换言之，之前认为 .addEventListener 是 JavaScript 的东西，实则 DOM 定义的 API。

回到 1998 年前，当时怎么使用 JS 操作文档，是没有统一的规范的——一切取决于浏览器，各家厂商都有自己的定义方式——非标准性质的 DOM 出现。然后 IE4 和 Netscape Navigator 4 又各自退出了自己的 DOM 扩展，增强 JavaScript 的功能，也称为 Dynamic HTML（简称 DHTML）。这段时期的 "DOM"，习惯上也成为 DOM Level 0, 是历史中的一个参考点，而非正式的标准规范。

发展

DOM Level 1

1998 年，DOM Level 1 发布

W3C 正式发布了 DOM，名为 DOM Level 1，主要为了映射文档结构，由两块组成：

Core：映射以 XML 为基础的文档结构
HTML：基于 Core 进行了扩展，添加针对 HTML 的对象和方法

DOM Level 2

2000~2003 年，DOM Level 2 发布

2 级 DOM 对之前的 Core 进行了拓展，支持了 XML 的命名空间，而且引入了更多的模块：

Views：描述跟踪一个文档的各种视图（使用 CSS 样式设计文档前后）的接口
Event：描述事件接口
Style：描述处理基于 CSS 样式的接口
Traversal and Range：描述遍历和操作文档树的接口

DOM Level 3

2003~2004 年，DOM Level 3 发布

此时，新引入了两者模块:

Load and Save：统一方式加载和保存文档的方法
Validation：描述了验证文档的方法

对 Core 再次进行了拓展，支持 XML 1.0 规范，涉及 XML Infoset、XPath 和 XML Base。

回顾

截止 2017-04-17，DOM Level 4 还在草稿阶段。现在再来看看 MDN 上关于 DOM 的描述：

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。

所以

只有 JavaScript 才能操作 DOM 吗？W3C 的标准里没有规定，任何语言都可以。
有 JavaScript 就一定有 DOM 吗？并不是，可以在浏览器和 Node.js 中分别执行 console.log(document) 试试。

参考

同时推荐点击链接，可以更深入了解 DOM

全文提及的 JavaScript 都指的是语言本身，而非局限于网页或其他宿主环境 ↩