文档对象模型DOM

文档对象模型 DOM (Document Object Model)

DOM是什么

是一种处理HTML和XML文件的标准API 。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。

DOM树

在JavaScript代码中，HTML文档表示为一个对象。从该文档中读取的所有数据也被保存为对象，彼此嵌套（因为就像我前面所说的，在JavaScript中，所有数据都只能表示为对象）。

所以，这基本上就是代码中DOM数据的物理排列：所有的东西都是作为对象排列的。但从逻辑上讲，它是一棵树。

这个模型是由浏览器创建的，它接受一个HTML文档并创建一个表示它的对象。我们可以用javascript访问这个对象。由于我们使用这个对象来操作HTML文档和构建我们自己的应用程序。可以通过DOM操作HTML文档。向网页添加元素，删除并更新它们。每次我们更改或更新DOM树中的任何节点时，都会渲染到网页上

DOM解析器

每个浏览器软件都有一个名为dom parser的程序，负责将HTML文档解析为dom。

如何设计节点

HTML文档中的每一段数据都保存为JavaScript中的一个对象。如何将保存为对象的数据逻辑地排列为树，DOM树的节点具有某些特性或属性。几乎树中的每个节点都有一个父节点（它上面的节点）、子节点（它下面的节点）和兄弟节点（属于同一父节点的其他节点）。在一个节点的上面、下面和周围拥有这个族是使它成为树的一部分的条件。
每个节点的族信息都保存为表示该节点的对象中的属性。例如，children是一个节点的属性，它包含该节点的子元素列表，从而在逻辑上将其子元素排列在该节点下。

想了解更详细可参考链接：https://www.jianshu.com/p/6b53ff21bba8