資訊專欄INFORMATION COLUMN
摘要：渲染樹是將在頁面上呈現的元素及其相關樣式的表示。為了完全理解是什么，我們需要看看它不是什么。這就是為什么偽元素不能被作為目標的原因，因為它們不是的一部分。
文檔對象模型或“DOM”是網頁的接口。 它本質上是頁面的API，允許程序讀取和操作頁面的內容，結構和樣式。
網頁是如何構建的？瀏覽器如何從源HTML文檔轉到在視口中顯示樣式化和交互式頁面稱為“關鍵渲染路徑”。 雖然這個過程可以分解為幾個步驟，正如我在“理解關鍵渲染路徑”一文中所述，這些步驟大致可分為兩個階段。 第一階段涉及瀏覽器解析文檔以確定最終將在頁面上呈現的內容，第二階段涉及瀏覽器執行呈現。
第一階段的結果是所謂的“渲染樹”。 渲染樹是將在頁面上呈現的HTML元素及其相關樣式的表示。 為了構建這個樹，瀏覽器需要兩件事：
CSSOM，與元素相關的樣式的表示
DOM，元素的表示
如何創建DOM（以及它看起來像什么）？DOM是源HTML文檔的基于對象的表示。 它有一些差異，我們將在下面看到，但它本質上是一種嘗試將HTML文檔的結構和內容轉換為可供各種程序使用的對象模型。
DOM的對象結構由所謂的“節點樹”表示。 它之所以被稱為是因為它可以被認為是具有單個父莖的樹，其分枝成幾個子枝，每個子枝可以具有葉子。 在這種情況下，父“stem”是根元素，子“branches”是嵌套元素，“leaves”是元素中的內容。
我們以此HTML文檔為例：
My first web page Hello, world!
How are you?
此文檔可以表示為以下節點樹：
DOM不是什么？在上面給出的示例中，看起來DOM是源HTML文檔的一對一映射或您看到的DevTools的映射。 但是，正如我所提到的，存在差異。 為了完全理解DOM是什么，我們需要看看它不是什么。
DOM不是您的源HTML盡管DOM是從源HTML文檔創建的，但它并不總是完全相同。 有兩個實例，DOM可以與源HTML不同。
當HTML無效時
DOM是有效HTML文檔的接口。 在創建DOM的過程中，瀏覽器可以糾正HTML代碼中的一些無效。
我們以此HTML文檔為例：
Hello, world!
該文檔缺少和元素，這是有效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的樣式。
Hello, world!
DOM將包含
元素：
但是，渲染樹以及因此在視口中看到的內容將不包含該元素。
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，拉你進群
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114338.html
摘要：是我寫的嗎還是我偶爾打開控制臺檢查元素的時候點擊的元素說實話，我花了好長時間才弄明白究竟是什么。什么簡單來說，是在瀏覽器中的表示形式，允許您操縱頁面。那么為什么它經常被稱為樹呢這是因為從一個父項開始，該父項擴展為子項。 原文自工程師Kara Luton博客，傳送門 DOM，當我第一次在訓練營學習編碼時，就一直聽到這個詞，但是我從來不知道它到底是什么意思。是我寫的HTML嗎？還是我偶爾...
摘要：是我寫的嗎還是我偶爾打開控制臺檢查元素的時候點擊的元素說實話，我花了好長時間才弄明白究竟是什么。什么簡單來說，是在瀏覽器中的表示形式，允許您操縱頁面。那么為什么它經常被稱為樹呢這是因為從一個父項開始，該父項擴展為子項。 原文自工程師Kara Luton博客，傳送門 DOM，當我第一次在訓練營學習編碼時，就一直聽到這個詞，但是我從來不知道它到底是什么意思。是我寫的HTML嗎？還是我偶爾...
摘要：在上述過程再細化為瀏覽器搜索自己的緩存。至此，瀏覽器已經得到了域名對應的地址。具體過程如下在中這一過程如下首先是字節流，經過解碼之后是字符流，然后通過詞法分析器會被解釋成詞語，之后經過語法分析器構建成節點，最后這些節點被組建成一棵樹。 面試的時候，我們經常會被問從在瀏覽器地址欄中輸入 url 到頁面展現的短短幾秒內瀏覽器究竟做了什么？那么瀏覽器到底做了啥？ 瀏覽器的多進程架構一個好的程...
閱讀 2106·2021-11-18 10:02
閱讀 2859·2021-09-04 16:41
閱讀 1148·2019-08-30 15:55
閱讀 1415·2019-08-29 17:27
閱讀 1085·2019-08-29 17:12
閱讀 2538·2019-08-29 15:38
閱讀 2861·2019-08-29 13:02
閱讀 2836·2019-08-29 12:29
