【译】到底什么是DOM

时间 2019-12-13

标签到底什么 dom 栏目 HTML 繁體版

原文原文链接

The Document Object Model（文档对象模型）, 或者叫DOM，是网页的接口。它本质上是网页的API，容许程序读取和操做页面内容，结构和样式。接下来让咱们进一步解析。css

一个网页是如何构建的

一个浏览器如何从HTML源文档到视窗中展示样式和交互式页面的过程被称为“关键渲染路径（Critical Rendering Path）”,虽然这个过程能够被分解为多个步骤，可是这些步骤大体能够分为两个阶段。第一个阶段涉及浏览器解析文档到最终确认渲染的内容，第二阶段则是浏览器执行渲染。html

第一阶段的结果被称之为“渲染树（render tree）”。HTML元素及其相关样式在页面上呈现出来的表达形式被称之为渲染树。为了构建树结构，浏览器须要两个东西：前端

The CSSOM, 与元素相关的样式表达（译者：就是css文档）
DOM，元素表达（译者：就是HTML文档）

DOM如何被创造出来（看起来什么样）

DOM是源HTML文档基于对象的表现形式。它有些差别，可是它本质上是将HTML文档的结构和内容转化为能够被各类程序使用的一种对象模型。node

DOM的对象结构表现为所谓的“节点树（node tree）”，它之因此被这么叫是由于它能够被看做一个单个父茎的树，其有着若干个分支，每一个均可能有枝叶。在这种状况下，父“干”是根元素，孩子“分支”是嵌套元素，而“叶”是元素中的内容。web

来看看一下这个例子：浏览器

<!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

DOM 不是什么

根据上述例子，DOM是源HTML文档的一对一映射。可是，正如我所提到的，仍是有差别的。为了彻底理解DOM是什么，咱们须要看看它不是什么。dom

DOM不是你的源代码

尽管DOM是从源HTML文档建立的，但它并不老是彻底相同。这里有两个实例展现了：DOM能够与源HTML不一样。学习

1. 当HTML无效时

DOM是有效HTML文档的接口。在建立DOM的过程当中，浏览器可能会矫正HTML中的无效代码。ui

例子：

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

上述文档中缺失<head>和<body>元素，对于有效HTML来讲这是必需的。若是咱们查看生成的DOM树，咱们会发现这里被自动矫正了：

2. 当JavaScript修改DOM时

DOM除了做为查看HTML文档内容的接口以外，还能够被修改，使其成为一个实时资源。

例如，咱们可使用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和CSSOM的结合，真正把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并非DOM

一点点小差别，由于DevTools元素检查器提供了最接近的DOM。可是，DevTools检查器包含里不在DOM中的其余信息。

最好的例子是CSS伪元素。Pseudo-elements created using the ::before and ::after selectors form part of the CSSOM and render tree, but are not technically part of the DOM.。由于DOM仅仅由源HTML文档构建，不包含应用于元素的样式。

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

这就是为何伪元素不能被JavaScript做为目标的缘由，由于它们不是DOM的一部分。

总结

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

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

有效HTML（It is always valid HTML）
可经过Javascript修改的实时模型（It is a living model that can be modified by JavaScript）
不包含伪元素（It doesn't include pseudo-elements）
包含隐藏元素（It does include hidden elements）

关于原文做者

原文是来自Ire Aderinokun发表在bitsofco.de上面的。

译者语

工做学习前端两年多，每每这些浅显，基础的知识最容易被忽略。Ire Aderinokun写里一系列DOM相关的文章，包括shadow DOM， Virtual DOM等等，我会争取总翻译出来。有时候我不会翻译，或者感受原文效果更好的，我就直接把原文po出来。