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