理解DOM究竟是什么

时间 2019-11-06

标签理解 dom 究竟什么栏目 HTML 繁體版

原文原文链接

文档对象模型或者说咱们熟悉的“DOM”，web网页的一个界面。它本质上是容许程序读取和操做页面的内容，结构和样式的页面API。接下来一一分解。javascript

网页如何构建

浏览器如何从源HTML文档转到在视口中显示样式化和交互式页面称为“关键渲染路径”。这些步骤大体可分为两个阶段。第一阶段涉及浏览器解析文档以肯定最终将在页面上渲染的内容，第二阶段涉及浏览器执行渲染。 html

第一阶段的结果是所谓的“渲染树”。渲染树是将在页面上呈现的HTML元素及其相关样式的表示。为了构建这个树，浏览器须要两件事：

CSSOM，元素相关样式的结构；
DOM，元素结构

DOM如何建立（长啥样）

DOM是HTML源文档的基于对象的表示。它有一些差别，咱们将在下面看到，但它本质上是一种尝试将HTML文档的结构和内容转换为可供各类程序使用的对象模型。java

DOM的对象结构由所谓的“节点树”表示。它之因此被称为树是由于它能够被认为是具备单个父茎的树，其分枝成几个子枝，每一个子枝能够具备叶子。在这种状况下，父“stem”是根元素，子“branches”是嵌套元素，“leaves”是元素中的内容。web

咱们以此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>
复制代码

此文档能够表示为如下节点树：app

html
    head
        title
            My first web page
    body
        h1
            Hello, world!
        p
            How are you?
复制代码

DOM不是什么

在上面给出的示例中，看起来DOM是源HTML文档的一对一映射或者你看到的DevTools的映射。可是，正如我所提到的，存在差别。为了彻底理解DOM是什么，咱们须要看看它不是什么。ui

DOM不是你的html源文档

尽管DOM是从源HTML文档建立的，但它并不老是彻底相同。有两个实例，DOM能够与源HTML不一样。spa

1. 当HTML无效时

DOM是有效HTML文档的接口。在建立DOM的过程当中，浏览器能够纠正HTML代码中的一些无效。3d

咱们以此HTML文档为例：code

<!doctype html>
<html>
    Hello, world!
</html>
复制代码

该文档缺乏和元素，这是有效HTML的要求。若是咱们查看生成的DOM树，咱们将看到这已获得纠正：

html
    head
    body
        Hello, world!
复制代码

2. 当JavaScript修改了DOM

除了做为查看HTML文档内容的界面以外，还能够修改DOM，使其成为动态资源。

例如，咱们可使用Javascript为DOM建立其余节点。

const newParagraph = document.createElement("p");
const paragraphContent = document.createTextNode("I'm new!");
newParagraph.appendChild(paragraphContent);
document.body.appendChild(newParagraph);
复制代码

如上会更改咱们的DOM，但并非更改了咱们的HTML文档。

DOM不是你在浏览器中看到的（即渲染树）

你在浏览器视口中看到的是渲染树，正如我所提到的，它是DOM和CSSOM的组合。真正将DOM与渲染树分开的是，后者只包含最终将在屏幕上绘制的内容。

由于渲染树仅关注渲染的内容，因此它会排除视觉上隐藏的元素。例如，具备显示的元素：没有与之关联的样式。

<!doctype html>
<html lang="en">
  <head></head>
  <body>
    <h1>Hello, world!</h1>
    <p style="display: none;">How are you?</p>
  </body>
</html>
复制代码

上面的DOM结构将包含 <p> 元素

html
    head
    body
        h1
            Hello, world!
        p
            How are you?
复制代码

可是，渲染树，即咱们在视口上所见，不包含这个p元素

html
    body
        h1
            Hello, world!
复制代码

DOM不是DevTools中的结构

这种差别有点小，由于DevTools元素检查器提供了咱们在浏览器中最接近的DOM。可是，DevTools检查器包含不在DOM中的其余信息。

最好的例子是CSS伪元素。使用:: before和:: after选择器建立的伪元素构成CSSOM和渲染树的一部分，但在技术上不是DOM的一部分。这是由于DOM仅由源HTML文档构建，不包括应用于元素的样式。

尽管伪元素不是DOM的一部分，但它们仍在咱们的devtools元素检查器中。

这就是为何伪元素不能被Javascript直接获取到的缘由，由于伪元素不是DOM的一部分。

总结

DOM是HTML文档的接口。它被浏览器用做肯定在视口中呈现内容的第一步，并经过Javascript程序来修改页面的内容，结构或样式。

虽然与其余形式的源HTML文档相似，但DOM在许多方面有所不一样：

它老是有效的HTML
它是一个能够经过Javascript修改的结构
它不包含伪元素（例如:: after）
它确实包含隐藏元素（例如display：none）