HTML-DOM树篇

最新推荐文章于 2025-03-06 10:07:25 发布

muzili_henji

最新推荐文章于 2025-03-06 10:07:25 发布

阅读量4.9k

点赞数 5

分类专栏： html 文章标签： html5 html dom

本文链接：https://blog.csdn.net/muzili_henji/article/details/119179235

版权

2 篇文章

订阅专栏

DOM（Document Object Model）文档对象模型，是HTML和XML文档的编程接口

DOM树是浏览器标记内部的表示，浏览器接收到网络数据后的第一步就是处理HTML标记并构建DOM树。

通过菜鸟教程的一张图片来分析一下DOM树

Document 根节点（有些文档说Document是根节点，也有些文档说 html元素是根节点。从对象的角度上来看，Document是根对象，从元素的角度上看，html元素由于父元素是null，所以是根元素）；
html 元素，html元素的父元素为null，所以从元素的角度来说是树的根；
head 元素和 body 元素都是 html 根元素的子元素。所以树对象（节点）可以具有子对象（子节点）；
href属性是 a 元素的子对象（子节点），所以DOM树包含属性对象（属性节点）；
text文本是 title元素的子对象（子节点），所以DOM树包含文本对象（文本节点）；
a元素的父对象是 body元素，body元素的父对象是 html元素，所以html元素是 a元素的祖先对象（祖先节点）；
a元素和 h1元素都是 body元素的子对象（子节点），所以 a元素和 h1元素是兄弟对象（兄弟节点）；
图中没有提到注释节点，但是注释也是DOM树的一部分；

<html>
  <body>
    <p>Hello world</p>
  </body>
</html>

树构建阶段输入的是一个来自标记化阶段的标记序列

初始模式“initial mode”
接收到HTML标记后转成“before html”模式，并处理html标记，创建HTMLHtmlElement元素，并将其添加到Document对象上
然后将状态改成“before head”，按照上面的示例此时应该接收到“body”标记，如果没有接收到head标记，系统会隐式创建一个HTMLHeadElement元素，并添加到树中
然后进入“in head”，然后转为“after head”模式。此时系统才会对“body”标记尽进行处理，并创建HTMLBodyElement元素，同时进入“in body”模式
然后接收 p 标记进入“in p”状态，并同时创建HTMLParagraphElement元素。
接收到由“Hello world”字符串生成的一系列字符标记。接收到第一个字符时会创建并插入“Text”节点，其他字符会附加到这个节点上。
然后接收p结束标记转成“after p”模式，然后收到body结束标签转成“after body”模式
接收到HTML结束标记时会进入“after after body”模式。解析过程也就到此结束了。