[译] 究竟什么是DOM？
栏目: JavaScript · 发布时间: 7年前
内容简介：浏览器如何从一个源HTML文档到在视图中显示一个样式化的交互式页面被称为“关键呈现路径”。虽然这个过程可以分解为几个步骤，但正如我在理解关键呈现路径的文章中所述，这些步骤大致可以分为两个阶段。第一个阶段涉及浏览器解析文档以确定最终在页面上呈现什么，第二个阶段涉及浏览器执行呈现。第一阶段的结果是所谓的“渲染树”。渲染树是将在页面上呈现的HTML元素及其相关样式的表示。为了构建这个树，浏览器需要两件事：DOM是源HTML文档的基于对象的表示。正如我们将在下面看到的，它有一些不同之处，但它本质上是试图将HTML
浏览器如何从一个源HTML文档到在视图中显示一个样式化的交互式页面被称为“关键呈现路径”。虽然这个过程可以分解为几个步骤，但正如我在理解关键呈现路径的文章中所述，这些步骤大致可以分为两个阶段。第一个阶段涉及浏览器解析文档以确定最终在页面上呈现什么，第二个阶段涉及浏览器执行呈现。
第一阶段的结果是所谓的“渲染树”。渲染树是将在页面上呈现的HTML元素及其相关样式的表示。为了构建这个树，浏览器需要两件事：
- CSSOM，与元素相关的样式的表示
- DOM，元素的表示
如何创建DOM（以及它看起来像什么）？
DOM是源HTML文档的基于对象的表示。正如我们将在下面看到的，它有一些不同之处，但它本质上是试图将HTML文档的结构和内容转换为可由各种程序使用的对象模型。
DOM的对象结构由所谓的“节点树”表示。之所以这样叫它，是因为它可以被认为是一棵树，它有一个单一的父茎，它可以分出几个子枝，每个子枝都可能有叶子。在本例中，父“茎”是根元素，子“分支”是嵌套的元素，而“叶”是元素中的内容。
我们以此HTML文档为例：
<!doctype html>
<html lang="en">
<head>
<title>My first web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>How are you?</p>
</body>
</html>
复制代码
本文档可以表示为以下节点树:
DOM不是什么?
在我上面给出的示例中，DOM似乎是源HTML文档或您所看到的DevTools的一对一映射。但是，正如我所提到的，有一些区别。为了完全理解DOM是什么，我们需要了解它不是什么。
DOM不是源HTML
虽然DOM是从源HTML文档创建的，但它并不总是完全相同。在两个实例中，DOM可以与源HTML不同。
1. 当HTML无效时
DOM是有效HTML文档的接口。在创建DOM的过程中，浏览器可能会纠正HTML代码中的一些错误。
让我们以这个HTML文档为例:
<!doctype html> <html> Hello, world! </html> 复制代码
文档缺少一个 <head> 和 <body> 元素，这是有效HTML的一个要求。如果我们查看生成的DOM树，就会发现这已经得到了纠正:
2. 当DOM被Javascript修改时
除了作为查看HTML文档内容的接口之外，还可以修改DOM，使其成为一种活动资源。 例如，我们可以使用Javascript为DOM创建额外的节点。
var newParagraph = document.createElement("p");
var paragraphContent = document.createTextNode("I'm new!");
newParagraph.appendChild(paragraphContent);
document.body.appendChild(newParagraph);
复制代码
这将会更新DOM，但当然不会更新HTML文档。
DOM不是您在浏览器中看到的(即，渲染树)
您在浏览器视图中看到的是呈现树，如前所述，它是DOM和csen的组合。DOM与呈现树的真正区别在于，后者只包含最终将在屏幕上绘制的内容。
因为渲染树只关注渲染的内容，它排除了视觉上隐藏的元素。例如，具有与 display: none 样式相关联的元素。
<!doctype html>
<html lang="en">
<head></head>
<body>
<h1>Hello, world!</h1>
<p style="display: none;">How are you?</p>
</body>
</html>
复制代码
DOM将包含 <p> 元素:
然而，呈现树，以及在视图中看到的内容，将不包含该元素。
DOM不是DevTools中的DOM
这种差异有点小，因为DevTools元素检查器提供了与浏览器中DOM最接近的近似。但是，DevTools检查器包含了不在DOM中的其他信息。
最好的例子是CSS伪元素。使用 ::before 和 ::after 选择器创建的伪元素构成CSSOM和渲染树的一部分，但在技术上不是DOM的一部分。这是因为DOM是单独从源HTML文档构建的，不包括应用于元素的样式。
尽管伪元素不是DOM的一部分，但是它们在我们的devtools元素检查器中。
这就是Javascript不能以伪元素为目标的原因，因为它们不是DOM的一部分。
回顾
DOM是HTML文档的接口。浏览器使用它作为决定在视图中呈现什么内容的第一步，并通过Javascript程序修改页面的内容、结构或样式。
虽然与源HTML文档的其他形式类似，DOM在许多方面是不同的:
::after display: none
以上所述就是小编给大家介绍的《[译] 究竟什么是DOM？》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Agile Web Development with Rails, Third Edition
Sam Ruby、Dave Thomas、David Heinemeier Hansson / Pragmatic Bookshelf / 2009-03-17 / USD 43.95
Rails just keeps on changing. Rails 2, released in 2008, brings hundreds of improvements, including new support for RESTful applications, new generator options, and so on. And, as importantly, we’ve a......一起来看看 《Agile Web Development with Rails, Third Edition》 这本书的介绍吧!
