溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
文檔對象模型，或“DOM”，是web頁面的接口。它本質上是頁面的API，允許程序讀取和操作頁面的內容、結構和樣式。讓我們分解一下。
如何構建web頁面?
瀏覽器如何從一個源HTML文檔到在視圖中顯示一個樣式化的交互式頁面被稱為“關鍵呈現路徑”。雖然這個過程可以分解為幾個步驟，但正如我在理解關鍵呈現路徑的文章中所述，這些步驟大致可以分為兩個階段。第一個階段涉及瀏覽器解析文檔以確定最終在頁面上呈現什么，第二個階段涉及瀏覽器執行呈現。
第一階段的結果是所謂的“渲染樹”。渲染樹是將在頁面上呈現的HTML元素及其相關樣式的表示。為了構建這個樹，瀏覽器需要兩件事：
1.CSSOM，與元素相關的樣式的表示
2.DOM，元素的表示
如何創建DOM？
DOM是源HTML文檔的基于對象的表示。正如我們將在下面看到的，它有一些不同之處，但它本質上是試圖將HTML文檔的結構和內容轉換為可由各種程序使用的對象模型。
DOM的對象結構由所謂的“節點樹”表示。之所以這樣叫它，是因為它可以被認為是一棵樹，它有一個單一的父莖，它可以分出幾個子枝，每個子枝都可能有葉子。在本例中，父“莖”是根元素，子“分支”是嵌套的元素，而“葉”是元素中的內容。
我們以此HTML文檔為例
<!doctype html> <html> <head> <title>My first web page</title> </head> <body> <h2>Hello, world!</h2> <p>How are you?</p> </body> </html>
本文檔可以表示為以下節點樹:
DOM不是什么?
在我上面給出的示例中，DOM似乎是源HTML文檔或您所看到的DevTools的一對一映射。但是，正如我所提到的，有一些區別。為了完全理解DOM是什么，我們需要了解它不是什么。
DOM不是源HTML
雖然DOM是從源HTML文檔創建的，但它并不總是完全相同。在兩個實例中，DOM可以與源HTML不同。
DOM是有效HTML文檔的接口。在創建DOM的過程中，瀏覽器可能會糾正HTML代碼中的一些錯誤。
讓我們以這個HTML文檔為例:
<!doctype html> <html> Hello, world! </html>
文檔缺少一個
<head>
和
<body>
元素，這是有效HTML的一個要求。如果我們查看生成的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與渲染樹的真正區別在于，后者只包含最終將在屏幕上繪制的內容。
[圖片上傳失敗...(image-61c376-1546073073535)]
因為渲染樹只關注渲染的內容，它排除了視覺上隱藏的元素。例如，具有與display: none樣式相關聯的元素。
<!doctype html> <html> <head></head> <body> <h2>Hello, world!</h2> <p style="display: none;">How are you?</p> </body> </html>
DOM將包含
<p>
元素:
然而，渲染樹，以及在視圖中看到的內容，將不包含該元素。
DOM不是DevTools中的DOM
這種差異有點小，因為DevTools元素檢查器提供了與瀏覽器中DOM最接近的近似。但是，DevTools檢查器包含了不在DOM中的其他信息。
最好的例子是CSS偽元素。使用::before和::after選擇器創建的偽元素構成CSSOM和渲染樹的一部分，但在技術上不是DOM的一部分。這是因為DOM是單獨從源HTML文檔構建的，不包括應用于元素的樣式。
盡管偽元素不是DOM的一部分，但是它們在我們的devtools元素檢查器中。
這就是Javascript不能以偽元素為目標的原因，因為它們不是DOM的一部分。
總結
DOM是HTML文檔的接口。瀏覽器使用它作為決定在視圖中呈現什么內容的第一步，并通過Javascript程序修改頁面的內容、結構或樣式。
雖然與源HTML文檔的其他形式類似，DOM在許多方面是不同的:
這里推薦一下我的學習交流群：731771211，里面都是學習前端的，如果你想制作酷炫的網頁，想學習編程。從最基礎的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小伙伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小伙伴歡迎加入
點擊： 加入
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
