javascript中DOM樹和節點是什么-創新互聯

這篇文章給大家分享的是有關javascript中DOM樹和節點是什么的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

成都創新互聯自2013年創立以來，先為南宮等服務建站，南宮等地企業，進行企業商務咨詢服務。為南宮企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

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

在本教程中，我們將回顧HTML術語，這對于使用JavaScript和DOM至關重要，我們將了解DOM樹，節點是什么以及如何識別最常見的節點類型。最后，我們將超越控制臺并創建一個JavaScript程序來交互式地修改DOM。

HTML術語

理解HTML和JavaScript術語對于理解如何使用DOM至關重要。讓我們簡要回顧一些HTML術語。

首先，我們來看看這個HTML元素。

<a href="index.html">Home</a>

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

a是標簽
href是屬性
index.html是屬性值
Home是文字。

開始和結束標記之間的所有內容組合在一起構成整個HTML 元素。

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

<!DOCTYPE html>
<html>
  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h2>Document Object Model</h2>
  </body>
</html>

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

<a id="nav" href="index.html">Home</a>

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

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

document.getElementById('nav');

<a id="nav" href="index.html">Home</a>

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

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

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

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

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

navLink.textContent = 'Navigate to Wikipedia';

現在，當我們在控制臺中查看元素或通過檢查Elements標記時，我們可以看到元素的更新方式。

navLink;

[secondary_label Output] <a id="nav" href="https://www.wikipedia.org/">Navigate to Wikipedia</a>

這也反映在網站的前端。

javascript中DOM樹和節點是什么

刷新頁面將使所有內容恢復為原始值。

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

DOM樹和節點

DOM中的所有項都定義為節點。有許多類型的節點，但我們最常使用的主要有三種：

元素節點
文本節點
評論節點

當HTML元素是DOM中的項時，它被稱為元素節點。元素外部的任何單獨文本都是文本節點，HTML注釋是注釋節點。除了這三種節點類型之外，它document本身也是一個文檔節點，它是所有其他節點的根。

DOM由嵌套節點的樹結構組成，通常稱為DOM樹。您可能熟悉祖先的家譜，其中包括父母，孩子和兄弟姐妹。DOM中的節點也稱為父節點，子節點和兄弟節點，具體取決于它們與其他節點的關系。

要演示，請創建一個nodes.html文件。我們將添加文本，注釋和元素節點。

<!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元素節點是父節點。head并且body是兄弟姐妹，孩子的html。body包含三個子節點，它們都是兄弟節點 - 節點的類型不會改變它嵌套的級別。

注意：使用HTML生成的DOM時，HTML源代碼的縮進將創建許多空文本節點，這些節點在DevTools Elements選項卡中不可見。

識別節點類型

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

javascript中DOM樹和節點是什么

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

在nodes.html的控制臺中，單擊元素中的第body一個h2元素。

javascript中DOM樹和節點是什么

在控制臺中，使用屬性獲取當前所選節點的節點類型nodeType。

$0.nodeType;

Console：

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

當您知道如何訪問元素時，您可以在不突出顯示DOM中的元素的情況下查看節點類型。

document.body.nodeType;

Console：

除此之外nodeType，您還可以使用該nodeValue屬性獲取文本或注釋節點的值，并nodeName獲取元素的標記名稱。

使用Events修改DOM

到目前為止，我們只看到如何修改控制臺中的DOM，我們看到它是暫時的; 每次刷新頁面時，更改都會丟失。我們可以結合在本教程中學到的內容來創建一個交互式按鈕，在單擊時執行使用控制臺更新了正文的背景顏色的操作。

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

<!DOCTYPE html>
<html>
  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h2>Document Object Model</h2>
    <button id="changeBackground">Change Background Color</button>

    <script src="js/script.js"></script>
  </body>
</html>

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

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

let button = document.getElementById('changeBackground')

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

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

最后，在函數內部，通過下面代碼來更改背景顏色fuchsia。

document.body.style.backgroundColor = 'fuchsia'

這是我們的整個腳本：

let button = document.getElementById('changeBackground')

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

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

javascript中DOM樹和節點是什么