理解DOM

作者：futeng
链接：https://www.zhihu.com/question/34219998/answer/268568438
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

为了理解DOM，我们至少需要站在浏览器的角度来思考。

 

DOM概念本身很简单，请先完全跟着我的思路来：

1. 普通文档（*.txt）和HTML/XML文档（*.html/*.xml）的区别仅仅是因为后者是有组织的结构化文件；
2. 浏览器将结构化的文档以树的数据结构读入浏览器内存，并将每个树的子节点定义为一个NODE（想象这颗树，从根节点到叶子节点都被建模为一个NODE对象）；
3. 这每个节点（NODE）都有自己的属性（名称、类型、内容...）；
4. NODE之间有层级关系（parents、child、sibling...）；
5. 以上已经完成文档的建模工作（将文档内容以树形结构写入内存），此时再编写一些方法来操作节点（属性和位置信息），即为NODE API。

抽象一下：

• DOM是一种将HTML/XML文档组织成对象模型的建模过程；
• DOM建模重点在于如何解析HTML/XML文档和开放符合DOM接口规范的节点操作API接口。

再抽象一下：

• 解析文档，建模成对象模型，开放API接口。

最后：

• DOM：Document Object Model 文档对象模型

 

再回顾下整个过程，每个步骤都可以问自己几个问题，比如：DOM到底是建模过程，还是最后建的那个模型，还是指操作节点的API接口呢，还是...？

以上是站在浏览器的角度思考DOM，你还可以站在浏览器设计人员、网页编码人员等角度考虑：

• DOM跟JavaScript什么关系？
• DOM很显然诞生在浏览器，一开始是用JS实现的；
• 但随着DOM本身的发展，已经形成规范，你可以用任何一种语言比如Python来解析文档，生成对像树，只要满足DOM标准，包括开放标准的操作接口，那你实现的就是一个DOM。
• DOM开放的接口如何操作？
• JS原生接口使用。
• JQuery高纬度封装如何使用。
• ...