如何遍歷DOM？
本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。
簡(jiǎn)介
我們知道可以使用document對(duì)象的內(nèi)置方法通過(guò)ID，類(lèi)，標(biāo)簽名和查詢(xún)選擇器來(lái)訪(fǎng)問(wèn)HTML元素。DOM 是由節(jié)點(diǎn)樹(shù)構(gòu)成的，document節(jié)點(diǎn)位于根，其他每個(gè)節(jié)點(diǎn)(包括元素，注釋和文本節(jié)點(diǎn))都作為各個(gè)分支的節(jié)點(diǎn)。
在本教程中，我們回顧一些HTML術(shù)語(yǔ)，這對(duì)使用 JS 和DOM非常重要，我們會(huì)介紹一下DOM樹(shù)，節(jié)點(diǎn)，以及如何識(shí)別最常見(jiàn)的節(jié)點(diǎn)類(lèi)型。最后，創(chuàng)建一個(gè) JS 程序來(lái)交互式地修改DOM。
HTML術(shù)語(yǔ)
首先，我們看一下這個(gè)HTML元素。
- <a href="index.html">Home</a>
這里我們有一個(gè)錨元素，它是一個(gè)到index.html的鏈接。
- a 是標(biāo)簽
- href 是屬性
- index.html 是屬性值
- Home 是文本
開(kāi)頭和結(jié)尾標(biāo)記之間的所有內(nèi)容組合在一起構(gòu)成了整個(gè)HTML元素。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Learning the DOM</title>
- </head>
- <body>
- <h1>Document Object Model</h1>
- </body>
- </html>
使用 JS 訪(fǎng)問(wèn)元素的最簡(jiǎn)單方法是通過(guò)id屬性，接著為上面的 a 標(biāo)簽添加一個(gè)id為nav值。
- <a id="nav" href="index.html">Home</a>
我們可以通過(guò)getElementById()方法來(lái)獲取 a 標(biāo)簽。在控制臺(tái)輸入：
- let navLink = document.getElementById('nav');
輸出：
- <a id="nav" href="index.html">Home</a>
我們可以通過(guò)更改href屬性來(lái)更改鏈接的地址：
- navLink.href = 'https://github.com/qq449245884/xiaozhi';
我們還可以通過(guò)textContent屬性來(lái)更改文本內(nèi)容:
- navLink.textContent = '跳轉(zhuǎn)取前端小智 Github';
接著，直接在控制臺(tái)輸入 navLink 就可以看到我們 a 標(biāo)簽更新后的內(nèi)容：
- <a id="nav" href="https://github.com/qq449245884/xiaozhi">跳轉(zhuǎn)取前端小智 Github</a>
到這里，我們應(yīng)該了解如何使用document 方法訪(fǎng)問(wèn)元素，如何將元素分配給變量以及如何修改元素中的屬性和值。
DOM 樹(shù)和節(jié)點(diǎn)
DOM中的所有元素都被定義為節(jié)點(diǎn)。節(jié)點(diǎn)的類(lèi)型有很多種，但我們最常用的主要有三種：
- 元素節(jié)點(diǎn)
- 文本節(jié)點(diǎn)
- 注釋節(jié)點(diǎn)
當(dāng)HTML元素是DOM中的一個(gè)項(xiàng)時(shí)，它被稱(chēng)為元素節(jié)點(diǎn)。元素之外的任何單獨(dú)文本都是一個(gè)文本節(jié)點(diǎn)，HTML 注釋是一個(gè)注釋節(jié)點(diǎn)。除了這三種節(jié)點(diǎn)類(lèi)型之外，document 本身也是一個(gè)document 節(jié)點(diǎn)，它是所有其他節(jié)點(diǎn)的根。
DOM由嵌套節(jié)點(diǎn)的樹(shù)結(jié)構(gòu)組成，通常稱(chēng)為DOM樹(shù)。我們知道祖先的家譜，該譜系由父母，孩子和兄弟姐妹組成。DOM中的節(jié)點(diǎn)也稱(chēng)為父級(jí)，子級(jí)和同級(jí)，具體取決于它們與其他節(jié)點(diǎn)的關(guān)系。
為了演示，創(chuàng)建一個(gè)nodes.html文件，添加文本，注釋和元素節(jié)點(diǎn)。
- <!DOCTYPE html>
- <html>
- <head>
- <title>Learning About Nodes</title>
- </head>
- <body>
- <h1>An element node</h1>
- <!-- a comment node -->
- A text node.
- </body>
- </html>
html元素節(jié)點(diǎn)是父節(jié)點(diǎn)。head和body是兄弟節(jié)點(diǎn)，它們是 html 的子節(jié)點(diǎn)。body包含三個(gè)子節(jié)點(diǎn)，它們都是兄弟節(jié)點(diǎn)，節(jié)點(diǎn)的類(lèi)型不會(huì)改變其嵌套的級(jí)別。
注意:當(dāng)使用HTML生成的DOM時(shí)，HTML源代碼的縮進(jìn)將創(chuàng)建許多空文本節(jié)點(diǎn)，這些節(jié)點(diǎn)在DevTools Elements選項(xiàng)卡中是不可見(jiàn)的。了解DOM中的空白符更多知識(shí)請(qǐng)?jiān)L問(wèn) https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Whitespace
識(shí)別節(jié)點(diǎn)類(lèi)型
文檔中的每個(gè)節(jié)點(diǎn)都有一個(gè)節(jié)點(diǎn)類(lèi)型，可以通過(guò)nodeType屬性訪(fǎng)問(wèn)該類(lèi)型，更多節(jié)點(diǎn)類(lèi)型大家可以到 MDN 上查看。下面是我們比較常見(jiàn)節(jié)點(diǎn)類(lèi)型。
| Node Type | 值 | 描述 |
|---|---|---|
| ELEMENT_NODE | 1 | 一個(gè) 元素 節(jié)點(diǎn)，例如 <p> 和 <div> |
| TEXT_NODE | 3 | Element 或者 Attr 中實(shí)際的 文字 |
| COMMENT_NODE | 8 | 注釋節(jié)點(diǎn)，如<!-- an HTML comment --> |
在 Developer Tools 的Elements選項(xiàng)卡中，你可能會(huì)注意到，每當(dāng)單擊并突出顯示DOM中的任何一行時(shí)，它旁邊就會(huì)出現(xiàn)== $0的值。通過(guò)輸入$0，這是訪(fǎng)問(wèn)開(kāi)發(fā)人員工具中當(dāng)選中元素的一種非常方便的方法。
通過(guò) F12 選中一個(gè)元素，如我們選中 h1 標(biāo)簽：
在控制臺(tái)中，使用nodeType屬性獲取當(dāng)前選定節(jié)點(diǎn)的節(jié)點(diǎn)類(lèi)型。
- $0.nodeType;
- // 1
選擇h1元素后，可以看到控制臺(tái)輸出 1，它與ELEMENT_NODE相關(guān)。對(duì)文本和注釋執(zhí)行相同的操作，分別輸出3和8。
除了nodeType之外，還可以使用nodeValue屬性獲取文本或注釋節(jié)點(diǎn)的值，并使用nodeName獲取元素的標(biāo)簽名。
使用事件修改DOM
到目前為止，我們只看到了如何在控制臺(tái)中修改DOM，接著我們通過(guò)事件的方式來(lái)跟 Dom 玩玩。
回到index.html文件，添加一個(gè)帶有id的button元素，并新建 script.js 引入其中。
JS 中的事件是用戶(hù)所做的動(dòng)作。當(dāng)用戶(hù)將鼠標(biāo)懸停在一個(gè)元素上，或單擊一個(gè)元素，或按下鍵盤(pán)上的一個(gè)特定鍵時(shí)，這些都是事件類(lèi)型。在這個(gè)特殊的例子中，我們希望我們的按鈕偵聽(tīng)并準(zhǔn)備在用戶(hù)單擊它時(shí)執(zhí)行操作。我們可以通過(guò)向按鈕添加一個(gè)事件監(jiān)聽(tīng)器來(lái)做到這一點(diǎn)。
在 scripts.js中首先找到 button 元素，并監(jiān)聽(tīng)一個(gè) click 事件，在點(diǎn)擊事件里面我們?nèi)ジW(wǎng)頁(yè)的背景顏色：
- let button = document.getElementById('changeBackground')
- button.addEventListener('click', () => {
- document.body.style.backgroundColor = 'fuchsia'
- })
存該文件后，在瀏覽器中刷新index.html。單擊按鈕，事件將觸發(fā)。
總結(jié)
在本文中，我們了解了DOM 是如何構(gòu)造成節(jié)點(diǎn)樹(shù)的，節(jié)點(diǎn)樹(shù)通常是HTML元素、文本或注釋?zhuān)覀儎?chuàng)建了一個(gè)腳本，允許用戶(hù)修改網(wǎng)站，而不必手動(dòng)在開(kāi)發(fā)人員控制臺(tái)中輸入代碼。
