【Java 进阶篇】深入理解 JavaScript DOM Node 对象

在这里插入图片描述

在前端开发中，与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