本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。

為青岡等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及青岡網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、青岡網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

簡(jiǎn)介

我們知道可以使用document對(duì)象的內(nèi)置方法通過(guò)ID，類，標(biāo)簽名和查詢選擇器來(lái)訪問(wèn)HTML元素。DOM 是由節(jié)點(diǎn)樹構(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樹，節(jié)點(diǎn)，以及如何識(shí)別最常見的節(jié)點(diǎn)類型。最后，創(chuàng)建一個(gè) JS 程序來(lái)交互式地修改DOM。

HTML術(shù)語(yǔ)

首先，我們看一下這個(gè)HTML元素。

 
 
 
 

  
  
  
  
Home
 
 
 
 

這里我們有一個(gè)錨元素，它是一個(gè)到index.html的鏈接。

• a 是標(biāo)簽
• href 是屬性
• index.html 是屬性值
• Home 是文本

開頭和結(jié)尾標(biāo)記之間的所有內(nèi)容組合在一起構(gòu)成了整個(gè)HTML元素。

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  
  
  
  
  
  
    
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
    
Document Object Model
  
  
  
  
  
  
  
  
  

 
 
 
 

使用 JS 訪問(wèn)元素的最簡(jiǎn)單方法是通過(guò)id屬性，接著為上面的 a 標(biāo)簽添加一個(gè)id為nav值。

 
 
 
 

  
  
  
  
Home
 
 
 
 

我們可以通過(guò)getElementById()方法來(lái)獲取 a 標(biāo)簽。在控制臺(tái)輸入：

 
 
 
 

  
  
  
  
let navLink = document.getElementById('nav');
 
 
 
 

輸出：

 
 
 
 

  
  
  
  
Home
 
 
 
 

我們可以通過(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)容：

 
 
 
 

  
  
  
  
跳轉(zhuǎn)取前端小智 Github
 
 
 
 

到這里，我們應(yīng)該了解如何使用document 方法訪問(wèn)元素，如何將元素分配給變量以及如何修改元素中的屬性和值。

DOM 樹和節(jié)點(diǎn)

DOM中的所有元素都被定義為節(jié)點(diǎn)。節(jié)點(diǎn)的類型有很多種，但我們最常用的主要有三種：

• 元素節(jié)點(diǎn)
• 文本節(jié)點(diǎn)
• 注釋節(jié)點(diǎn)

當(dāng)HTML元素是DOM中的一個(gè)項(xiàng)時(shí)，它被稱為元素節(jié)點(diǎn)。元素之外的任何單獨(dú)文本都是一個(gè)文本節(jié)點(diǎn)，HTML 注釋是一個(gè)注釋節(jié)點(diǎn)。除了這三種節(jié)點(diǎn)類型之外，document 本身也是一個(gè)document 節(jié)點(diǎn)，它是所有其他節(jié)點(diǎn)的根。

DOM由嵌套節(jié)點(diǎn)的樹結(jié)構(gòu)組成，通常稱為DOM樹。我們知道祖先的家譜，該譜系由父母，孩子和兄弟姐妹組成。DOM中的節(jié)點(diǎn)也稱為父級(jí)，子級(jí)和同級(jí)，具體取決于它們與其他節(jié)點(diǎn)的關(guān)系。

為了演示，創(chuàng)建一個(gè)nodes.html文件，添加文本，注釋和元素節(jié)點(diǎn)。

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  
  
  
  
  
  
    
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
    
An element node
  
  
  
  
    
  
  
  
  
    A text node.
  
  
  
  
  
  
  
  
  

 
 
 
 

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)的類型不會(huì)改變其嵌套的級(jí)別。

注意:當(dāng)使用HTML生成的DOM時(shí)，HTML源代碼的縮進(jìn)將創(chuàng)建許多空文本節(jié)點(diǎn)，這些節(jié)點(diǎn)在DevTools Elements選項(xiàng)卡中是不可見的。了解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)類型

文檔中的每個(gè)節(jié)點(diǎn)都有一個(gè)節(jié)點(diǎn)類型，可以通過(guò)nodeType屬性訪問(wèn)該類型，更多節(jié)點(diǎn)類型大家可以到 MDN 上查看。下面是我們比較常見節(jié)點(diǎn)類型。

Node Type	值	描述
ELEMENT_NODE	1	一個(gè) 元素 節(jié)點(diǎn)，例如   和
TEXT_NODE	3	Element 或者 Attr 中實(shí)際的  文字
COMMENT_NODE	8	注釋節(jié)點(diǎn)，如

在 Developer Tools 的Elements選項(xiàng)卡中，你可能會(huì)注意到，每當(dāng)單擊并突出顯示DOM中的任何一行時(shí)，它旁邊就會(huì)出現(xiàn)== $0的值。通過(guò)輸入$0，這是訪問(wèn)開發(fā)人員工具中當(dāng)選中元素的一種非常方便的方法。

通過(guò) F12 選中一個(gè)元素，如我們選中 h1 標(biāo)簽：

在控制臺(tái)中，使用nodeType屬性獲取當(dāng)前選定節(jié)點(diǎn)的節(jié)點(diǎn)類型。

 
 
 
 

  
  
  
  
$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 中的事件是用戶所做的動(dòng)作。當(dāng)用戶將鼠標(biāo)懸停在一個(gè)元素上，或單擊一個(gè)元素，或按下鍵盤上的一個(gè)特定鍵時(shí)，這些都是事件類型。在這個(gè)特殊的例子中，我們希望我們的按鈕偵聽并準(zhǔn)備在用戶單擊它時(shí)執(zhí)行操作。我們可以通過(guò)向按鈕添加一個(gè)事件監(jiān)聽器來(lái)做到這一點(diǎn)。

在 scripts.js中首先找到 button 元素，并監(jiān)聽一個(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)樹的，節(jié)點(diǎn)樹通常是HTML元素、文本或注釋，我們創(chuàng)建了一個(gè)腳本，允許用戶修改網(wǎng)站，而不必手動(dòng)在開發(fā)人員控制臺(tái)中輸入代碼。

文章題目：如何遍歷DOM？
網(wǎng)站URL：http://m.5511xx.com/article/cocjscc.html