html網(wǎng)頁基本組成結(jié)構(gòu)（DOM節(jié)點、元素、屬性和文本）

來看html網(wǎng)頁的代碼和瀏覽器展現(xiàn)的結(jié)果（下圖1和圖2）：

圖1

圖2

然后對照著下圖的DOM樹，分析DOM的節(jié)點層次和定義：

除了html中的<!DOCTYPE>和<meta>聲明外，

1.第一級是html文件中的根元素：<html></html>標(biāo)簽

2.第二級是根元素html下面的子元素：<head></head>和<body></body>標(biāo)簽

3.第三級是<head>元素的子元素：<title></title>標(biāo)簽以及

<body>元素的子元素：<a></a>和<h1></h1>標(biāo)簽

4.title元素中有一個文本“這是網(wǎng)頁標(biāo)題”；

a元素中有一個href屬性和一個文本“這是鏈接”；

h1元素中有一個文本“這是網(wǎng)頁內(nèi)容中的標(biāo)題”。

綜上：

1.html文檔是一個文檔節(jié)點，

2.每個html元素是元素節(jié)點，

3.html元素內(nèi)的文本是文本節(jié)點，

4.每個html屬性是屬性節(jié)點。

節(jié)點的層級關(guān)系用術(shù)語來描述：

父（parent）、子（child）和同胞（sibling）等。

在節(jié)點樹中，頂端節(jié)點被稱為根（root），在頁面中對應(yīng)的是<html></html>標(biāo)簽，

每個節(jié)點都有父節(jié)點、除了根（它沒有父節(jié)點），<head></head>和<body></body>的父節(jié)點就是<html></html>，

一個節(jié)點可擁有任意數(shù)量的子節(jié)點，<body></body>的子節(jié)點有<a></a>和<h1></h1>，

同胞是擁有相同父節(jié)點的節(jié)點，<a></a>和<h1></h1>有相同的父節(jié)點，因此它倆就是同胞。

OM結(jié)構(gòu)

DOM 采用的是“樹形結(jié)構(gòu)”，用“樹節(jié)點”的形式來表示頁面中的每一個元素。我們先看下面的一個例子。

<html>
  <head>
    <title><title>
    <meta charset="utf-8" />
  </head>
	<body>
      <h1>C語言中文網(wǎng)</h1>
			<p>C語言中文網(wǎng)一個……</p>
			<p>C語言中文網(wǎng)成立于……</p>
	</body>
</html>

對于上面這個 HTML 文檔，DOM 將其解析為圖 1 所示的樹形結(jié)構(gòu)。

圖 1：DOM 樹

于HTML文檔被瀏覽器解析后就是一棵DOM樹，要改變HTML的結(jié)構(gòu)，就需要通過JavaScript來操作DOM。

始終記住DOM是一個樹形結(jié)構(gòu)。操作一個DOM節(jié)點實際上就是這么幾個操作：

更新：更新該DOM節(jié)點的內(nèi)容，相當(dāng)于更新了該DOM節(jié)點表示的HTML的內(nèi)容；
遍歷：遍歷該DOM節(jié)點下的子節(jié)點，以便進(jìn)行進(jìn)一步操作；
添加：在該DOM節(jié)點下新增一個子節(jié)點，相當(dāng)于動態(tài)增加了一個HTML節(jié)點；
刪除：將該節(jié)點從HTML中刪除，相當(dāng)于刪掉了該DOM節(jié)點的內(nèi)容以及它包含的所有子節(jié)點。

在操作一個DOM節(jié)點前，我們需要通過各種方式先拿到這個DOM節(jié)點。最常用的方法是document.getElementById()和document.getElementsByTagName()，以及CSS選擇器document.getElementsByClassName()。

由于ID在HTML文檔中是唯一的，所以document.getElementById()可以直接定位唯一的一個DOM節(jié)點。document.getElementsByTagName()和document.getElementsByClassName()總是返回一組DOM節(jié)點。要精確地選擇DOM，可以先定位父節(jié)點，再從父節(jié)點開始選擇，以縮小范圍。

例如：

// 返回ID為'test'的節(jié)點：
var test = document.getElementById('test');

// 先定位ID為'test-table'的節(jié)點，再返回其內(nèi)部所有tr節(jié)點：
var trs = document.getElementById('test-table').getElementsByTagName('tr');

// 先定位ID為'test-div'的節(jié)點，再返回其內(nèi)部所有class包含red的節(jié)點：
var reds = document.getElementById('test-div').getElementsByClassName('red');

// 獲取節(jié)點test下的所有直屬子節(jié)點:
var cs = test.children;

// 獲取節(jié)點test下第一個、最后一個子節(jié)點：
var first = test.firstElementChild;
var last = test.lastElementChild;

第二種方法是使用querySelector()和querySelectorAll()，需要了解selector語法，然后使用條件來獲取節(jié)點，更加方便：

// 通過querySelector獲取ID為q1的節(jié)點：
var q1 = document.querySelector('#q1');

// 通過querySelectorAll獲取q1節(jié)點內(nèi)的符合條件的所有節(jié)點：
var ps = q1.querySelectorAll('div.highlighted > p');

注意：低版本的IE<8不支持querySelector和querySelectorAll。IE8僅有限支持。

嚴(yán)格地講，我們這里的DOM節(jié)點是指Element，但是DOM節(jié)點實際上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多種，以及根節(jié)點Document類型，但是，絕大多數(shù)時候我們只關(guān)心Element，也就是實際控制頁面結(jié)構(gòu)的Node，其他類型的Node忽略即可。根節(jié)點Document已經(jīng)自動綁定為全局變量document。

練習(xí)

如下的HTML結(jié)構(gòu)

<!-- HTML結(jié)構(gòu) -->
<div id="test-div">
<div class="c-red">
    <p id="test-p">JavaScript</p>
    <p>Java</p>
  </div>
  <div class="c-red c-green">
    <p>Python</p>
    <p>Ruby</p>
    <p>Swift</p>
  </div>
  <div class="c-green">
    <p>Scheme</p>
    <p>Haskell</p>
  </div>
</div>

請選擇出指定條件的節(jié)點：

'use strict';

// 測試:
if (!js || js.innerText !== 'JavaScript') {
    alert('選擇JavaScript失敗!');
} else if (!arr || arr.length !== 3 || !arr[0] || !arr[1] || !arr[2] || arr[0].innerText !== 'Python' || arr[1].innerText !== 'Ruby' || arr[2].innerText !== 'Swift') {
    console.log('選擇Python,Ruby,Swift失敗!');
} else if (!haskell || haskell.innerText !== 'Haskell') {
    console.log('選擇Haskell失敗!');
} else {
    console.log('測試通過!');
}

DOM

文檔對象模型 (DOM) 是 HTML 和 XML 文檔的編程接口

它提供了對文檔的結(jié)構(gòu)化的表述，并定義了一種方式可以使從程序中對該結(jié)構(gòu)進(jìn)行訪問，從而改變文檔的結(jié)構(gòu)，樣式和內(nèi)容

任何 HTML或XML文檔都可以用 DOM表示為一個由節(jié)點構(gòu)成的層級結(jié)構(gòu)

節(jié)點分很多類型，每種類型對應(yīng)著文檔中不同的信息和（或）標(biāo)記，也都有自己不同的特性、數(shù)據(jù)和方法，而且與其他類型有某種關(guān)系，如下所示：

<html>
    <head>
        <title>Page</title>
    </head>
    <body>
        <p>Hello World!</p >
    </body>
</html>

DOM像原子包含著亞原子微粒那樣，也有很多類型的DOM節(jié)點包含著其他類型的節(jié)點。接下來我們先看看其中的三種：

<div>
    <p title="title">
        content
    </p >
</div>

上述結(jié)構(gòu)中，div、p就是元素節(jié)點，content就是文本節(jié)點，title就是屬性節(jié)點

操作

日常前端開發(fā)，我們都離不開DOM操作

在以前，我們使用Jquery，zepto等庫來操作DOM，之后在vue，Angular，React等框架出現(xiàn)后，我們通過操作數(shù)據(jù)來控制DOM（絕大多數(shù)時候），越來越少的去直接操作DOM

但這并不代表原生操作不重要。相反，DOM操作才能有助于我們理解框架深層的內(nèi)容

下面就來分析DOM常見的操作，主要分為：

創(chuàng)建節(jié)點
查詢節(jié)點
更新節(jié)點
添加節(jié)點
刪除節(jié)點

創(chuàng)建節(jié)點

// 創(chuàng)建一個html元素，這里以創(chuàng)建h3元素為例
document.createElement("h3")

// 創(chuàng)建一個文本節(jié)點；
document.createTextNode(String);

// 創(chuàng)建一個屬性節(jié)點，這里以創(chuàng)建class屬性為例
document.createAttribute("class");

createElement

創(chuàng)建新元素，接受一個參數(shù)，即要創(chuàng)建元素的標(biāo)簽名

const divEl = document.createElement("div");

createTextNode

創(chuàng)建一個文本節(jié)點

const textEl = document.createTextNode("content");

createDocumentFragment

用來創(chuàng)建一個文檔碎片，它表示一種輕量級的文檔，主要是用來存儲臨時節(jié)點，然后把文檔碎片的內(nèi)容一次性添加到DOM中

const fragment = document.createDocumentFragment();

當(dāng)請求把一個DocumentFragment 節(jié)點插入文檔樹時，插入的不是 DocumentFragment自身，而是它的所有子孫節(jié)點

createAttribute

創(chuàng)建屬性節(jié)點，可以是自定義屬性

const dataAttribute = document.createAttribute('custom');
consle.log(dataAttribute);

獲取節(jié)點

// 通過id號來獲取元素，返回一個元素對象
document.getElementById(idName) 
      
// 通過name屬性獲取id號，返回元素對象數(shù)組 
document.getElementsByName(name)  
   
// 通過class來獲取元素，返回元素對象數(shù)組
document.getElementsByClassName(className)   

// 通過標(biāo)簽名獲取元素，返回元素對象數(shù)組
document.getElementsByTagName(tagName) 

//不需要兼容IE      
document.querySelector('#idxxx')

document.querySelectorAll('.red')[0]

document.querySelectorAll('#idxxx')[0]

querySelector

傳入任何有效的css 選擇器，即可選中單個 DOM元素（首個）：

document.querySelector('.element')
document.querySelector('#element')
document.querySelector('div')
document.querySelector('[name="username"]')
document.querySelector('div + p > span')

如果頁面上沒有指定的元素時，返回 null

querySelectorAll

返回一個包含節(jié)點子樹內(nèi)所有與之相匹配的Element節(jié)點列表，如果沒有相匹配的，則返回一個空節(jié)點列表

const notLive = document.querySelectorAll("p");

需要注意的是，該方法返回的是一個 NodeList的靜態(tài)實例，它是一個靜態(tài)的“快照”，而非“實時”的查詢

關(guān)于獲取DOM元素的方法還有如下，就不一一述說

document.getElementById('id屬性值');返回?fù)碛兄付╥d的對象的引用
document.getElementsByClassName('class屬性值');返回?fù)碛兄付╟lass的對象集合
document.getElementsByTagName('標(biāo)簽名');返回?fù)碛兄付?biāo)簽名的對象集合
document.getElementsByName('name屬性值'); 返回?fù)碛兄付Q的對象結(jié)合
document/element.querySelector('CSS選擇器');  僅返回第一個匹配的元素
document/element.querySelectorAll('CSS選擇器');   返回所有匹配的元素
document.documentElement;  獲取頁面中的HTML標(biāo)簽
document.body; 獲取頁面中的BODY標(biāo)簽
document.all[''];  獲取頁面中的所有元素節(jié)點的對象集合型

除此之外，每個DOM元素還有parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling屬性，關(guān)系圖如下圖所示

更新節(jié)點

innerHTML

不但可以修改一個DOM節(jié)點的文本內(nèi)容，還可以直接通過HTML片段修改DOM節(jié)點內(nèi)部的子樹

// 獲取<p id="p">...</p >
var p = document.getElementById('p');
// 設(shè)置文本為abc:
p.innerHTML = 'ABC'; // <p id="p">ABC</p >
// 設(shè)置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p >的內(nèi)部結(jié)構(gòu)已修改

innerText、textContent

自動對字符串進(jìn)行HTML編碼，保證無法設(shè)置任何HTML標(biāo)簽

// 獲取<p id="p-id">...</p >
var p = document.getElementById('p-id');
// 設(shè)置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自動編碼，無法設(shè)置一個<script>節(jié)點:
// <p id="p-id"><script>alert("Hi")</script></p >

兩者的區(qū)別在于讀取屬性時，innerText不返回隱藏元素的文本，而textContent返回所有文本

style

DOM節(jié)點的style屬性對應(yīng)所有的CSS，可以直接獲取或設(shè)置。遇到-需要轉(zhuǎn)化為駝峰命名

// 獲取<p id="p-id">...</p >
const p = document.getElementById('p-id');
// 設(shè)置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px'; // 駝峰命名
p.style.paddingTop = '2em';

添加節(jié)點

// 創(chuàng)建一個html元素，這里以創(chuàng)建h3元素為例
document.createElement("h3")

// 創(chuàng)建一個文本節(jié)點；
document.createTextNode(String);

// 創(chuàng)建一個屬性節(jié)點，這里以創(chuàng)建class屬性為例
document.createAttribute("class");
// 往element內(nèi)部最后面添加一個節(jié)點，參數(shù)是節(jié)點類型
element.appendChild(Node);

// 在element內(nèi)部的中在existingNode前面插入newNode
elelment.insertBefore(newNode,existingNode);

獲取當(dāng)前元素的同級元素

// 返回當(dāng)前元素的下一個同級元素 沒有就返回null
element.nextSibling

// 返回當(dāng)前元素上一個同級元素 沒有就返回 null
element.previousSibling

獲取當(dāng)前元素的文本

// 返回元素的所有文本，包括html代碼
element.innerHTML

// 返回當(dāng)前元素的自身及子代所有文本值，只是文本內(nèi)容，不包括html代碼
element.innerText

獲取當(dāng)前節(jié)點的節(jié)點類型

// 返回節(jié)點的類型,數(shù)字形式（1-12）
// 常見幾個1：元素節(jié)點，2：屬性節(jié)點，3：文本節(jié)點。
node.nodeType

設(shè)置樣式

// 設(shè)置元素的樣式時使用style
element.style.color=“#eea”;

innerHTML

如果這個DOM節(jié)點是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM節(jié)點的內(nèi)容，相當(dāng)于添加了新的DOM節(jié)點

如果這個DOM節(jié)點不是空的，那就不能這么做，因為innerHTML會直接替換掉原來的所有子節(jié)點

appendChild

把一個子節(jié)點添加到父節(jié)點的最后一個子節(jié)點

舉個例子

<!-- HTML結(jié)構(gòu) -->
<p id="js">JavaScript</p >
<div id="list">
    <p id="java">Java</p >
    <p id="python">Python</p >
    <p id="scheme">Scheme</p >
</div>

添加一個p元素

const js = document.getElementById('js')
js.innerHTML = "JavaScript"
const list = document.getElementById('list');
list.appendChild(js);

現(xiàn)在HTML結(jié)構(gòu)變成了下面

<!-- HTML結(jié)構(gòu) -->
<div id="list">
    <p id="java">Java</p >
    <p id="python">Python</p >
    <p id="scheme">Scheme</p >
    <p id="js">JavaScript</p >  <!-- 添加元素 -->
</div>

上述代碼中，我們是獲取DOM元素后再進(jìn)行添加操作，這個js節(jié)點是已經(jīng)存在當(dāng)前文檔樹中，因此這個節(jié)點首先會從原先的位置刪除，再插入到新的位置

如果動態(tài)添加新的節(jié)點，則先創(chuàng)建一個新的節(jié)點，然后插入到指定的位置

const list = document.getElementById('list'),
const haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

insertBefore

把子節(jié)點插入到指定的位置，使用方法如下：

parentElement.insertBefore(newElement, referenceElement)

子節(jié)點會插入到referenceElement之前

setAttribute

// 括號傳入屬性名，返回對應(yīng)屬性的屬性值
element.getAttribute(attributeName)

// 傳入屬性名及設(shè)置的值
element.setAttribute(attributeName,attributeValue)

在指定元素中添加一個屬性節(jié)點，如果元素中已有該屬性改變屬性值

const div = document.getElementById('id')
div.setAttribute('class', 'white');//第一個參數(shù)屬性名，第二個參數(shù)屬性值。

刪除節(jié)點

刪除一個節(jié)點，首先要獲得該節(jié)點本身以及它的父節(jié)點，然后，調(diào)用父節(jié)點的removeChild把自己刪掉

// 拿到待刪除節(jié)點:
const self = document.getElementById('to-be-removed');
// 拿到父節(jié)點:
const parent = self.parentElement;
// 刪除:
const removed = parent.removeChild(self);
removed === self; // true

刪除后的節(jié)點雖然不在文檔樹中了，但其實它還在內(nèi)存中，可以隨時再次被添加到別的位置

給大家分享我收集整理的各種學(xué)習(xí)資料，前端小白交學(xué)習(xí)流程，入門教程等回答-下面是學(xué)習(xí)資料參考。

前端學(xué)習(xí)交流、自學(xué)、學(xué)習(xí)資料等推薦 - 知乎

家好，我是皮皮。

前言

對于前端來說，HTML 都是最基礎(chǔ)的內(nèi)容。

今天，我們來了解一下 HTML 和網(wǎng)頁有什么關(guān)系，以及與 DOM 有什么不同。通過本講內(nèi)容，你將掌握瀏覽器是怎么處理 HTML 內(nèi)容的，以及在這個過程中我們可以進(jìn)行怎樣的處理來提升網(wǎng)頁的性能，從而提升用戶的體驗。

一、瀏覽器頁面加載過程

不知你是否有過這樣的體驗：當(dāng)打開某個瀏覽器的時候，發(fā)現(xiàn)一直在轉(zhuǎn)圈，或者等了好長時間才打開頁面……

此時的你，會選擇關(guān)掉頁面還是耐心等待呢？

這一現(xiàn)象，除了網(wǎng)絡(luò)不穩(wěn)定、網(wǎng)速過慢等原因，大多數(shù)都是由于頁面設(shè)計不合理導(dǎo)致加載時間過長導(dǎo)致的。

我們都知道，頁面是用 HTML/CSS/JavaScript 來編寫的。

HTML 的職責(zé)在于告知瀏覽器如何組織頁面，以及搭建頁面的基本結(jié)構(gòu)；
CSS 用來裝飾 HTML，讓我們的頁面更好看；
JavaScript 則可以豐富頁面功能，使靜態(tài)頁面動起來。

HTML由一系列的元素組成，通常稱為HTML元素。HTML 元素通常被用來定義一個網(wǎng)頁結(jié)構(gòu)，基本上所有網(wǎng)頁都是這樣的 HTML 結(jié)構(gòu)：

<html>
    <head></head>
    <body></body>
</html>

其中：

html元素是頁面的根元素，它描述完整的網(wǎng)頁；
head元素包含了我們想包含在 HTML 頁面中，但不希望顯示在網(wǎng)頁里的內(nèi)容；
body元素包含了我們訪問頁面時所有顯示在頁面上的內(nèi)容，是用戶最終能看到的內(nèi)容;

HTML 中的元素特別多，其中還包括可用于 Web Components 的自定義元素。

前面我們提到頁面 HTML 結(jié)構(gòu)不合理可能會導(dǎo)致頁面響應(yīng)慢，這個過程很多時候體現(xiàn)在<script>和<style>元素的設(shè)計上，它們會影響頁面加載過程中對 Javascript 和 CSS 代碼的處理。

因此，如果想要提升頁面的加載速度，就需要了解瀏覽器頁面的加載過程是怎樣的，從根本上來解決問題。

瀏覽器在加載頁面的時候會用到 GUI 渲染線程和 JavaScript 引擎線程（更詳細(xì)的瀏覽器加載和渲染機(jī)制將在第 7 講中介紹）。其中，GUI 渲染線程負(fù)責(zé)渲染瀏覽器界面 HTML 元素，JavaScript 引擎線程主要負(fù)責(zé)處理 JavaScript 腳本程序。

由于 JavaScript 在執(zhí)行過程中還可能會改動界面結(jié)構(gòu)和樣式，因此它們之間被設(shè)計為互斥的關(guān)系。也就是說，當(dāng) JavaScript 引擎執(zhí)行時，GUI 線程會被掛起。

以網(wǎng)易云課堂官網(wǎng)為例，我們來看看網(wǎng)頁加載流程。

（1）當(dāng)我們打開官網(wǎng)的時候，瀏覽器會從服務(wù)器中獲取到 HTML 內(nèi)容。

（2）瀏覽器獲取到 HTML 內(nèi)容后，就開始從上到下解析 HTML 的元素。

（3）<head>元素內(nèi)容會先被解析，此時瀏覽器還沒開始渲染頁面。

我們看到<head>元素里有用于描述頁面元數(shù)據(jù)的<meta>元素，還有一些<link>元素涉及外部資源（如圖片、CSS 樣式等），此時瀏覽器會去獲取這些外部資源。除此之外，我們還能看到<head>元素中還包含著不少的<script>元素，這些<script>元素通過src屬性指向外部資源。

（4）當(dāng)瀏覽器解析到這里時（步驟 3），會暫停解析并下載 JavaScript 腳本。

（5）當(dāng) JavaScript 腳本下載完成后，瀏覽器的控制權(quán)轉(zhuǎn)交給 JavaScript 引擎。當(dāng)腳本執(zhí)行完成后，控制權(quán)會交回給渲染引擎，渲染引擎繼續(xù)往下解析 HTML 頁面。

（6）此時<body>元素內(nèi)容開始被解析，瀏覽器開始渲染頁面。

在這個過程中，我們看到<head>中放置的<script>元素會阻塞頁面的渲染過程：把 JavaScript 放在<head>里，意味著必須把所有 JavaScript 代碼都下載、解析和解釋完成后，才能開始渲染頁面。

到這里，我們就明白了：如果外部腳本加載時間很長（比如一直無法完成下載），就會造成網(wǎng)頁長時間失去響應(yīng)，瀏覽器就會呈現(xiàn)“假死”狀態(tài)，用戶體驗會變得很糟糕。

因此，對于對性能要求較高、需要快速將內(nèi)容呈現(xiàn)給用戶的網(wǎng)頁，常常會將 JavaScript 腳本放在<body>的最后面。這樣可以避免資源阻塞，頁面得以迅速展示。我們還可以使用defer/async/preload等屬性來標(biāo)記<script>標(biāo)簽，來控制 JavaScript 的加載順序。

百度首頁

三、DOM 解析

對于百度這樣的搜索引擎來說，必須要在最短的時間內(nèi)提供到可用的服務(wù)給用戶，其中就包括搜索框的顯示及可交互，除此之外的內(nèi)容優(yōu)先級會相對較低。

瀏覽器在渲染頁面的過程需要解析 HTML、CSS 以得到 DOM 樹和 CSS 規(guī)則樹，它們結(jié)合后才生成最終的渲染樹并渲染。因此，我們還常常將 CSS 放在<head>里，可用來避免瀏覽器渲染的重復(fù)計算。

二、HTML 與 DOM 有什么不同

我們知道<p>是 HTML 元素，但又常常將<p>這樣一個元素稱為 DOM 節(jié)點，那么 HTML 和 DOM 到底有什么不一樣呢？

根據(jù) MDN 官方描述：文檔對象模型（DOM）是 HTML 和 XML 文檔的編程接口。

也就是說，DOM 是用來操作和描述 HTML 文檔的接口。如果說瀏覽器用 HTML 來描述網(wǎng)頁的結(jié)構(gòu)并渲染，那么使用 DOM 則可以獲取網(wǎng)頁的結(jié)構(gòu)并進(jìn)行操作。一般來說，我們使用 JavaScript 來操作 DOM 接口，從而實現(xiàn)頁面的動態(tài)變化，以及用戶的交互操作。

在開發(fā)過程中，常常用對象的方式來描述某一類事物，用特定的結(jié)構(gòu)集合來描述某些事物的集合。DOM 也一樣，它將 HTML 文檔解析成一個由 DOM 節(jié)點以及包含屬性和方法的相關(guān)對象組成的結(jié)構(gòu)集合。

三、DOM 解析

我們常見的 HTML 元素，在瀏覽器中會被解析成節(jié)點。比如下面這樣的 HTML 內(nèi)容：

<html>
    <head>
        <title>標(biāo)題</title>
    </head>
    <body>
        <a href='xx.com'>我的超鏈接</a>
        <h1>頁面第一標(biāo)題</h1>
    </body>
</html>

打開控制臺 Elements 面板，可以看到這樣的 HTML 結(jié)構(gòu)，如下圖所示：

在瀏覽器中，上面的 HTML 會被解析成這樣的 DOM 樹，如下圖所示：

我們都知道，對于樹狀結(jié)構(gòu)來說，常常使用parent/child/sibling等方式來描述各個節(jié)點之間的關(guān)系，對于 DOM 樹也不例外。

舉個例子，我們常常會對頁面功能進(jìn)行抽象，并封裝成組件。但不管怎么進(jìn)行整理，頁面最終依然是基于 DOM 的樹狀結(jié)構(gòu)，因此組件也是呈樹狀結(jié)構(gòu)，組件間的關(guān)系也同樣可以使用parent/child/sibling這樣的方式來描述。同時，現(xiàn)在大多數(shù)應(yīng)用程序同樣以root為根節(jié)點展開，我們進(jìn)行狀態(tài)管理、數(shù)據(jù)管理也常常會呈現(xiàn)出樹狀結(jié)構(gòu)。

四、事件委托

我們知道，瀏覽器中各個元素從頁面中接收事件的順序包括事件捕獲階段、目標(biāo)階段、事件冒泡階段。其中，基于事件冒泡機(jī)制，我們可以實現(xiàn)將子元素的事件委托給父級元素來進(jìn)行處理，這便是事件委托。

如果我們在每個元素上都進(jìn)行監(jiān)聽的話，則需要綁定三個事件;(假設(shè)頁面上有a,b,c三個兄弟節(jié)點)

function clickEventFunction(e) {
  console.log(e.target === this); // logs `true`
  // 這里可以用 this 獲取當(dāng)前元素
}
// 元素a,b,c綁定
element2.addEventListener("click", clickEventFunction, false);
element5.addEventListener("click", clickEventFunction, false);
element8.addEventListener("click", clickEventFunction, false);

使用事件委托，可以通過將事件添加到它們的父節(jié)點，而將事件委托給父節(jié)點來觸發(fā)處理函數(shù)：

function clickEventFunction(event) {
  console.log(e.target === this); // logs `false`
  // 獲取被點擊的元素
  const eventTarget = event.target;
  // 檢查源元素`event.target`是否符合預(yù)期
  // 此處控制廣告面板的展示內(nèi)容
}
// 元素1綁定
element1.addEventListener("click", clickEventFunction, false);

這樣能解決什么問題呢？

綁定子元素會綁定很多次的事件，而綁定父元素只需要一次綁定。
將事件委托給父節(jié)點，這樣我們對子元素的增加和刪除、移動等，都不需要重新進(jìn)行事件綁定。

常見的使用方式主要是上述這種列表結(jié)構(gòu)，每個選項都可以進(jìn)行編輯、刪除、添加標(biāo)簽等功能，而把事件委托給父元素，不管我們新增、刪除、更新選項，都不需要手動去綁定和移除事件。

如果在列表數(shù)量內(nèi)容較大的時候，對成千上萬節(jié)點進(jìn)行事件監(jiān)聽，也是不小的性能消耗。使用事件委托的方式，我們可以大量減少瀏覽器對元素的監(jiān)聽，也是在前端性能優(yōu)化中比較簡單和基礎(chǔ)的一個做法。

注意:

如果我們直接在document.body上進(jìn)行事件委托，可能會帶來額外的問題;
由于瀏覽器在進(jìn)行頁面渲染的時候會有合成的步驟，合成的過程會先將頁面分成不同的合成層，而用戶與瀏覽器進(jìn)行交互的時候需要接收事件。此時，瀏覽器會將頁面上具有事件處理程序的區(qū)域進(jìn)行標(biāo)記，被標(biāo)記的區(qū)域會與主線程進(jìn)行通信。
如果我們document.body上被綁定了事件，這時候整個頁面都會被標(biāo)記;
即使我們的頁面不關(guān)心某些部分的用戶交互，合成器線程也必須與主線程進(jìn)行通信，并在每次事件發(fā)生時進(jìn)行等待。這種情況，我們可以使用passive: true選項來解決

五、總結(jié)

我們了解了 HTML 的作用，以及它是如何影響瀏覽器中頁面的加載過程的，同時還介紹了使用 DOM 接口來控制 HTML 的展示和功能邏輯。我們了解了DOM解析事件委托等相關(guān)概念。

在線咨詢

上一篇：如何簽出合法有效的電子合同？看這篇就夠了
下一篇：第12天 - 16天搞定前端，CSS的邊距，內(nèi)外有別？

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

html網(wǎng)頁基本組成結(jié)構(gòu)（DOM節(jié)點、元素、屬性和文本）

OM結(jié)構(gòu)

練習(xí)

DOM

操作

創(chuàng)建節(jié)點

createElement

createTextNode

createDocumentFragment

createAttribute

獲取節(jié)點

querySelector

querySelectorAll

更新節(jié)點

innerHTML

innerText、textContent

style

添加節(jié)點

innerHTML

appendChild

insertBefore

setAttribute

刪除節(jié)點

家好，我是皮皮。

前言

一、瀏覽器頁面加載過程

三、DOM 解析

二、HTML 與 DOM 有什么不同

三、DOM 解析

四、事件委托

五、總結(jié)

您的項目需求

html網(wǎng)頁基本組成結(jié)構(gòu)（DOM節(jié)點、元素、屬性和文本）

innerText、textContent

一、瀏覽器頁面加載過程

三、DOM 解析

四、事件委托

五、總結(jié)