国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

究竟什么是DOM？

waltr / 1986人閱讀

摘要：渲染樹是將在頁(yè)面上呈現(xiàn)的元素及其相關(guān)樣式的表示。為了完全理解是什么，我們需要看看它不是什么。這就是為什么偽元素不能被作為目標(biāo)的原因，因?yàn)樗鼈儾皇堑囊徊糠帧?/p>

文檔對(duì)象模型或“DOM”是網(wǎng)頁(yè)的接口。 它本質(zhì)上是頁(yè)面的API，允許程序讀取和操作頁(yè)面的內(nèi)容，結(jié)構(gòu)和樣式。

網(wǎng)頁(yè)是如何構(gòu)建的？

瀏覽器如何從源HTML文檔轉(zhuǎn)到在視口中顯示樣式化和交互式頁(yè)面稱為“關(guān)鍵渲染路徑”。 雖然這個(gè)過(guò)程可以分解為幾個(gè)步驟，正如我在“理解關(guān)鍵渲染路徑”一文中所述，這些步驟大致可分為兩個(gè)階段。 第一階段涉及瀏覽器解析文檔以確定最終將在頁(yè)面上呈現(xiàn)的內(nèi)容，第二階段涉及瀏覽器執(zhí)行呈現(xiàn)。

第一階段的結(jié)果是所謂的“渲染樹”。 渲染樹是將在頁(yè)面上呈現(xiàn)的HTML元素及其相關(guān)樣式的表示。 為了構(gòu)建這個(gè)樹，瀏覽器需要兩件事：

CSSOM，與元素相關(guān)的樣式的表示

DOM，元素的表示

如何創(chuàng)建DOM（以及它看起來(lái)像什么）？

DOM是源HTML文檔的基于對(duì)象的表示。 它有一些差異，我們將在下面看到，但它本質(zhì)上是一種嘗試將HTML文檔的結(jié)構(gòu)和內(nèi)容轉(zhuǎn)換為可供各種程序使用的對(duì)象模型。

DOM的對(duì)象結(jié)構(gòu)由所謂的“節(jié)點(diǎn)樹”表示。 它之所以被稱為是因?yàn)樗梢员徽J(rèn)為是具有單個(gè)父莖的樹，其分枝成幾個(gè)子枝，每個(gè)子枝可以具有葉子。 在這種情況下，父“stem”是根元素，子“branches”是嵌套元素，“l(fā)eaves”是元素中的內(nèi)容。

我們以此HTML文檔為例：



 
   My first web page
  
 
    
Hello, world!

    
How are you?

此文檔可以表示為以下節(jié)點(diǎn)樹：

DOM不是什么？

在上面給出的示例中，看起來(lái)DOM是源HTML文檔的一對(duì)一映射或您看到的DevTools的映射。 但是，正如我所提到的，存在差異。 為了完全理解DOM是什么，我們需要看看它不是什么。

DOM不是您的源HTML

盡管DOM是從源HTML文檔創(chuàng)建的，但它并不總是完全相同。 有兩個(gè)實(shí)例，DOM可以與源HTML不同。

當(dāng)HTML無(wú)效時(shí)

DOM是有效HTML文檔的接口。 在創(chuàng)建DOM的過(guò)程中，瀏覽器可以糾正HTML代碼中的一些無(wú)效。

我們以此HTML文檔為例：



Hello, world!

該文檔缺少和元素，這是有效HTML的要求。 如果我們查看生成的DOM樹，我們將看到這已得到糾正：

當(dāng)Javascript修改DOM時(shí)

除了作為查看HTML文檔內(nèi)容的界面之外，還可以修改DOM，使其成為活動(dòng)的資源。

例如，我們可以使用Javascript為DOM創(chuàng)建其他節(jié)點(diǎn)。

var newParagraph = document.createElement("p");
var paragraphContent = document.createTextNode("I"m new!");
newParagraph.appendChild(paragraphContent);
document.body.appendChild(newParagraph);

這將更新DOM，但當(dāng)然不是我們的HTML文檔。

DOM不是您在瀏覽器中看到的（即渲染樹）

您在瀏覽器視口中看到的是渲染樹，正如我所提到的，它是DOM和CSSOM的組合。 真正將DOM與渲染樹分開的是，后者只包含最終將在屏幕上繪制的內(nèi)容。

因?yàn)殇秩緲鋬H關(guān)注渲染的內(nèi)容，所以它會(huì)排除視覺(jué)上隱藏的元素。 例如，具有display:none的樣式。



  
  
    
Hello, world!

    
How are you?

DOM將包含

元素：

但是，渲染樹以及因此在視口中看到的內(nèi)容將不包含該元素。

DOM不是DevTools中的東西

這種差異有點(diǎn)小，因?yàn)镈evTools元素檢查器提供了我們?cè)跒g覽器中最接近的DOM。 但是，DevTools檢查器包含不在DOM中的其他信息。

最好的例子是CSS偽元素。 使用::before和::after選擇器創(chuàng)建的偽元素構(gòu)成CSSOM和渲染樹的一部分，但在技術(shù)上不是DOM的一部分。 這是因?yàn)镈OM僅由源HTML文檔構(gòu)建，不包括應(yīng)用于元素的樣式。

盡管偽元素不是DOM的一部分，但它們?nèi)栽谖覀兊膁evtools元素檢查器中。

這就是為什么偽元素不能被Javascript作為目標(biāo)的原因，因?yàn)樗鼈儾皇荄OM的一部分。

概括

DOM是HTML文檔的接口。 它被瀏覽器用作確定在視口中呈現(xiàn)內(nèi)容的第一步，并通過(guò)Javascript程序來(lái)修改頁(yè)面的內(nèi)容，結(jié)構(gòu)或樣式。

雖然與其他形式的源HTML文檔類似，但DOM在許多方面有所不同：

它總是有效的HTML

它是一個(gè)可以通過(guò)Javascript修改的活模型

它不包含偽元素（例如::after）

它確實(shí)包含隱藏元素（例如display: none）

創(chuàng)建了一個(gè)程序員交流微信群，大家進(jìn)群交流IT技術(shù)

如果已過(guò)期，可以添加博主微信號(hào)15706211347，拉你進(jìn)群

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/53394.html

相關(guān)文章

  • [譯] 究竟什么是DOM？!

    摘要：是我寫的嗎還是我偶爾打開控制臺(tái)檢查元素的時(shí)候點(diǎn)擊的元素說(shuō)實(shí)話，我花了好長(zhǎng)時(shí)間才弄明白究竟是什么。什么簡(jiǎn)單來(lái)說(shuō)，是在瀏覽器中的表示形式，允許您操縱頁(yè)面。那么為什么它經(jīng)常被稱為樹呢這是因?yàn)閺囊粋€(gè)父項(xiàng)開始，該父項(xiàng)擴(kuò)展為子項(xiàng)。 原文自工程師Kara Luton博客，傳送門 DOM，當(dāng)我第一次在訓(xùn)練營(yíng)學(xué)習(xí)編碼時(shí)，就一直聽(tīng)到這個(gè)詞，但是我從來(lái)不知道它到底是什么意思。是我寫的HTML嗎？還是我偶爾...

    winterdawn 評(píng)論0 收藏0

  • [譯] 究竟什么是DOM？!

    摘要：是我寫的嗎還是我偶爾打開控制臺(tái)檢查元素的時(shí)候點(diǎn)擊的元素說(shuō)實(shí)話，我花了好長(zhǎng)時(shí)間才弄明白究竟是什么。什么簡(jiǎn)單來(lái)說(shuō)，是在瀏覽器中的表示形式，允許您操縱頁(yè)面。那么為什么它經(jīng)常被稱為樹呢這是因?yàn)閺囊粋€(gè)父項(xiàng)開始，該父項(xiàng)擴(kuò)展為子項(xiàng)。 原文自工程師Kara Luton博客，傳送門 DOM，當(dāng)我第一次在訓(xùn)練營(yíng)學(xué)習(xí)編碼時(shí)，就一直聽(tīng)到這個(gè)詞，但是我從來(lái)不知道它到底是什么意思。是我寫的HTML嗎？還是我偶爾...

    church 評(píng)論0 收藏0

  • 究竟什么是DOM？

    摘要：渲染樹是將在頁(yè)面上呈現(xiàn)的元素及其相關(guān)樣式的表示。為了完全理解是什么，我們需要看看它不是什么。這就是為什么偽元素不能被作為目標(biāo)的原因，因?yàn)樗鼈儾皇堑囊徊糠帧? 文檔對(duì)象模型或DOM是網(wǎng)頁(yè)的接口。 它本質(zhì)上是頁(yè)面的API，允許程序讀取和操作頁(yè)面的內(nèi)容，結(jié)構(gòu)和樣式。 網(wǎng)頁(yè)是如何構(gòu)建的？ 瀏覽器如何從源HTML文檔轉(zhuǎn)到在視口中顯示樣式化和交互式頁(yè)面稱為關(guān)鍵渲染路徑。 雖然這個(gè)過(guò)程可以分解為幾個(gè)步...

    DevTTL 評(píng)論0 收藏0

  • 輸入 url 到頁(yè)面展現(xiàn)的短短幾秒內(nèi)瀏覽器究竟做了什么？

    摘要：在上述過(guò)程再細(xì)化為瀏覽器搜索自己的緩存。至此，瀏覽器已經(jīng)得到了域名對(duì)應(yīng)的地址。具體過(guò)程如下在中這一過(guò)程如下首先是字節(jié)流，經(jīng)過(guò)解碼之后是字符流，然后通過(guò)詞法分析器會(huì)被解釋成詞語(yǔ)，之后經(jīng)過(guò)語(yǔ)法分析器構(gòu)建成節(jié)點(diǎn)，最后這些節(jié)點(diǎn)被組建成一棵樹。 面試的時(shí)候，我們經(jīng)常會(huì)被問(wèn)從在瀏覽器地址欄中輸入 url 到頁(yè)面展現(xiàn)的短短幾秒內(nèi)瀏覽器究竟做了什么？那么瀏覽器到底做了啥？ 瀏覽器的多進(jìn)程架構(gòu)一個(gè)好的程...

    dackel 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<