【譯】到底什麼是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元素檢查器中。