在前端开发中，与HTML文档进行交互是一项基本任务。文档对象模型（Document Object Model，简称DOM）为开发者提供了一种以编程方式访问和操作HTML文档的方式。DOM的核心是节点（Node）对象，它代表了文档中的各个部分。本博客将深入探讨JavaScript DOM Node对象，帮助您更好地理解它的作用和如何使用。
什么是DOM Node对象
在DOM中，所有的内容都是以节点的形式存在。节点是DOM的基本构建块，文档中的每个元素、属性、文本均以节点的形式表示。DOM Node对象代表了这些节点，是一个抽象的概念，用于表示文档中的层次结构。
Node对象有不同的类型，包括元素节点、属性节点、文本节点等，每种类型的节点在DOM中扮演着不同的角色。我们将逐一介绍它们。
1. 元素节点（Element Node）
元素节点代表HTML文档中的元素，例如<div>、<p>、<a>等标签。元素节点可以包含其他节点，因此它们构成了DOM树的分支。
2. 文本节点（Text Node）
文本节点代表元素中的文本内容。例如，<p>这是一个文本节点</p>中的“这是一个文本节点”就是一个文本节点。
3. 属性节点（Attribute Node）
属性节点代表元素的属性。例如，<a href="https://www.example.com">中的href属性就是一个属性节点。
4. 注释节点（Comment Node）
注释节点代表HTML文档中的注释，如<!-- 这是一个注释 -->。
5. 文档节点（Document Node）
文档节点代表整个HTML文档，通常在DOM树的顶部。文档节点是其他节点的容器，它包含了整个文档的结构。
Node对象有一些常用的属性和方法，用于访问和操作节点。下面，我们将详细介绍这些属性和方法。
访问和操作DOM Node
1. 访问子节点
在DOM中，节点可以包含子节点，可以使用以下属性来访问和操作子节点：
-
childNodes：获取包含元素的所有子节点的NodeList。 -
firstChild：获取第一个子节点。 -
lastChild：获取最后一个子节点。 -
parentNode：获取父节点。
下面是一个示例，演示如何使用这些属性：
<!DOCTYPE html>
<html>
<head>
<title>DOM Node示例</title>
</head>
<body>
<ul id="myList">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<script>
const myList = document.getElementById('myList');
const firstItem = myList.firstChild;
const lastItem = myList.lastChild;
const parent = myList.parentNode;
console.log('第一个子节点:', firstItem.textContent);
console.log('最后一个子节点:', lastItem.textContent);
console.log('父节点:', parent.tagName);
</script>
</body>
</html>在上面的示例中，我们首先获取了<ul>元素的引用，然后使用firstChild和lastChild属性访问了其第一个和最后一个子节点。同时，使用parentNode属性获取了父节点（<body>元素）的引用。
2. 创建新节点
除了访问现有的节点，我们还可以创建新的节点并将其添加到文档中。以下是一些常见的用于创建节点的方法：
-
document.createElement(tagName)：创建一个指定标签名的元素节点。 -
document.createTextNode(text)：创建一个包含指定文本的文本节点。 -
document.createComment(text)：创建一个包含指定注释文本的注释节点。
例如，我们可以使用document.createElement来创建一个新的<div>元素，如下所示：
const newDiv = document.createElement('div');3. 添加和删除节点
一旦我们创建了新的节点，我们可以使用以下方法将它们添加到文档中：
-
appendChild(node)：将一个节点添加为另一个节点的子节点，作为最后一个子节点。 -
insertBefore(newNode, referenceNode)：将一个节点添加为另一个节点的子节点，并将它插入到参考节点之前。 -
replaceChild(newNode, oldNode)：用一个新节点替换另一个节点。 -
removeChild(node)：从父节点中删除指定的子节点。
下面是一个示例，演示如何创建新节点并将其添加到文档中：
<!DOCTYPE html>
<html>
<head>
<title>DOM Node示例</title>
</head>
<body>
<div id="myDiv">
<p>这是一个段落。</p>
</div>
<script>
const myDiv = document.getElementById('myDiv');
// 创建一个新段落元素
const newParagraph = document.createElement('p');
newParagraph.textContent = '这是另一个段落。';
// 将新段落添加到myDiv中
myDiv.appendChild(newParagraph);
</script>
</body>
</html>在上述示例中，我们首先创建了一个新的<p>元素，设置了其文本内容，然后使用appendChild方法将新段落添加为<div>元素的子节点。
4. 替换节点
替换节点的常用方法是replaceChild，它允许我们将一个节点替换为另一个节点。以下是一个示例：
const oldParagraph = document.getElementById('oldParagraph');
const newParagraph = document.createElement('p');
newParagraph.textContent = '这是新的段落。';
// 将newParagraph替换oldParagraph
oldParagraph.parentNode.replaceChild(newParagraph, oldParagraph);在这个示例中，我们首先获取了要替换的节点oldParagraph和新节点newParagraph，然后使用replaceChild方法将新段落替换为旧段落。
5. 删除节点
要从文档中删除节点，可以使用removeChild方法，如下所示：
const parent = document.getElementById('parentElement');
const child = document.getElementById('childElement');
// 从父元素中删除子元素
parent.removeChild(child);在上述示例中，我们获取了父元素parent和要删除的子元素child，然后使用removeChild方法从父元素中删除了子元素。
遍历DOM树
遍历DOM树是获取和操作文档中节点的重要方式。可以使用递归或循环来遍历DOM树。下面是一个使用递归遍历DOM树的示例：
function traverseDOM(node) {
// 处理当前节点
console.log(node.nodeName);
// 递归遍历子节点
for (let i = 0; i < node.childNodes.length; i++) {
traverseDOM(node.childNodes[i]);
}
}
// 从文档根节点开始遍历
traverseDOM(document);在上述示例中，traverseDOM函数接受一个节点作为参数，首先处理当前节点，然后递归遍历其子节点。我们从文档的根节点document开始遍历整个DOM树。
示例：创建一个可折叠的列表
让我们通过一个示例来演示如何使用DOM Node对象来创建一个可折叠的列表。在这个示例中，我们将创建一个HTML列表，每个列表项都可以展开或折叠显示其子列表。
<!DOCTYPE html>
<html>
<head>
<title>可折叠列表示例</title>
</head>
<body>
<ul id="myList">
<li>
<span class="toggle">▼</span> Fruit
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>
<span class="toggle">▼</span> Vegetable
<ul>
<li>Carrot</li>
<li>Tomato</li>
<li>Broccoli</li>
</ul>
</li>
</ul>
<script>
const listItems = document.querySelectorAll('#myList li');
listItems.forEach((item) => {
// 为每个列表项添加点击事件监听器
item.addEventListener('click', () => {
const sublist = item.querySelector('ul');
if (sublist) {
sublist.classList.toggle('hidden'); // 切换子列表的显示/隐藏
const toggleIcon = item.querySelector('.toggle');
toggleIcon.textContent = sublist.classList.contains('hidden') ? '▼' : '▲'; // 切换展开/折叠图标
}
});
});
</script>
</body>
</html>在这个示例中，我们首先创建了一个HTML列表，每个列表项包含一个展开/折叠按钮和一个子列表。使用JavaScript，我们遍历所有列表项，为每个列表项添加点击事件监听器。当用户单击列表项时，我们查找其子列表并切换其hidden类，以控制子列表的显示或隐藏。同时，我们还切换了展开/折叠按钮的图标。
总结
JavaScript DOM Node对象是DOM操作的核心。通过了解和掌握Node对象的属性和方法，您可以更轻松地访问和操作HTML文档的内容。这个博客提供了一个全面的概述，从创建新节点到遍历DOM树，再到一个实际的示例，帮助您更好地理解和应用DOM Node对象。希望这些知识对您在前端开发中有所帮助！
这篇博客深入介绍了JavaScript DOM Node对象，包括不同类型的节点（元素节点、文本节点、属性节点、注释节点和文档节点）以及如何访问、创建、添加、删除和替换节点。通过示例展示了如何创建一个可折叠的列表，以实际操作演示了Node对象的应用。希望这篇博客对您理解和应用DOM Node对象有所帮助。
作者信息 作者 ： 繁依Fanyi
|
