究竟什麼是DOM？

時間 2019-11-10

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

原文原文鏈接

文檔對象模型或「DOM」是網頁的接口。它本質上是頁面的API，容許程序讀取和操做頁面的內容，結構和樣式。html

網頁是如何構建的？

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

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

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

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

DOM是源HTML文檔的基於對象的表示。它有一些差別，咱們將在下面看到，但它本質上是一種嘗試將HTML文檔的結構和內容轉換爲可供各類程序使用的對象模型。瀏覽器

DOM的對象結構由所謂的「節點樹」表示。它之因此被稱爲是由於它能夠被認爲是具備單個父莖的樹，其分枝成幾個子枝，每一個子枝能夠具備葉子。在這種狀況下，父「stem」是根<html>元素，子「branches」是嵌套元素，「leaves」是元素中的內容。微信

咱們以此HTML文檔爲例：app

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

此文檔能夠表示爲如下節點樹：spa

DOM不是什麼？

在上面給出的示例中，看起來DOM是源HTML文檔的一對一映射或您看到的DevTools的映射。可是，正如我所提到的，存在差別。爲了徹底理解DOM是什麼，咱們須要看看它不是什麼。code

DOM不是您的源HTML

儘管DOM是從源HTML文檔建立的，但它並不老是徹底相同。有兩個實例，DOM能夠與源HTML不一樣。htm

當HTML無效時

DOM是有效HTML文檔的接口。在建立DOM的過程當中，瀏覽器能夠糾正HTML代碼中的一些無效。對象

咱們以此HTML文檔爲例：

<!doctype html>
<html>
Hello, world!
</html>

該文檔缺乏<head>和<body>元素，這是有效HTML的要求。若是咱們查看生成的DOM樹，咱們將看到這已獲得糾正：

當Javascript修改DOM時

除了做爲查看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不是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）

建立了一個程序員交流微信羣，你們進羣交流IT技術

若是已過時，能夠添加博主微信號15706211347，拉你進羣

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。