DOM操作怎样添加、移除、移动、复制、创建和查找节点

最新推荐文章于 2024-04-17 08:48:05 发布

zz_ll9023one

最新推荐文章于 2024-04-17 08:48:05 发布

阅读量760

点赞数 12

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42095178/article/details/135400135

版权

本文详细介绍了JavaScript中DOM操作的关键方法，如appendChild()用于添加节点，removeChild()用于移除节点，cloneNode()用于复制节点，createElement()用于创建新元素，以及querySelector()和querySelectorAll()用于节点查找。

摘要由CSDN通过智能技术生成

DOM（Document Object Model）操作是JavaScript中用于操作HTML或XML文档的一种方式。下面是一些基本的DOM操作：

添加节点
使用appendChild()方法可以将一个节点添加到现有节点的子节点列表的末尾。
let newNode = document.createElement(“p”); // 创建一个新的

元素
newNode.textContent = “这是一个新节点”; // 为新节点添加文本内容document.body.appendChild(newNode); // 将新节点添加到body的末尾
移除节点

使用removeChild()方法可以从父节点的子节点列表中移除一个节点。
let oldNode = document.querySelector("#old-node"); // 选择一个要移除的节点let parent = oldNode.parentNode; // 获取该节点的父节点
parent.removeChild(oldNode); // 从父节点的子节点列表中移除该节点
移动节点

使用removeChild()和appendChild()方法可以将一个节点从一个位置移动到另一个位置。
let nodeToMove = document.querySelector("#node-to-move"); // 选择要移动的节点let newParent = document.querySelector("#new-parent"); // 选择新的父节点
newParent.appendChild(nodeToMove); // 将节点移动到新的父节点的子节点列表的末尾
复制节点

使用cloneNode()方法可以复制一个节点。
let nodeToCopy = document.querySelector("#node-to-copy"); // 选择要复制的节点let newNode = nodeToCopy.cloneNode(true); // 复制该节点，并包括其子节点和属性document.body.appendChild(newNode); // 将复制的节点添加到body的末尾
创建节点

使用createElement()方法可以创建一个新的元素节点。在DOM操作中，创建节点通常使用document.createElement()方法。以下是一个简单的例子，演示如何使用JavaScript在DOM中创建一个新的

元素：

<meta charset="UTF-8">
<title>DOM 操作示例</title></head><body>
<div id="container"></div>
<script>
    // 创建新的 <p> 元素
    let newParagraph = document.createElement("p");
    // 为新元素添加文本内容
    newParagraph.textContent = "这是一个新段落。";
    // 将新元素添加到指定的容器中
document.getElementById("container").appendChild(newParagraph);
</script></body></html>

在这个例子中，我们首先使用document.createElement()方法创建一个新的

元素。然后，我们使用textContent属性为该元素添加文本内容。最后，我们使用appendChild()方法将新创建的元素添加到ID为"container"的

元素中。

查找节点
使用querySelector()或querySelectorAll()方法可以查找文档中的元素。

let element = document.querySelector("#element-id"); // 选择具有指定ID的元素let elements = document.querySelectorAll(“p”); // 选择所有

元素

zz_ll9023one

关注

12
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM操作怎样添加、移除、移动、复制、创建和查找节点

/ 选择要复制的节点let newNode = nodeToCopy.cloneNode(true);// 复制该节点，并包括其子节点和属性document.body.appendChild(newNode);// 选择要移动的节点let newParent = document.querySelector("#new-parent");// 获取该节点的父节点。// 将节点移动到新的父节点的子节点列表的末尾。使用appendChild()方法可以将一个节点添加到现有节点的子节点列表的末尾。
复制链接

扫一扫