JavaScript >> Javascript 文檔 >  >> Tags >> DOM

了解 DOM 樹和節點

本文最初是為 DigitalOcean 編寫的 .

DOM 通常被稱為 DOM 樹 , 並由稱為 nodes 的對象樹組成 .在 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 來自上一個教程:

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Learning the DOM</title>
  </head>

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

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

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

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

我們將使用 getElementById() 方法來訪問整個元素。在控制台中輸入以下內容:

document.getElementById('nav');
控制台
<a id="nav" href="index.html">Home</a>

我們已經使用 getElementById() 檢索了整個元素 .現在,不是每次我們想要訪問 nav 時都鍵入該對象和方法 鏈接,我們可以將元素放入變量中以更輕鬆地使用它。

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

navLink 變量包含我們的錨元素。從這裡,我們可以輕鬆地修改屬性和值。例如,我們可以通過更改 href 來更改鏈接的位置 屬性:

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

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

navLink.textContent = 'Navigate to Wikipedia';

現在,當我們查看我們的元素時,無論是在控制台中還是通過檢查 Elements 標籤,我們可以看到元素是如何更新的。

navLink;
<a id="nav" href="https://www.wikipedia.org/">Navigate to Wikipedia</a>

這也體現在網站的前端。

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

至此,您應該了解如何使用 document 訪問元素的方法,如何將元素賦值給變量,如何修改元素中的屬性和值。

DOM 樹和節點

DOM 中的所有項目都定義為 nodes .節點的類型很多,但我們最常使用的主要有以下三種:

  • 元素 節點
  • 文字 節點
  • 評論 節點

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

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

為了演示,創建一個 nodes.html 文件。我們將添加文本、評論和元素節點。

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

識別節點類型

文檔中的每個節點都有一個節點類型 ,通過 nodeType 訪問 財產。 Mozilla 開發者網絡有一個所有節點類型常量的最新列表。下面是我們在本教程中使用的最常見節點類型的圖表。

節點類型 示例
ELEMENT_NODE 1 <body> 元素
TEXT_NODE 3 不屬於元素的文本
COMMENT_NODE 8 <!-- an HTML comment -->

元素中 在 Developer Tools 的選項卡中,您可能會注意到,每當您單擊並突出顯示 DOM 中的任何一行時,== $0 的值 會出現在它旁邊。這是通過鍵入 $0 來訪問開發人員工具中當前活動元素的一種非常方便的方法 .

nodes.html 的控制台中 ,點擊body中的第一個元素 ,這是一個 h1 元素。

在控制台中,獲取節點類型 當前選定節點的 nodeType 屬性。

$0.nodeType;
控制台
1

使用 h1 選擇元素,你會看到 1 作為輸出,我們可以看到與 ELEMENT_NODE 相關 .對文本和註釋執行相同操作,它們將輸出 38 分別。

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

document.body.nodeType;
控制台
1

除了 nodeType , 你也可以使用 nodeValue 屬性來獲取文本或註釋節點的值,以及 nodeName 獲取元素的標籤名稱。

使用事件修改 DOM

到目前為止,我們只看到瞭如何在控制台中修改 DOM,我們看到的是暫時的;每次刷新頁面時,更改都會丟失。在 DOM 教程介紹中,我們使用控制台來更新 body 的背景顏色。我們可以結合我們在本教程中學到的知識來創建一個交互式按鈕,當點擊該按鈕時會執行此操作。

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

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

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

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

一個事件 在 JavaScript 中是用戶已採取的操作。當用戶將鼠標懸停在元素上,或單擊元素或按下鍵盤上的特定鍵時,這些都是事件類型。在這種特殊情況下,我們希望我們的按鈕能夠在用戶單擊它時進行監聽並準備好執行操作。我們可以通過添加一個事件監聽器來做到這一點 到我們的按鈕。

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

scripts.js
let button = document.getElementById('changeBackground')

使用 addEventListener() 方法,我們將告訴按鈕監聽點擊,並在點擊後執行一個功能。

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

最後,在函數內部,我們將編寫與上一教程相同的代碼,將背景顏色更改為 fuchsia .

scripts.js
document.body.style.backgroundColor = 'fuchsia'

這是我們的整個腳本:

scripts.js
let button = document.getElementById('changeBackground')

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

保存此文件後,刷新 index.html 在瀏覽器中。點擊按鈕,事件就會觸發。

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

結論

在本教程中,我們回顧了可以讓我們理解和修改 DOM 的術語。我們了解了 DOM 是如何構建為通常是 HTML 元素、文本或評論的節點樹的結構,並且我們創建了一個腳本,允許用戶修改網站,而無需在開發人員控制台中手動輸入代碼。


下一篇
Tutorial JavaScript 教程
  1. 如何在 DEV.TO 博客中添加 BUY ME A COFFEE 按鈕

  2. 在 WooCommerce 中為谷歌客戶評論計劃實施產品評論

  3. Python 與 Javascript 中的對象循環

  4. 如何使用 JavaScript 設置 CSS 樣式

  5. 在 JavaScript 中計算最大文件大小限制

  6. 如何在 React 項目中安裝 Tailwind CSS

  7. 管理您的品牌聲譽 - AWS Comprehend

  1. JavaScript DOM - 第 1 部分 - 它是什麼以及我們可以用它做什麼? [視頻+文章]

  2. 粘性標題導航菜單,當我向下滾動頁面時,頂部有間隙

  3. 點我

  4. 第 15 天 - 了解 Vue.js

  5. Angular 聊天應用教程

  6. 使用 JAMstack 進行 A/B 測試

  7. 讓我們使用 React-JS 使用 Deepgram🤖 構建 YouTube 克隆🐱‍💻🔥

  1. 如何在我的 GLSL 著色器上擴展效果區域?

  2. 使用 NodeJS、DynamoDB 和 AWS Lambda 創建 API:使用 dynamoose 實現更好的工作流程

  3. JavaScript 二維數組 |創建和訪問示例

  4. 準備服務器以使用 PM2 部署 NodeJ