DOM节点的访问操作
介绍
遍历DOM节点是指通过编程方式访问和操作DOM树中的各个节点。遍历DOM节点的方法可以帮助开发者查找和操作特定元素，实现对DOM结构的全面控制。常用的遍历方法包括访问父节点、子节点和兄弟节点。
遍历方法及用法
1、访问父节点
parentNode 属性：获取当前节点的父节点。
var parentElement = element.parentNode;
2、访问子节点
childNodes 属性：获取当前节点的所有子节点，返回一个NodeList。
firstChild 和 lastChild 属性：获取当前节点的第一个和最后一个子节点。
var childNodes = element.childNodes; var firstChild = element.firstChild; var lastChild = element.lastChild;
3、访问兄弟节点
nextSibling 和 previousSibling 属性：获取当前节点的下一个和上一个兄弟节点。
var nextSibling = element.nextSibling; var previousSibling = element.previousSibling;
4、遍历子节点
使用for循环或forEach方法遍历子节点。
element.childNodes.forEach(function(child) {
console.log(child);
});案例使用代码
以下是一个示例，展示了如何遍历DOM节点。假设我们有一个简单的HTML文档，其中包含几个嵌套的元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>遍历DOM节点示例</title>
</head>
<body>
<div id="container">
<h1>标题</h1>
<p>这是一个段落。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</div>
<script>
// 获取父节点
var container = document.getElementById('container');
console.log(container.parentNode); // 输出<body>节点
// 获取并遍历子节点
var childNodes = container.childNodes;
childNodes.forEach(function(node) {
console.log(node); // 输出<h1>、<p>、<ul>节点及其文本节点
});
// 获取第一个和最后一个子节点
console.log(container.firstChild); // 可能输出文本节点（空白字符）
console.log(container.lastChild); // 可能输出文本节点（空白字符）
// 访问兄弟节点
var firstElement = container.firstElementChild; // 获取第一个元素子节点
console.log(firstElement.nextSibling); // 可能输出文本节点（空白字符）
console.log(firstElement.nextElementSibling); // 获取下一个元素兄弟节点<p>
</script>
</body>
</html>练习题
请完成以下练习，以巩固对遍历DOM节点方法的理解：
创建一个HTML文件，包含以下内容：
一个<div>元素，ID为“box”，其中包含一个标题、一个段落和一个有三个列表项的无序列表。
一个按钮，ID为“traverseButton”，内容为“遍历节点”。
使用JavaScript完成以下操作：
获取ID为“box”的<div>元素，并在控制台打印其父节点。
遍历并在控制台打印<div>元素的所有子节点。
获取并在控制台打印<div>元素的第一个和最后一个子节点。
添加一个点击事件到按钮，当按钮被点击时，遍历无序列表的所有子节点并将其内容打印到控制台。
参考答案：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>遍历DOM节点练习</title>
</head>
<body>
<div id="box">
<h2>练习标题</h2>
<p>这是一个练习段落。</p>
<ul>
<li>练习列表项1</li>
<li>练习列表项2</li>
<li>练习列表项3</li>
</ul>
</div>
<button id="traverseButton">遍历节点</button>
<script>
// 获取ID为“box”的<div>元素
var boxElement = document.getElementById('box');
// 打印父节点
console.log(boxElement.parentNode); // 输出<body>节点
// 遍历并打印所有子节点
boxElement.childNodes.forEach(function(node) {
console.log(node); // 输出<h2>、<p>、<ul>节点及其文本节点
});
// 打印第一个和最后一个子节点
console.log(boxElement.firstChild); // 可能输出文本节点（空白字符）
console.log(boxElement.lastChild); // 可能输出文本节点（空白字符）
// 为按钮添加点击事件
var traverseButton = document.getElementById('traverseButton');
traverseButton.addEventListener('click', function() {
var listItems = boxElement.querySelectorAll('ul li');
listItems.forEach(function(item) {
console.log(item.textContent); // 输出列表项内容
});
});
</script>
</body>
</html>
需要购买本课才能留言哦~