Javascript 简明教程

JavaScript - DOM Navigation

在 JavaScript 中，带有 HTML DOM 我们能使用 navigate 节点之间的关系节点。每个 HTML 元素在 DOM tree 中表示为节点。HTML 文档对象表示为根节点。有不同类型的节点，例如根节点，父级、子级和同级节点。这些节点之间的关系有助于导航 DOM 树。

What are DOM Nodes?

当浏览器加载网页时，它会创建一个文档对象。“文档”对象是网页的根，您可以访问网页的其他 HTML 节点。

在 HTML DOM 中，所有内容都是节点。

“文档”是每个节点的父节点。
每个 HTML 元素都是一个节点。
HTML 元素内的文本是一个节点。
HTML 内的所有注释节点是节点。

您可以访问 HTML DOM 的所有节点。

Relationship between HTML DOM Nodes

在 HTML DOM 中，每个节点与其他节点有关系。每个节点在 DOM 树中呈层次结构。

以下是本章中将要使用的术语。

Root node − 文档节点是根节点。
Parent node − 每个节点有一个单独的父节点。根节点没有任何父节点。
Child node − 每个节点可以有多个嵌套的子渲染。
Sibling node − 同级节点处于同一层级，具有相同的父节点。

让我们在以下示例中了解节点之间的关系。

Example

<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> 节点。

Navigating Between Nodes Using JavaScript

在节点之间导航意味着在 DOM 树中查找一个特定元素的父元素、子元素、兄弟元素等。

你可以使用下列方法和属性在 DOM 树中的节点之间导航。

Property

Description

firstChild

· 获取特定节点的第一个子元素。它还可以返回文本、注释等。

firstElementChild

· 获取第一个子元素。例如，<p>、<div>、<img> 等。

lastChild

· 获取特定节点的最后一个子元素。它还可以返回文本、注释等。

lastElementChild

· 获取最后一个子元素。

childNodes

· 获取特定元素所有子元素的节点列表。

children

· 获取特定元素所有子元素的 HTML 集合。

parentNode

· 获取 HTML 元素的父节点。

parentElement

· 获取 HTML 元素的父元素节点。

nextSibling

· 从拥有相同父节点的同级中获取下一个节点。

nextElementSibling

要从具有相同父节点的同一级别获取下一个元素节点。

previousSibling

要从具有相同父节点的同一级别获取上一个节点。

previousElementSibling

要从具有相同父节点的同一级别获取上一个元素节点。

在下面，我们将使用每种方法来遍历 DOM 元素。

Accessing the First Child Element

可以使用 firstChild 或 firstElementChild 属性访问特定子元素。

Syntax

按照下面的语法使用“firstChild”和“firstElementChild”属性访问第一个子元素。

element.firstChild;
element.firstChildElement;

Example

在下面的代码中，<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>

Accessing the Last Child Element

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

Syntax

按照下面的语法使用’lastChild’和’laststElementChild’属性访问las=st子元素。

element.lastChild;
element.lastChildElement;

Example

在下面的代码中，我们定义了包含 3 个 <p> 元素的 <div> 元素，其中包含编程语言的名称。

在输出中，可以看到 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>

Accessing all children of HTML Element

可以使用 childNodes 属性访问所有子元素的节点列表，或使用 children 属性访问所有子的 HTML 集合。

Syntax

按照下面的语法访问 DOM 元素的所有子元素。

element.children;
element.childNodes;

Example

在下面的代码中，我们使用 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>

Accessing the Parent Node of HTML Element

可以使用 parentNode 属性访问特定 HTML 节点的父节点。

Syntax

按照下面的语法使用 parentNode 属性。

element.parentNode;

Example

在下面的代码中，我们使用 JavaScript 来访问具有等于“蓝色”的 d 的 <li> 元素。之后，我们使用父节点属性来访问父节点。

它返回“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>

Accessing the Next Sibling Node

nextSibling 属性用于访问下一个兄弟节点。

Syntax

请遵循以下语法来使用 nextSibling 属性。

element.nextSibling

Example

在下面的代码中，我们访问了具有等于“苹果”的 id 的 <li> 元素，并使用 nextSibling 属性访问了下一个兄弟节点。它返回具有等于“香蕉”的 id 的 <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>

Accessing the Previous Sibling Node

previousSibling 属性用于访问 DOM 树中的上一个兄弟节点。

Syntax

请遵循以下语法来使用 previousSibling 属性。

element.previousSibling;

Example

在下面的代码中，我们访问了具有等于“香蕉”的 id 的 <li> 元素的上一个兄弟节点。它返回具有等于“苹果”的 id 的 <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 Root Nodes

HTML DOM 包含两个根节点。

document.body − 它返回文档的 <body> 元素。
document.documentElement - 它返回整个 HTML 文档。

Example: Using the 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>

Example: Using the 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 Property

HTML DOM 元素的 nodeName 属性用于获取节点的名称，它具有下面给出的规范。

它是只读的。您不能修改它。
nodeName 属性的值等于大写的标签名称。
文本节点的节点名称为 #text。
文档节点的节点名称为 #document。

Syntax

请遵循以下语法来使用 nodeName 属性获取节点的名称。

element.nodeName;

Example

在下面的代码中，我们访问 <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 Property

nodeValue 用于获取的值，并且具有下面给出的规范。

它也是一个只读属性。
文本节点的节点值就是文本本身。
元素节点的节点值为 null。

Syntax

按照下面的语法使用 nodeValue 属性来获取节点的值。

element.nodeValue;

Example

<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>

Types of Node in DOM

这里，我们在 HTML DOM 中给出了不同的节点类型。

Node

Type

Description

Element Nodes

元素节点可以有子节点、属性和文本内容。例如，<div>、<a> 等是元素节点。

Text Nodes

文本节点可以在节点内部有文本内容。例如，<p>、<div> 等元素内部的文本。

Comment Nodes

注释节点包含注释。

Document Nodes

它表示整个文档。

Document Type Node

它表示文档的类型。例如，<!Doctype html>

DOM nodeType Property

nodeType 属性返回节点的类型，如上表所示。

Syntax

按照下面的语法使用 nodeType 属性来获取节点的类型。

element.nodeType;

Example

在如下代码中，我们使用 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>