DOM 改变节点

最新推荐文章于 2024-10-27 19:55:47 发布

lsx202406

最新推荐文章于 2024-10-27 19:55:47 发布

阅读量438

点赞数 3

文章标签：开发语言

本文链接：https://blog.csdn.net/lsx202406/article/details/142677504

版权

DOM 改变节点

文档对象模型（DOM）是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化表示，并定义了一种方式，使得可以从程序中对该结构进行访问，从而改变文档的结构、样式和内容。在本文中，我们将探讨如何使用 JavaScript 来改变 DOM 中的节点。

DOM 节点介绍

在 DOM 中，文档的每一个部分都是一个节点。这些节点构成了一个树状结构，通常称为 DOM 树。主要的节点类型包括：

元素节点：表示 HTML 或 XML 文档中的元素。
文本节点：包含文本内容。
属性节点：包含元素的属性。
注释节点：表示注释。

改变节点的方法

创建新节点

要创建新节点，可以使用 document.createElement() 方法来创建元素节点，使用 document.createTextNode() 来创建文本节点。

const newElement = document.createElement('div');
const newText = document.createTextNode('Hello, World!');

插入节点

插入节点可以使用以下方法：

appendChild()：将一个节点添加到指定父节点的子节点列表的末尾。
insertBefore()：在指定的已存在子节点前插入新的子节点。

const parentElement = document.getElementById('parent');
parentElement.appendChild(newElement);
parentElement.insertBefore(newElement, existingChild);

删除节点

要删除节点，可以使用 removeChild() 方法，它需要指定要删除的子节点。

const childElement = document.getElementById('child');
parentElement.removeChild(childElement);

替换节点

replaceChild() 方法可以用于替换节点。

const newChild = document.createElement('span');
parentElement.replaceChild(newChild, oldChild);

克隆节点

cloneNode() 方法可以用于克隆一个节点。如果传入参数 true，则会进行深复制，包括所有子节点。

const clonedElement = element.cloneNode(true);

修改节点属性和样式

可以使用 setAttribute() 和 getAttribute() 方法来修改和获取元素的属性。样式可以通过元素的 style 属性来修改。

element.setAttribute('class', 'new-class');
element.style.backgroundColor = 'blue';

示例：动态创建和插入元素

以下是一个简单的示例，展示了如何动态地在网页中创建和插入一个新元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM Change Node Example</title>
</head>
<body>
    <div id="container"></div>

    <script>
        // 创建新的元素和文本节点
        const newElement = document.createElement('p');
        const newText = document.createTextNode('This is a new paragraph.');

        // 将文本节点添加到新元素中
        newElement.appendChild(newText);

        // 获取容器元素并插入新元素
        const container = document.getElementById('container');
        container.appendChild(newElement);
    </script>
</body>
</html>

在这个示例中，我们首先创建了一个新的段落元素 <p> 和一个文本节点，然后将文本节点添加到段落元素中。最后，我们获取页面上的一个容器元素，并将新创建的段落元素插入到容器中。