随着浏览器对 HTML 进行词法分析，它开始构建文档对象模型 (DOM) 树
As the Browser Tokenizes the HTML, It Begins to Construct the Document Object Model (DOM) Tree
As the browser parses the HTML document, it converts the raw HTML into a more structured format known as the Document Object Model (DOM) tree. This tree-like structure is a critical component of how the browser interprets and manipulates the web page, allowing developers to interact with and modify the content dynamically through JavaScript.
随着浏览器解析 HTML 文档，它将原始 HTML 转换为一种更结构化的格式，称为文档对象模型 (DOM) 树。这种树状结构是浏览器如何解释和操作网页的关键组件，使开发人员能够通过 JavaScript 动态地与内容交互和修改内容。
1. Tokenization and Tree Construction
词法分析与树结构构建
1.1. Tokenization Process
词法分析过程
The browser’s HTML parser begins by reading the HTML document character by character. As it reads, it breaks the document into smaller pieces called tokens. These tokens represent the fundamental building blocks of the document, including elements (e.g., <div>, <p>, <h1>), attributes (e.g., class, id, src), and text nodes.
浏览器的 HTML 解析器首先逐字读取 HTML 文档。在读取过程中，它将文档分解为称为标记的小块。这些标记代表了文档的基本构建块，包括元素（如 <div>、<p>、<h1>）、属性（如 class、id、src）和文本节点。
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a sample page.</p>
</body>
</html>Example:
In this HTML snippet, the browser would tokenize the document into elements such as <html>, <head>, <title>, and so on, along with their associated attributes and text content.
示例：
在此 HTML 片段中，浏览器会将文档标记为 <html>、<head>、<title> 等元素，以及它们相关的属性和文本内容。
1.2. Constructing the DOM Tree
构建 DOM 树
As tokens are generated, the browser begins constructing the DOM tree. The DOM tree is a hierarchical representation of the HTML document, where each node corresponds to an element, attribute, or piece of text in the document. The browser adds nodes to the tree as it encounters new elements in the HTML document.
随着标记的生成，浏览器开始构建 DOM 树。DOM 树是 HTML 文档的层次表示形式，其中每个节点对应于文档中的一个元素、属性或文本。浏览器在 HTML 文档中遇到新元素时，将节点添加到树中。
1.2.1. Root Element
根元素
The root of the DOM tree is the <html> element, which contains two main child nodes: <head> and <body>. These child nodes themselves contain further child nodes representing other elements within the document.
DOM 树的根是 <html> 元素，它包含两个主要的子节点：<head> 和 <body>。这些子节点本身包含进一步的子节点，表示文档中的其他元素。
<!DOCTYPE html>
<html>
<!-- Root node of the DOM tree -->
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a sample page.</p>
</body>
</html>Explanation:
In this example, the <html> element is the root node of the DOM tree. The <head> and <body> are its direct children, and they, in turn, have their own child nodes, such as <title>, <h1>, and <p>.
解释：
在这个示例中，<html> 元素是 DOM 树的根节点。<head> 和 <body> 是它的直接子节点，它们又有各自的子节点，例如 <title>、<h1> 和 <p>。
1.3. Building and Expanding the Tree
构建和扩展树结构
As the browser continues to parse the HTML, it builds and expands the DOM tree by adding nodes corresponding to the elements and text it encounters. The browser creates nodes for every tag, attribute, and piece of text, and these nodes are linked together in a parent-child relationship that reflects the nested structure of the HTML document.
随着浏览器继续解析 HTML，它通过添加与遇到的元素和文本相对应的节点来构建和扩展 DOM 树。浏览器为每个标签、属性和文本创建节点，并将这些节点链接在一起，形成反映 HTML 文档嵌套结构的父子关系。
1.3.1. Element Nodes
元素节点
Element nodes represent the HTML tags in the document. Each element node can have child nodes (which can be other element nodes or text nodes) and attributes that define its properties.
元素节点表示文档中的 HTML 标签。每个元素节点可以有子节点（可以是其他元素节点或文本节点）和定义其属性的属性。
<p id="intro" class="text">This is a paragraph.</p>Explanation:
In this example, the browser creates a <p> element node with id and class attributes, and a text node containing the text "This is a paragraph."
解释：
在这个示例中，浏览器创建了一个具有 id 和 class 属性的 <p> 元素节点，以及一个包含 "This is a paragraph" 文本的文本节点。
1.3.2. Text Nodes
文本节点
Text nodes represent the text content inside an element. Unlike element nodes, text nodes do not have child nodes or attributes. They are always leaf nodes in the DOM tree.
文本节点表示元素内的文本内容。与元素节点不同，文本节点没有子节点或属性。它们在 DOM 树中始终是叶节点。
<h1>Hello, World!</h1>Explanation:
In this example, the browser creates a text node with the content "Hello, World!" as a child of the <h1> element node.
解释：
在这个示例中，浏览器创建了一个包含 "Hello, World!" 内容的文本节点，作为 <h1> 元素节点的子节点。
1.4. Handling Special Elements
处理特殊元素
1.4.1. Void Elements
自闭合元素
Void elements, such as <img>, <br>, and <input>, are elements that do not have closing tags and cannot have child nodes. The browser creates a single node for each void element, and since they cannot contain other elements or text, they are always leaf nodes in the DOM tree.
自闭合元素，例如 <img>、<br> 和 <input>，是没有结束标签且不能有子节点的元素。浏览器为每个自闭合元素创建一个节点，由于它们不能包含其他元素或文本，它们在 DOM 树中始终是叶节点。
<img src="image.jpg" alt="Sample Image">Explanation:
For the <img> tag, the browser creates a single element node in the DOM tree with attributes src and alt, but no child nodes.
解释：
对于 <img> 标签，浏览器在 DOM 树中创建一个带有 src 和 alt 属性的单个元素节点，但没有子节点。
1.4.2. Script and Style Elements
脚本和样式元素
When the browser encounters a <script> or <style> tag, it treats these elements differently due to their potential impact on the rest of the document. For scripts, the browser may pause the DOM construction to execute the script. For styles, the browser parses the CSS and applies it to the relevant elements in the DOM.
当浏览器遇到 <script> 或 <style> 标签时，它会由于这些元素对文档其余部分的潜在影响而以不同方式处理它们。对于脚本，浏览器可能会暂停 DOM 构建以执行脚本。对于样式，浏览器解析 CSS 并将其应用于 DOM 中的相关元素。
<style>
p {
color: red;
}
</style>Explanation:
The browser creates a <style> element node and parses the CSS rules within it. These rules are then applied to the relevant nodes in the DOM tree.
解释：
浏览器创建一个 <style> 元素节点并解析其中的 CSS 规则。然后将这些规则应用于 DOM 树中的相关节点。
2. Benefits of the DOM Structure
DOM 结构的优势
2.1. Dynamic Manipulation
动态操作
The hierarchical structure of the DOM allows developers to dynamically manipulate the web page using JavaScript.
By interacting with the DOM, developers can add, remove, or modify elements on the fly, create interactive features, and respond to user actions.
DOM 的层次结构允许开发人员使用 JavaScript 动态操作网页。通过与 DOM 交互，开发人员可以动态添加、删除或修改元素，创建交互式功能，并响应用户操作。
document.querySelector('h1').textContent = 'Welcome!';Explanation:
In this example, the JavaScript code modifies the text content of the <h1> element, demonstrating how the DOM enables dynamic updates to the web page.
解释：
在这个示例中，JavaScript 代码修改了 <h1> 元素的文本内容，展示了 DOM 如何实现网页的动态更新。
2.2. Accessibility and Searchability
可访问性和可搜索性
The DOM structure makes it easier for assistive technologies, such as screen readers, to interpret the content of a web page. Additionally, search engines can more effectively crawl and index pages due to the organized nature of the DOM.
DOM 结构使辅助技术（如屏幕阅读器）更容易解释网页内容。此外，由于 DOM 的有序性，搜索引擎可以更有效地抓取和索引页面。
2.3. Event Handling
事件处理
The DOM also plays a crucial role in event handling. By attaching event listeners to DOM nodes, developers can create interactive and responsive user interfaces. Events such as clicks, keypresses, and form submissions are all managed through the DOM.
DOM 还在事件处理方面发挥着关键作用。通过将事件监听器附加到 DOM 节点，开发人员可以创建交互式和响应式用户界面。点击、按键和表单提交等事件都通过 DOM 进行管理。
document.querySelector('button').addEventListener('click', function() {
alert('Button clicked!');
});Explanation:
Here, an event listener is added to a button element, allowing the browser to respond to user clicks by displaying an alert.
解释：
在此示例中，事件监听器被添加到按钮元素，使浏览器能够通过显示警告响应用户点击。
3. Conclusion
结论
As the browser tokenizes the HTML and builds the DOM tree, it lays the foundation for how the web page will be displayed and interacted with. The DOM is a vital structure that enables dynamic content manipulation, accessibility, and event handling, making it a central component of modern web development. By understanding how the DOM is constructed and used, developers can create more efficient, interactive, and user-friendly web applications.
随着浏览器对 HTML 进行词法分析并构建 DOM 树，它为网页的显示和交互奠定了基础。DOM 是一种重要的结构，使得动态内容操作、可访问性和事件处理成为可能，是现代 Web 开发的核心组件。通过理解 DOM 的构建和使用方式，开发人员可以创建更高效、互动性更强且更符合用户需求的 Web 应用程序。
Leave a Reply