JavaScript - DOM 導航

在 JavaScript 中，使用HTML DOM，我們可以利用節點之間的關係來導航樹節點。每個 HTML 元素在DOM 樹中都表示為一個節點。HTML 文件物件表示為根節點。節點有不同型別，例如根節點、父節點、子節點和兄弟節點。這些節點之間的關係有助於導航 DOM 樹。

什麼是 DOM 節點？

當網頁在瀏覽器中載入時，它會建立一個文件物件。'document' 物件是網頁的根，您可以訪問網頁的其他 HTML 節點。

在 HTML DOM 中，一切都是節點。

“document” 是每個節點的父節點。
每個 HTML 元素都是一個節點。
HTML 元素內的文字是一個節點。
HTML 內的所有註釋都是節點。

您可以訪問 HTML DOM 的所有節點。

HTML DOM 節點之間的關係

在 HTML DOM 中，每個節點與其他節點都有關係。每個節點都存在於 DOM 樹的分層結構中。

以下是我們將在本章中使用的術語。

根節點 - 文件節點是根節點。
父節點 - 每個節點都有一個父節點。根節點沒有任何父節點。
子節點 - 每個節點可以有多個和巢狀的子節點。
兄弟節點 - 兄弟節點位於同一級別，具有相同的父節點。

讓我們在下面的示例中瞭解節點之間的關係。

示例

<html>
<head>
   <title> JavaScrip - DOM Navigation </title>
</head>
<body>
   <div>
      <h3> Hi Users! </h3>
      <p> Hello World! </p>
   </div>
</body>
</html>

在上面的程式中，

<html> 是根節點，它沒有父節點。
<html> 節點包含兩個子元素：<body> 和 <head>。
<head> 元素包含單個子元素：<title>。
<title> 節點包含單個 <text> 節點。
<body> 元素包含單個子節點：<div>。
<div> 節點包含兩個子節點：<h2> 和 <p>。
<h2> 和 <p> 是兄弟節點。
<h2> 和 <p> 的父節點是 <div> 節點。
<div> 節點的父節點是 <body> 節點。

使用 JavaScript 在節點之間導航

在節點之間導航意味著在 DOM 樹中查詢特定元素的父元素、子元素、兄弟元素等。

您可以使用以下方法和屬性在 DOM 樹中導航節點。

屬性	描述
firstChild	獲取特定節點的第一個子節點。它還可以返回文字、註釋等。
firstElementChild	獲取第一個子元素。例如，<p>、<div>、<img> 等。
lastChild	獲取特定節點的最後一個子節點。它還可以返回文字、註釋等。
lastElementChild	獲取最後一個子元素。
childNodes	獲取特定元素所有子節點的節點列表。
children	獲取特定元素所有子元素的 HTML 集合。
parentNode	獲取 HTML 元素的父節點。
parentElement	獲取 HTML 元素的父元素節點。
nextSibling	獲取同一級別具有相同父節點的下一個節點。
nextElementSibling	獲取同一級別具有相同父節點的下一個元素節點。
previousSibling	獲取同一級別具有相同父節點的上一個節點。
previousElementSibling	獲取同一級別具有相同父節點的上一個元素節點。

下面，我們將使用每種方法遍歷 DOM 元素。

訪問第一個子元素

您可以使用 firstChild 或 firstElementChild 屬性訪問特定子元素。

語法

請遵循以下語法使用“firstChild”和“firstElementChild”屬性訪問第一個子元素。

element.firstChild;
element.firstChildElement;

示例

在下面的程式碼中，<div>元素包含文字，後面跟著三個<p>元素。

當我們使用“firstChild”屬性時，它返回包含“Numbers”文字的文字節點，而當我們使用“firstChildElement”屬性時，它返回第一個

元素。

<!DOCTYPE html>
<html>
<body>
  <div id = "num">Numbers
    <p> One </p>
    <p> Two </p>
    <p> Three </p>
  </div>
  <div id = "demo"> </div>
  <script>
    const output = document.getElementById('demo');
    const numbers = document.getElementById('num');
    // Using the firstChild property
    output.innerHTML += "numbers.firstChild: " + 
    numbers.firstChild.textContent.trim() + "<br>";
    // Using the firstElementChild property
    output.innerHTML += "numbers.firstElementChild: " + numbers.firstElementChild.textContent + "<br>";
  </script>
</body>
</html>

訪問最後一個子元素

您可以使用lastChild或lastChildElement屬性訪問特定HTML節點的最後一個子節點。

語法

請遵循以下語法使用“lastChild”和“laststElementChild”屬性訪問最後一個子元素。

element.lastChild;
element.lastChildElement;

示例

在下面的程式碼中，我們定義了包含3個<p>元素的<div>元素，這些<p>元素包含程式語言的名稱。

在輸出中，您可以看到lastElementChild屬性返回最後一個<p>元素，而lastChild屬性返回div元素的文字節點。

<!DOCTYPE html>
<html>
<body>
  <div id = "lang">
    <p> Java </p>
    <p> JavaScript </p>
    <p> HTML </p>
    Programming Languages
  </div>
  <div id = "demo"> </div>
  <script>
    const output = document.getElementById('demo');
    const langs = document.getElementById('lang');
    // Using the lastChild property
    output.innerHTML += "langs.lastChild: " + langs.lastChild.textContent.trim() + "<br>";
    // Using the lastElementChild property
    output.innerHTML += "langs.lastElementChild: " + langs.lastElementChild.textContent + "<br>";
  </script>
</body>
</html>

訪問HTML元素的所有子節點

您可以使用childNodes屬性訪問所有子元素的節點列表，或使用children屬性訪問所有子元素的HTML集合。

語法

請遵循以下語法訪問DOM元素的所有子元素。

element.children;
element.childNodes;

示例

在下面的程式碼中，我們使用childNodes屬性訪問<div>元素的所有子節點。

在輸出中，您可以看到它還返回了文字節點，其中包含未定義的文字，因為它包含每個HTML元素節點前後都有文字節點。

<!DOCTYPE html>
<html>
<body>
   <div id = "lang">
      <p> Java </p>
      <p> JavaScript </p>
      <p> HTML </p>
      programming Languages
   </div>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let langs = document.getElementById('lang');
      output.innerHTML += "All children of the div element are - " + "<br>";
      let allChild = langs.childNodes;
      for (let i = 0; i < allChild.length; i++) {
         output.innerHTML += allChild[i].nodeName + " " + allChild[i].innerHTML + "<br>";
      }
   </script>
</body>
</html>

訪問HTML元素的父節點

您可以使用parentNode屬性訪問特定HTML節點的父節點。

語法

請遵循以下語法使用parentNode屬性。

element.parentNode;

示例

在下面的程式碼中，我們使用JavaScript訪問具有d等於'blue'的<li>元素。然後，我們使用parentNode屬性訪問父節點。

它返回“UL”節點，我們可以在輸出中觀察到。

<!DOCTYPE html>
<html>
<body>
  <ul id = "color">
   <li id = "blue"> Blue </li>
   <li> Pink </li>
   <li> Red </li>
  </ul>
<div id = "output">The child node of the color list is:  </div>
<script>
  const blue = document.getElementById('blue');
  document.getElementById('output').innerHTML += blue.parentNode.nodeName;
</script>
</body>
</html>

訪問下一個兄弟節點

nextSibling屬性用於訪問下一個兄弟節點。

語法

請遵循以下語法使用nextSibling屬性。

element.nextSibling

示例

在下面的程式碼中，我們訪問了id等於'apple'的<li>元素，並使用nextSibling屬性訪問了下一個兄弟節點。它返回id等於'banana'的<li>節點。

<!DOCTYPE html>
<html>
<body>
<ul id = "fruit">
   <li id = "apple"> Apple </li>
   <li id = "banana"> Banana </li>
   <li id = "watermealon"> Watermealon </li>
</ul>
<div id = "output">The next sibling node of the apple node is: </div>
<script>
   const apple = document.getElementById('apple');
   document.getElementById('output').innerHTML += apple.nextElementSibling.textContent;
</script>
</body>
</html>

訪問上一個兄弟節點

previousSibling屬性用於從DOM樹中訪問上一個兄弟節點。

語法

請遵循以下語法使用previousSibling屬性。

element.previousSibling;

示例

在下面的程式碼中，我們訪問了id等於'banana'的<li>元素的上一個兄弟節點。它返回id等於'apple'的<li>元素。

<!DOCTYPE html>
<html>
<body>
  <ul id = "fruit">
    <li id = "apple"> Apple </li>
    <li id = "banana"> Banana </li>
    <li id = "watermealon"> Watermealon </li>
  </ul>
  <div id = "output">The previous sibling node of the banana node is: </div>
  <script>
    const banana = document.getElementById('banana');
    document.getElementById('output').innerHTML += banana.previousElementSibling.textContent;
  </script>
</body>
</html>

DOM根節點

HTML DOM包含兩個根節點。

document.body − 它返回文件的<body>元素。
document.documentElement − 它返回整個HTML文件。

示例：使用document.body

<!DOCTYPE html>
<html>
<body>
  <div> This is demo! </div>
  <div id="output"> </div>
  <script>
    const output = document.getElementById('output');
    output.innerHTML += "The body of the document is: " + document.body.innerHTML;
  </script>
</body>
</html>

示例：使用document.documentElement

<!DOCTYPE html>
<html>
  <body>
    <h1> Hi, Users! </h1>
    <div id="output"> </div>
    <script>
      const output = document.getElementById('output');
      output.innerHTML += "The full document is " + document.documentElement.innerHTML;
    </script>
  </body>
</html>

DOM nodeName屬性

HTML DOM元素的nodeName屬性用於獲取節點的名稱，它具有以下規範。

它是隻讀的。您不能修改它。
nodeName屬性的值等於大寫的標籤名稱。
文字節點的節點名稱為#text。
文件節點的節點名稱為#document。

語法

請遵循以下語法使用nodeName屬性獲取節點的名稱。

element.nodeName;

示例

在下面的程式碼中，我們訪問<div>元素並使用nodeName屬性。它以大寫形式返回標籤名稱。

<!DOCTYPE html>
<html>
<body>
  <div id = "output"> </div>
  <script>
    const output = document.getElementById('output'); 
    output.innerHTML = "The node name of the div node is: " + output.nodeName;
  </script>
</body>
</html>

DOM nodeValue屬性

nodeValue用於獲取的值，它具有以下規範。

它也是一個只讀屬性。
文字節點的節點值為文字本身。
元素節點的節點值為null。

語法

請遵循以下語法使用nodeValue屬性獲取節點的值。

element.nodeValue;

示例

在下面的程式碼中，<div>元素包含一些文字，<p>元素。

<div>元素的第一個子元素是文字節點，<div>元素的第二個子節點是<p>元素。

在輸出中，您可以看到當您將nodeValue屬性與文字節點一起使用時，它會返回文字。否則，當您將其與HTML元素節點一起使用時，它會返回null。

<!DOCTYPE html>
<html>
<body>
  <div id = "num">
    Numbers
    <p> One </p>
  </div>
  <div id = "output"> </div>
  <script>
    const output = document.getElementById('output');
    const num = document.getElementById('num');
    let child = num.childNodes;
    output.innerHTML += "The value of the first child is: " + child[0].nodeValue + "<br>";
    output.innerHTML += "The value of the second child is: " + child[1].nodeValue + "<br>";
  </script>
</body>
</html>

DOM中的節點型別

在這裡，我們給出了HTML DOM中不同的節點型別。

節點	型別	描述
元素節點	1	元素節點可以具有子節點、屬性和文字內容。例如，<div>、<a>等是元素節點。
文字節點	3	文字節點可以在節點內部包含文字內容。例如，<p>、<div>等元素內部的文字。
註釋節點	8	註釋節點包含註釋。
文件節點	9	它表示整個文件。
文件型別節點	10	它表示文件的型別。例如，<!Doctype html>

DOM nodeType屬性

nodeType屬性返回節點的型別，如上表所示。

語法

請遵循以下語法使用nodeType屬性獲取節點的型別。

element.nodeType;

示例

在下面的程式碼中，我們使用nodeType屬性獲取節點的型別。

<!DOCTYPE html>
<html>
<body>
  <div id = "output"> </div>
  <script>
    const output = document.getElementById('output');
    output.innerHTML += "The type of the div node is: " + output.nodeType;
  </script>
</body>
</html>

列印頁面