[譯] 究竟什麼是DOM？

羽高同學發表於2018-12-07

前言

本文為翻譯，如有異議請提出更正建議，歡迎閱讀。

作者：Ire Aderinokun

原文地址：What, exactly, is the DOM?

正文

文件物件模型，或“DOM”，是web頁面的介面。它本質上是頁面的API，允許程式讀取和操作頁面的內容、結構和樣式。讓我們分解一下。

如何構建web頁面?

瀏覽器如何從一個源HTML文件到在檢視中顯示一個樣式化的互動式頁面被稱為“關鍵呈現路徑”。雖然這個過程可以分解為幾個步驟，但正如我在理解關鍵呈現路徑的文章中所述，這些步驟大致可以分為兩個階段。第一個階段涉及瀏覽器解析文件以確定最終在頁面上呈現什麼，第二個階段涉及瀏覽器執行呈現。

HTML-to-Render-Tree-to-Final

第一階段的結果是所謂的“渲染樹”。渲染樹是將在頁面上呈現的HTML元素及其相關樣式的表示。為了構建這個樹，瀏覽器需要兩件事：

  1. CSSOM，與元素相關的樣式的表示
  2. 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不是什麼?

在我上面給出的示例中，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樹，就會發現這已經得到了糾正:

[譯] 究竟什麼是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和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？

DOM不是DevTools中的DOM

這種差異有點小，因為DevTools元素檢查器提供了與瀏覽器中DOM最接近的近似。但是，DevTools檢查器包含了不在DOM中的其他資訊。

最好的例子是CSS偽元素。使用::before和::after選擇器建立的偽元素構成CSSOM和渲染樹的一部分，但在技術上不是DOM的一部分。這是因為DOM是單獨從源HTML文件構建的，不包括應用於元素的樣式。

儘管偽元素不是DOM的一部分，但是它們在我們的devtools元素檢查器中。

[譯] 究竟什麼是DOM？

這就是Javascript不能以偽元素為目標的原因，因為它們不是DOM的一部分。

回顧

DOM是HTML文件的介面。瀏覽器使用它作為決定在檢視中呈現什麼內容的第一步，並通過Javascript程式修改頁面的內容、結構或樣式。

雖然與源HTML文件的其他形式類似，DOM在許多方面是不同的:

  • 它總是有效的HTML
  • 它是一個活生生的模型，可以由Javascript修改
  • 它不包含偽元素(例如,::after)
  • 它確實包含隱藏元素(例如，display: none)

相關文章