美橙互联网站建设网络推广员是干嘛的
在前端开发中，与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 CSDN： https://techfanyi.blog.csdn.net 掘金：https://juejin.cn/user/4154386571867191 |