溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何遍歷DOM，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
我們知道可以使用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元素。
<a href="index.html">Home</a>
這里我們有一個錨元素，它是一個到index.html的鏈接。
a 是標簽
href 是屬性
index.html 是屬性值
Home 是文本
開頭和結(jié)尾標記之間的所有內(nèi)容組合在一起構(gòu)成了整個HTML元素。
<!DOCTYPE html> <html> <head> <title>Learning the DOM</title> </head> <body> <h2>Document Object Model</h2> </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é)點。節(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> <h2>An element node</h2> <!-- 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...文檔中的每個節(jié)點都有一個節(jié)點類型，可以通過nodeType屬性訪問該類型，更多節(jié)點類型大家可以到 MDN 上查看。下面是我們比較常見節(jié)點類型。
| Node Type | 值 | 描述 |
|---|---|---|
| ELEMENT_NODE | 1 | 一個 元素 節(jié)點，例如 <p> 和 <p> |
| TEXT_NODE | 3 | Element 或者 Attr 中實際的 文字 |
| COMMENT_NODE | 8 | 注釋節(jié)點，如<!-- an HTML comment --> |
在 Developer Tools 的Elements選項卡中，你可能會注意到，每當單擊并突出顯示DOM中的任何一行時，它旁邊就會出現(xiàn)== $0的值。通過輸入$0，這是訪問開發(fā)人員工具中當選中元素的一種非常方便的方法。
通過 F12 選中一個元素，如我們選中 h2 標簽：
在控制臺中，使用nodeType屬性獲取當前選定節(jié)點的節(jié)點類型。
$0.nodeType; // 1
選擇h2元素后，可以看到控制臺輸出 1，它與ELEMENT_NODE相關(guān)。 對文本和注釋執(zhí)行相同的操作，分別輸出3和8。
除了nodeType之外，還可以使用nodeValue屬性獲取文本或注釋節(jié)點的值，并使用nodeName獲取元素的標簽名。
到目前為止，我們只看到了如何在控制臺中修改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ā)。
看完了這篇文章，相信你對“如何遍歷DOM”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼