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

逃离我推掉我的手 2024-02-21 09:37 61阅读 0赞

![在这里插入图片描述][ee6246a97e76456ea2a96231b3fde401.png]

在前端开发中，与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对象有所帮助。

<table> 
 <tbody> 
  <tr> 
   <td> <strong><font>作者信息</font></strong><br> <br> <font> 作者 ： 繁依Fanyi</font><br> <font>CSDN：</font> <a href="https://blog.csdn.net/qq_21484461?spm=1000.2115.3001.5343" rel="nofollow"><font>https://techfanyi.blog.csdn.net</font></a><br> <font>掘金：</font><a href="https://juejin.cn/user/4154386571867191" rel="nofollow"><font>https://juejin.cn/user/4154386571867191</font></a> </td> 
  </tr> 
 </tbody> 
</table>

[ee6246a97e76456ea2a96231b3fde401.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/c1c156f2e5864c65b448b2a1716815e1.png