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 树中的节点之间导航。

下面，我们将使用每个方法在 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');
    // 使用 firstChild 属性
    output.innerHTML += "numbers.firstChild: " + 
    numbers.firstChild.textContent.trim() + "<br>";
    // 使用 firstElementChild 属性
    output.innerHTML += "numbers.firstElementChild: " + numbers.firstElementChild.textContent + "<br>";
  </script>
</body>
</html>

访问最后一个子元素

您可以使用 lastChild 或 lastChildElement 属性访问特定 HTML 节点的最后一个子元素。

语法

按照以下语法，使用"lastChild"和"laststElementChild"属性访问 las=st 子元素。

element.lastChild;
element.lastChildElement;

示例

在下面的代码中，我们定义了一个 <div> 元素，其中包含 3 个 <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');
    // 使用 lastChild 属性
    output.innerHTML += "langs.lastChild: " + langs.lastChild.textContent.trim() + "<br>";
    // 使用 lastElementChild 属性
    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 中的不同节点类型。

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>