最近学习JavaScript的时候，接触到了DOM。第一次接触这个概念的时候我有点懵，因为无论作为英文还是中文的解释，它都让我很困惑。
来自W3C School的解释：
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
he DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
- Core DOM - standard model for all document types
- XML DOM - standard model for XML documents
- HTML DOM - standard model for HTML documents
来自Wiki的解释：
The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure where in each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed. So, what does DOM exactly mean???
上面的解释出现了tree structure(树形结构)，node(节点)和object（对象），那么这些又分别是什么？对于刚学习前端的我看了一个名词解释里出现那么多不认识的名词这简直要送我走。而Udemy课上老师对此讲的也很含糊。
接下来我们来看看简中语境下的解释。
来自Mozilla:
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。 DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。
菜鸟教程：
DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 以树结构表达 HTML 文档。
OK，树结构出现 once again.
百度百科：
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。
总结一下以上定义，对于一个不太清楚“可扩展指标语言”、“标准编程接口”、“www文档风格”、“树形结构”以及"SAX"的初学者，这些解释等同于没解释。
笔者根据自己在practice的过程，反复观看了Udemy上老师讲述DOM的时候提到的一个关键词——"manipulate"（操作、操纵），逐渐摸索出来了What the f***ing DOM is?
假设一个html网页是一个Document（文件),那么html网页里的标签，无论是div,还是body，由于它们有可能层层嵌套或者“并联”（这里借助一下电路图的概念，也就是同级目录）的关系，可以用树形来描述它们的关系，即有展开目录，目录下面有子目录这样的结构。思维导图也可以说是树形结构的一种表现。
DOM是什么呢？DOM的意思是，不需要通过直接改变html每个标签下面的content（内容），就可以灵活地展示html页面，用别的方法来操作。最典型的例子就是双人游戏的html网页。如何显示每个游戏参与者的姓名、设置什么条件下轮到对方、每一轮游戏结束显示对方的分数，这种动态内容如果写在html网页里，会显得代码很繁冗，可读性低。因此使用DOM方法，单独写一个脚本文件，让这个脚本来控制html标签下的内容。
通俗地来说，DOM是这么一个东西，假定读者有一点html的知识（知道html标签，结构）：
我有一本书（对应的是html页面，或者叫Document），我在第5页插了一个书签（对应的是形如div之类的标签名，甚至是具体的class和id的名字），上面写着“这一页夹了100块”，在第32页又插了个标签“期末考试考点2”……当我打开书签（manipulate）到书中相应页的时候，我可以“找到100块”或者阅览、涂改某一页内容(content),统称为DOM。
说到这里，DOM更像是tag（标签）对吧？我个人觉得就是根据一些标签做索引改变相应标签下的内容，根据标签对标签下面的元素进行操作。那么为什么它的定义看起来非常的不像人话呢？
笔者在此再举一个例子，正好是昨天看书看到的。
中文版本如下（来自图灵图书）：
如果对于每个i∈I都对应这个一个集合Ai，那么A={Ai | i∈I}就是索引集为I的集合A的索引族。
可能有人就要问“这说的是人话吗？”
的确，作为“定义”来说，这样的描述非常严谨，包括上面我摘抄的各种关于DOM的定义。学术定义讲究的是“简洁严谨”，因此将含义丰富的内容尽可能缩减在一句话，句子间为简洁而大量使用的逻辑连接词以及术语就会让初学者对定义感到非常困惑。这样也造成了自学的困难：如何将“不是人话”的语言翻译成“人话”？
那么来看定义3.3，说的是这么个事情：
首先是三类集合：I,Ai和花体A。i是I的元素。Ai是以i作为下标的集合，也就是靠i来“索引”，例如A1,A2,A3……花体A是Ai的集合，I叫索引集，Ai叫索引族也叫集合族（簇）。
当然了这个定义有什么用，为啥这样定义这里暂且不表，但这个定义含义是很丰富的。可能字面上来看，你没有不认识的字，没有生僻的词，但是就是不明白什么意思。这就需要把“不是人话”的语言“解析”(parse)成人话。能做到这一点，才能说明你对这个定义了解了。
把看起来不像是人说的学术语言通过理解、消化成“人的语言”这就是自学重要的地方。The Real Analysis Lifesaver里也提到了：“...(statements 命题) Try to read them loud, translating all the symbols into English”，意思是让你把命题和用数学符号表述的定义、定理替换成人类的语言，才能真正理解命题的含义。当然了，这也可以检验一个人是否真的学会某个知识点/学科。假如一个人张口闭口“专业名词/术语”，让他用稍微简单一点的例子来类比说明他说不出来。
这人大概率是自己都懵的状态。
