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>

打印页面