Javascript 简明教程

JavaScript - DOM Navigation

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

In JavaScript, with HTML DOM we can navigate the tree nodes using the relationship between the nodes. Each HTML element is represented as a node in the DOM tree. The HTML document object is represented as root node. There are different types of nodes such as root node, parent, child and sibling nodes. The relationship between these nodes help to navigate the DOM tree.

What are DOM Nodes?

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

When a webpage gets loaded in the browser, it creates a document object. The 'document' object is the root of the web page, and you can access other HTML nodes of the web page.

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

In the HTML DOM, everything is a node.

The 'document' is a parent node of each node.
Each HTML element is a node.
The text inside the HTML element is a node.
All comments inside the HTML are node is the node.

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

You can access all nodes of the HTML DOM.

Relationship between HTML DOM Nodes

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

In the HTML DOM, each node has a relationship with other nodes. Each node is present in the hierarchical structure in the DOM tree.

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

Here are the terms which we will use in this chapter.

Root node − The document node is a root node.
Parent node − Each node has a single parent node. The root node doesn’t have any parent node.
Child node − Each node can have multiple and nested childrenders.
Sibling node − The sibling nodes are at the same level, having the same parent node.

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

Let’s understand the relationship between nodes in the below example.

Example

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

在上述程序中，

In the above program,

<html> is a root node, and it doesn’t have a parent node.
The <html> node contains two child elements: <body> and <head>.
The <head> element contains the single child element: <title>.
The <title> node contains the single <text> node.
The <body> element contains the single child node: <div>.
The <div> node contains two child nodes: <h2> and <p>.
<h2> and <p> are siblings.
The parent of the <h2> and <p> is <div> node.
The parent of the <div> node is <body> node.

Navigating Between Nodes Using JavaScript

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

Navigating between nodes means finding the parent, child, sibling, etc. element of a particular element in the DOM tree.

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

You can use the below methods and properties to navigate between nodes in the DOM tree.

Property

Description

firstChild

To get the first child of the particular node. It can also return the text, comment, etc.

firstElementChild

To get the first child element. For example, <p>, <div>, <img>, etc.

lastChild

To get the last child of the particular node. It can also return the text, comment, etc.

lastElementChild

To get the last child element.

childNodes

To get the node list of all children of the particular element.

children

To get the HTML collection of all children of the particular element.

parentNode

To get the parent node of the HTML element.

parentElement

To get the parent element node of the HTML element.

nextSibling

To get the next node from the same level having the same parent node.

nextElementSibling

To get the next element node from the same level having the same parent node.

previousSibling

To get the previous node from the same level having the same parent node.

previousElementSibling

To get the previous element node from the same level having the same parent node.

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

Below, we will use each method to navigate through the DOM elements.

Accessing the First Child Element

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

You can access the particular child element using the firstChild or firstElementChild property.

Syntax

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

Follow the syntax below to use the 'firstChild' and 'firstElementChild' properties to access the first child element.

element.firstChild;
element.firstChildElement;

Example

在下面的代码中，<div> 元素包含文本后跟三个 <p> 元素。

In the below code, <div> element contains the text followed by three <p> elements.

当我们使用’firstChild’属性时，它返回包含’Numbers’文本的文本节点，而当我们使用’firstChildElement’属性时，它返回第一个

When we use the 'firstChild' property, it returns the text node containing the 'Numbers' text, and when we use the 'firstChildElement' property, it returns the first

元素。

element.

<!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 节点的最后一个子级。

You can use the lastChild or lastChildElement properties to access the last child of the particular HTML node.

Syntax

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

Follow the syntax below to use the 'lastChild' and 'laststElementChild' properties to access the las=st child element.

element.lastChild;
element.lastChildElement;

Example

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

In the below code, we have defined the <div> element containing 3 <p> elements containing the name of the programming languages.

在输出中，可以看到 lastElementChild 属性返回最后一个 <p> 元素，而 lastChild 属性返回 div 元素的文本节点。

In the output, you can see that the lastElementChild property returns the last <p> element, and the lastChild property returns the text node of the div element.

<!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 集合。

You can use the childNodes property to access the node list of all children elements or the children property to access the HTML collection of all children.

Syntax

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

Follow the syntax below to access all children elements of the DOM element.

element.children;
element.childNodes;

Example

在下面的代码中，我们使用 childNodes 属性访问 <div> 元素的所有子节点。

In the below code, we use the childNodes property to access all child nodes of the <div> element.

在输出中，可以看到它还会返回带有未定义文本的文本节点，因为它包含每个 HTML 元素节点前后方的文本节点。

In the output, you can see that it also returns the text nodes with undefined text as it contains the text nodes after and before each HTML element node.

<!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 节点的父节点。

You can use the parentNode property to access the parent node of the particular HTML node.

Syntax

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

Follow the syntax below to use the parentNode property.

element.parentNode;

Example

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

In the below code, we access the <li> element having d equal to 'blue' in JavaScript. After that, we use the parentNode property to access the parent node.

它返回“UL”节点，我们可以在输出中观察到。

It returns the 'UL' node, which we can observe in the output.

<!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 属性用于访问下一个兄弟节点。

The nextSibling property is used to access the next sibling.

Syntax

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

Follow the syntax below to use the nextSibling property.

element.nextSibling

Example

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

In the below code, we have access to the <li> element with an id equal to 'apple', and access to the next sibling node using the nextSibling property. It returns the <li> node having the id equal to 'banana'.

<!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 树中的上一个兄弟节点。

The previousSibling property is used to access the previous sibling node from the DOM tree.

Syntax

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

Follow the syntax below to use the previousSibling property.

element.previousSibling;

Example

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

In the below code, we access the previous sibling of the <li> element with an id equal to 'banana’. It returns the <li> element having id equal to 'apple'.

<!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 包含两个根节点。

The HTML DOM contains two root nodes.

document.body − It returns the <body> element of the document.
document.documentElement − It returns the entire HTML document.

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 属性用于获取节点的名称，它具有下面给出的规范。

The nodeName property of the HTML DOM element is used to get the name of the node, and it has specifications given below.

It is read−only. You can’t modify it.
The value of the nodeName property is equal to the tag name in the upper case.
The node name of the text node is #text.
The node name of the document node is #document.

Syntax

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

Follow the syntax below to use the nodeName property to get the name of the node.

element.nodeName;

Example

在下面的代码中，我们访问 <div> 元素并使用 nodeName 属性。它返回大写的标签名称。

In the below code, we access the <div> element and use the nodeName property. It returns the tag name in the uppercase.

<!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 用于获取的值，并且具有下面给出的规范。

The nodeValue is used to get the value of the, and it has specifications given below.

It is also a read-only property.
The node value for the text node is the text itself.
The node value for the element nodes is null.

Syntax

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

Follow the syntax below to use the nodeValue property to get the value of the node.

element.nodeValue;

Example

<div> 元素包含一些文本和如下代码中的 <p> 元素。

The <div> element contains some text, and the <p> element in the below code.

<div> 元素的第一个子元素是文本节点，<div> 元素的第二个子节点是 <p> 元素。

The first child element of the <div> element is the text node, and the second child node of the <div> element is the <p> element.

在输出中，你可以看到当使用 nodeValue 属性和文本节点时，它会返回文本。否则，当你使用 HTML 元素节点时，它会返回 null。

In the output, you can see that when you use the nodeValue property with the text node, it returns the text. Otherwise, it returns null when you use it with the HTML element node.

<!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 中给出了不同的节点类型。

Here, we have given different node types in the HTML DOM.

Node

Type

Description

Element Nodes

The element nodes can have child nodes, attributes, and text content. For example, <div>, <a>, etc., are element nodes.

Text Nodes

The text nodes can have text content inside the node. For example, text inside the <p>, <div>, etc. elements.

Comment Nodes

The comment nodes contain the comments.

Document Nodes

It represents the entire document.

Document Type Node

It represents the type of the document. For example, <!Doctype html>

DOM nodeType Property

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

The nodeType property returns the type of the node as shown in the above table.

Syntax

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

Follow the syntax below to use the nodeType property to get the type of the node.

element.nodeType;

Example

在如下代码中，我们使用 nodeType 属性来获取节点的类型。

In the below code, we use the nodeType property to get the type of the node.

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