什麼是DOM?如何構建web頁面
文件物件模型,或“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> <h1>Hello, world!</h1> <p>How are you?</p> </body> </html>
本文件可以表示為以下節點樹:
DOM不是什麼?
在我上面給出的示例中,DOM似乎是源HTML文件或您所看到的DevTools的一對一對映。但是,正如我所提到的,有一些區別。為了完全理解DOM是什麼,我們需要了解它不是什麼。
DOM不是源HTML
雖然DOM是從源HTML文件建立的,但它並不總是完全相同。在兩個例項中,DOM可以與源HTML不同。
- 當HTML無效時
DOM是有效HTML文件的介面。在建立DOM的過程中,瀏覽器可能會糾正HTML程式碼中的一些錯誤。
讓我們以這個HTML文件為例:
<!doctype html> <html> Hello, world! </html>
文件缺少一個
<head>
和
<body>
元素,這是有效HTML的一個要求。如果我們檢視生成的DOM樹,就會發現這已經得到了糾正:
- 當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與渲染樹的真正區別在於,後者只包含最終將在螢幕上繪製的內容。
[圖片上傳失敗...(image-61c376-1546073073535)]
因為渲染樹只關注渲染的內容,它排除了視覺上隱藏的元素。例如,具有與display: none樣式相關聯的元素。
<!doctype html> <html> <head></head> <body> <h1>Hello, world!</h1> <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在許多方面是不同的:
- [ ] 它總是有效的HTML
- [ ] 它是一個活生生的模型,可以由Javascript修改
- [ ] 它不包含偽元素(例如,::after)
- [ ] 它確實包含隱藏元素(例如,display: none)
這裡推薦一下我的學習交流群:731771211,裡面都是學習前端的,如果你想製作酷炫的網頁,想學習程式設計。從最基礎的HTML+CSS+JS【炫酷特效,遊戲,外掛封裝,設計模式】到移動端HTML5的專案實戰的學習資料都有整理,送給每一位前端小夥伴,有想學習web前端的,或是轉行,或是大學生,還有工作中想提升自己能力的,正在學習的小夥伴歡迎加入
點選:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2564041/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 用Web Components構建單頁面應用Web
- Google 是如何構建 Web 框架的GoWeb框架
- 使用ArkWeb構建頁面Web
- 【譯】到底什麼是DOM
- [譯] 究竟什麼是DOM?
- 網頁出現404頁面,是什麼問題?網頁
- 回到基礎:什麼是DOM及DOM操作?
- 理解DOM到底是什麼
- 構建單頁Web應用Web
- 使用Webpack構建多頁面程式Web
- web頁面Web
- 透過結構化資料構建頁面
- webpack 構建多頁面應用——初探Web
- Dcat Admin 構建頁面佈局
- web前端是什麼?Web前端
- 什麼是 Web Workers?Web
- 什麼是Web serverWebServer
- 什麼是Web ServerWebServer
- Web service是什麼?Web
- 瀏覽器工作原理(22) - JavaScript是如何影響DOM樹構建的?瀏覽器JavaScript
- web assembly是什麼,能幹什麼Web
- [DOM Event Learning] Section 2 概念梳理 什麼是事件 DOM Event事件
- 為什麼要有 Servlet ,什麼是 Servlet 容器,什麼是 Web 容器?ServletWeb
- 執行時的頁面構建過程
- Web前端是做什麼的?就業前景如何?Web前端就業
- Web含義是什麼Web
- 什麼是Web Service (轉)Web
- 什麼是web組態Web
- 什麼是網頁?(轉)網頁
- 前端頁面有哪三層構成,分別是什麼?作用是什麼?前端
- Linux裡面歸檔命令是什麼?如何使用?Linux
- 阿里二面:什麼是mmap?阿里
- 快速構建頁面結構的 3D Visualization3D
- Shadow DOM 內部構造及如何構建獨立元件元件
- 什麼是Web前端?Web前端要學習什麼內容?Web前端
- L01 學習筆記--構建頁面筆記
- web頁面測試Web
- 什麼是web service?- SOAP Web Service & Restful Web ServiceWebREST