学完 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
- W3C: What is the Document Object Model? & Document Object Model (DOM) Technical Reports
- MDN: DOM 概述
- 深入浅出 DOM 基础——《DOM 探索之基础详解篇》学习笔记
- What is the DOM?
-
全文提及的 JavaScript 都指的是语言本身，而非局限于网页或其他宿主环境 ↩
网友评论