Dom树怎么形成

Posted on

当浏览器加载 HTML 文档时，它会执行一系列步骤来解析文档并构建 DOM 树。这个过程可以分为以下几个阶段：

  1. 字节流转换为字符流：
    首先，浏览器会将接收到的字节流（例如从服务器传输过来的数据）转换为字符流。这个过程通常涉及到字符编码的转换，例如将字节流解码成 UTF-8 字符流。

  2. 词法分析（Tokenization）：
    接着，浏览器将字符流分解成一个个标记（Token），这个过程称为词法分析。标记通常对应 HTML 文档中的词法单元，比如元素、属性、文本内容等。词法分析器会识别出标签、属性和文本等各种不同类型的标记，并且为每个标记分配一个标识符。

  3. 构建节点对象：
    一旦词法分析完成，浏览器就会根据这些标记构建 DOM 节点对象。每个 HTML 元素对应一个 DOM 节点，每个 DOM 节点都有相应的属性和方法。节点之间的关系由标记之间的层级关系来确定。例如，标签内的文本会成为该标签的子节点。

  4. 构建 DOM 树：
    接下来，浏览器将构建的 DOM 节点组织成一棵树，这棵树就是 DOM 树。DOM 树的根节点是<html>元素，它的子节点包括<head>和<body>等。根据 HTML 文档的结构，DOM 树的每个节点都有相应的父节点和子节点。

  5. CSS 解析和样式计算：
    一旦 DOM 树构建完成，浏览器会继续解析外部 CSS 样式表和内部样式，并将这些样式应用到 DOM 树上的相应节点。这个过程称为样式计算，它会确定每个节点的最终样式。

  6. 渲染页面：
    最后，浏览器将 DOM 树和样式表结合起来，计算每个节点的布局信息，并将页面的内容绘制到屏幕上。这个过程称为页面渲染，它包括计算布局、绘制文本和图形等操作，最终呈现出用户所看到的页面。

通过这些步骤，浏览器可以将 HTML 文档解析并渲染成用户可见的页面，同时构建出一棵表示页面结构和内容的 DOM 树，开发者可以通过 JavaScript 来操作这棵树，实现页面的动态交互和更新。