什么是DOM,如何理解

参考原文：https://www.zhihu.com/question/34219998/answer/83122736

理解一、

牢记：站高一个维度去理解问题 ！

为了理解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高纬度封装如何使用。
• ...

至此，你应该明白了什么是DOM，甚至明白了为什么一开始不明白以后如何做，如何举一反三，甚至还能看出一点如何建立体系化认知的影子。

理解二、

什么是DOM？

DOM全称是Document Object Model(文档对象模型)，是为HTML和XML提供的API。那么为什么DOM可以同时提供给HTML和XML编程接口。虽然他们用来标记的标签不同，但是他们本质的结构是相同的。换句话说，按照DOM的标准，HTML和XML都是以标签为结点构造的树结构，DOM将HTML和XML的相同的结构本质抽象出来，然后通过脚本语言，如Javascript，按照DOM里的模型标准访问和操作文档内容。

在Chrome浏览器端，单击右键打开View Page Source展示文档结构。通过这种方式可以直观的看到文档当前的内容和结构。DOM则不同，它是提供一个API给编程语言，比如Javascript，通过一系列抽象的方法操作文档的内容，结构和样式。这有点想SQL和Excel，Excel可以直观的展示数据的结构，而SQL是一个负责操作数据的工具，帮助组织，更新，添加和删除数据内容。

DOM 和 HTML是一回事吗？

就像很多人把JQuery和Javascript的本质搞混一样，DOM和HTML也完全不是一回事，DOM是一个API，HTML(Hyper Text Markup Language)则是一种标记语言，HTML在DOM的模型标准中被视为对象，DOM只提供编程接口，却无法实际操作HTML里面的内容。

但是前端工程师，一般在浏览器端操作HTML。每个Web浏览器都会使用DOM，所以页面可以被脚本语言访问。而所有的浏览器都是以Javascript作为默认的脚本语言。所以HTML在浏览器端基本上可以直接通过DOM模型来操作，通过<script>标签载入或者直接插入Javascript脚本，通过DOM直接操作浏览器端的HTML文件。正是这种无缝融合，导致DOM和HTML的概念很容易混淆。

DOM 和 JavaScript什么关系？

Javascript可以通过DOM直接访问和操作网页文档的内容，一开始，DOM是为方便Javascript操作设计的API。但其实发展到后来，他们是两个独立的个体。而且Javascript不是唯一可以使用DOM的编程语言，比如python也可以访问DOM。所以DOM不是提供给Javascript的API，也不是Javascript里的API。但JavaScript可以通过DOM访问和操作HTML和XML文档内容。