javascript中DOM樹和節(jié)點(diǎn)是什么-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)javascript中DOM樹和節(jié)點(diǎn)是什么的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)自2013年創(chuàng)立以來，先為南宮等服務(wù)建站，南宮等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為南宮企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

DOM通常被稱為DOM樹，由稱為節(jié)點(diǎn)的對象樹組成。在DOM簡介中，我們討論了文檔對象模型（DOM），如何使用控制臺(tái)訪問document對象和修改其屬性，以及HTML源代碼和DOM之間的區(qū)別。

在本教程中，我們將回顧HTML術(shù)語，這對于使用JavaScript和DOM至關(guān)重要，我們將了解DOM樹，節(jié)點(diǎn)是什么以及如何識(shí)別最常見的節(jié)點(diǎn)類型。最后，我們將超越控制臺(tái)并創(chuàng)建一個(gè)JavaScript程序來交互式地修改DOM。

HTML術(shù)語

理解HTML和JavaScript術(shù)語對于理解如何使用DOM至關(guān)重要。讓我們簡要回顧一些HTML術(shù)語。

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

Home

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

• a是標(biāo)簽

• href是屬性

• index.html是屬性值

• Home是文字。

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

我們將與合作index.html從以前的教程：

  
    
  

  
    
Document Object Model
  

使用JavaScript訪問元素的最簡單方法是使用id屬性。讓我們將上面的鏈接添加到我們的index.html文件id中nav。

Home

在瀏覽器窗口中加載或重新加載頁面并查看DOM以確保代碼已更新。

我們將使用該getElementById()方法來訪問整個(gè)元素。在控制臺(tái)中，鍵入以下內(nèi)容：

document.getElementById('nav');

Home

我們使用了檢索整個(gè)元素getElementById()。現(xiàn)在，我們不是每次想要訪問nav鏈接時(shí)都鍵入該對象和方法，而是將元素放入變量中以便更輕松地使用它。

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

該navLink變量包含我們的錨元素。從這里，我們可以輕松修改屬性和值。例如，我們可以通過更改href屬性來更改鏈接的位置：

navLink.href = 'https://www.wikipedia.org';

我們還可以通過重新分配textContent屬性來更改文本內(nèi)容：

navLink.textContent = 'Navigate to Wikipedia';

現(xiàn)在，當(dāng)我們在控制臺(tái)中查看元素或通過檢查Elements標(biāo)記時(shí)，我們可以看到元素的更新方式。

navLink;

[secondary_label Output] Navigate to Wikipedia

這也反映在網(wǎng)站的前端。

刷新頁面將使所有內(nèi)容恢復(fù)為原始值。

此時(shí)，您應(yīng)該了解如何使用document方法來訪問元素，如何將元素分配給變量，以及如何修改元素中的屬性和值。

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

DOM中的所有項(xiàng)都定義為節(jié)點(diǎn)。有許多類型的節(jié)點(diǎn)，但我們最常使用的主要有三種：

• 元素節(jié)點(diǎn)

• 文本節(jié)點(diǎn)

• 評(píng)論節(jié)點(diǎn)

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

DOM由嵌套節(jié)點(diǎn)的樹結(jié)構(gòu)組成，通常稱為DOM樹。您可能熟悉祖先的家譜，其中包括父母，孩子和兄弟姐妹。DOM中的節(jié)點(diǎn)也稱為父節(jié)點(diǎn)，子節(jié)點(diǎn)和兄弟節(jié)點(diǎn)，具體取決于它們與其他節(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是兄弟姐妹，孩子的html。body包含三個(gè)子節(jié)點(diǎn)，它們都是兄弟節(jié)點(diǎn) - 節(jié)點(diǎn)的類型不會(huì)改變它嵌套的級(jí)別。

注意：使用HTML生成的DOM時(shí)，HTML源代碼的縮進(jìn)將創(chuàng)建許多空文本節(jié)點(diǎn)，這些節(jié)點(diǎn)在DevTools Elements選項(xiàng)卡中不可見。

識(shí)別節(jié)點(diǎn)類型

文檔中的每個(gè)節(jié)點(diǎn)都有一個(gè)節(jié)點(diǎn)類型，可以通過該nodeType屬性訪問。Mozilla Developer Network具有所有節(jié)點(diǎn)類型常量的最新列表。下面是我們在本教程中使用的最常見節(jié)點(diǎn)類型的圖表。

在開發(fā)人員工具的“ 元素”選項(xiàng)卡中，您可能會(huì)注意到，無論何時(shí)單擊并突出顯示DOM中的任何行，其值== $0都會(huì)顯示在其旁邊。這是通過鍵入來訪問Developer Tools中當(dāng)前活動(dòng)元素的非常方便的方法$0。

在nodes.html的控制臺(tái)中，單擊元素中的第body一個(gè)h2元素。

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

$0.nodeType;

Console：

1

隨著h2元件選擇，你會(huì)看到1作為輸出，我們可以看到關(guān)聯(lián)到ELEMENT_NODE。做文字和注釋是相同的，他們將輸出3和8分別。

當(dāng)您知道如何訪問元素時(shí)，您可以在不突出顯示DOM中的元素的情況下查看節(jié)點(diǎn)類型。

document.body.nodeType;

Console：

1

除此之外nodeType，您還可以使用該nodeValue屬性獲取文本或注釋節(jié)點(diǎn)的值，并nodeName獲取元素的標(biāo)記名稱。

使用Events修改DOM

到目前為止，我們只看到如何修改控制臺(tái)中的DOM，我們看到它是暫時(shí)的; 每次刷新頁面時(shí)，更改都會(huì)丟失。我們可以結(jié)合在本教程中學(xué)到的內(nèi)容來創(chuàng)建一個(gè)交互式按鈕，在單擊時(shí)執(zhí)行使用控制臺(tái)更新了正文的背景顏色的操作。

讓我們回到我們的index.html文件并添加一個(gè)button元素id。我們還將在新js目錄中添加指向新文件的鏈接js/scripts.js。

  
    
  

  
    
Document Object Model
    Change Background Color

    
  

JavaScript中的事件是用戶采取的操作。當(dāng)用戶將鼠標(biāo)懸停在元素上，或單擊某個(gè)元素或按下鍵盤上的特定鍵時(shí)，這些都是所有類型的事件。在這種特殊情況下，我們希望我們的按鈕能夠在用戶點(diǎn)擊它時(shí)監(jiān)聽并準(zhǔn)備好執(zhí)行操作。我們可以通過向按鈕添加事件監(jiān)聽器來實(shí)現(xiàn)此目的。

創(chuàng)建scripts.js并將其保存在新js目錄中。在文件中，我們首先找到button元素并將其分配給變量。

let button = document.getElementById('changeBackground')

使用該addEventListener()方法，我們將告訴按鈕監(jiān)聽單擊，并在單擊后執(zhí)行功能。

button.addEventListener('click', () => {
  // action will go here
})

最后，在函數(shù)內(nèi)部，通過下面代碼來更改背景顏色fuchsia。

document.body.style.backgroundColor = 'fuchsia'

這是我們的整個(gè)腳本：

let button = document.getElementById('changeBackground')

button.addEventListener('click', () => {
  document.body.style.backgroundColor = 'fuchsia'
})

保存此文件后，請index.html在瀏覽器中刷新。單擊按鈕，將觸發(fā)事件。

由于JavaScript事件，頁面的背景顏色已更改為紫紅色。

感謝各位的閱讀！關(guān)于javascript中DOM樹和節(jié)點(diǎn)是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁題目：javascript中DOM樹和節(jié)點(diǎn)是什么-創(chuàng)新互聯(lián)
URL鏈接：http://m.jiaotiyi.com/article/hjecg.html