JavaScript - DOM 导航

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

什么是 DOM 节点？

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

在 HTML DOM 中，一切都是一个节点。

'document' 是每个节点的父节点。
每个 HTML 元素都是一个节点。
HTML 元素中的文本是一个节点。
HTML 中的所有注释都是 node 是节点。

您可以访问 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');
	 	 // 使用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');
	 	 // 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 元素的节点列表，或使用 children 属性访问所有 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;

例

在下面的代码中，我们访问 <li> 元素的前一个兄弟姐妹，其 id 等于 'banana'。它返回 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 用于获取的值，它有下面给出的规范。

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

语法

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

 element.nodeValue;

例

<div> 元素包含一些文本，<p> 元素在下面的代码中。

元素的第一个子元素是 text 节点<<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 中给出了不同的节点类型。

节点	Type	描述
Element Nodes	1	元素节点可以具有子节点、属性和文本内容。例如，<div>、<a> 等是元素节点。
Text Nodes	3	文本节点可以在节点内包含文本内容。例如，<p>、<div> 等元素内的文本。
Comment Nodes	8	注释节点，包含注释。
Document Nodes	9	表示整个文档。
Document Type Node	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>

<< JavaScript - DOM 动画 JavaScript - DOM 集合 >>