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