[譯] 究竟什麼是DOM？

時間 2019-11-16

標籤究竟什麼 dom 欄目 HTML 简体版

原文原文鏈接

前言

本文爲翻譯，若有異議請提出更正建議，歡迎閱讀。javascript

做者：Ire Aderinokunhtml

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

正文

文檔對象模型，或「DOM」，是web頁面的接口。它本質上是頁面的API，容許程序讀取和操做頁面的內容、結構和樣式。讓咱們分解一下。web

如何構建web頁面?

瀏覽器如何從一個源HTML文檔到在視圖中顯示一個樣式化的交互式頁面被稱爲「關鍵呈現路徑」。雖然這個過程能夠分解爲幾個步驟，但正如我在理解關鍵呈現路徑的文章中所述，這些步驟大體能夠分爲兩個階段。第一個階段涉及瀏覽器解析文檔以肯定最終在頁面上呈現什麼，第二個階段涉及瀏覽器執行呈現。瀏覽器

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

CSSOM，與元素相關的樣式的表示
DOM，元素的表示

如何建立DOM（以及它看起來像什麼）？

DOM是源HTML文檔的基於對象的表示。正如咱們將在下面看到的，它有一些不一樣之處，但它本質上是試圖將HTML文檔的結構和內容轉換爲可由各類程序使用的對象模型。dom

DOM的對象結構由所謂的「節點樹」表示。之因此這樣叫它，是由於它能夠被認爲是一棵樹，它有一個單一的父莖，它能夠分出幾個子枝，每一個子枝均可能有葉子。在本例中，父「莖」是根元素，子「分支」是嵌套的元素，而「葉」是元素中的內容。ui

咱們以此HTML文檔爲例：spa

<!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和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>
複製代碼