JS进阶DAY4|节点操作

嘿👋 今天我们要一起深入探索JavaScript中的DOM操作，这是前端开发中不可或缺的技能。🌟 准备好了吗？让我们一起跳进DOM的海洋，看看怎么用代码操控网页的结构吧！

目录

1. 增加节点

1.1 使用 appendChild 方法

1.2 使用 insertBefore 方法

1.3 使用 insertAdjacentElement 方法

2. 删除节点

2.1 删除指定的节点

3. 克隆节点

3.1 克隆一个节点

3.2 将克隆的节点添加到DOM中

4. 删除克隆节点

4.1 删除克隆的节点

---

1. 增加节点

在DOM中增加节点就像是在一棵树上添加新的枝叶。我们有几种方法可以实现这一点。

1.1 使用 appendChild 方法

这是最基本的方法，用于将新节点添加到指定的父节点中。

// 创建一个新的元素节点let newNode = document.createElement('div');// 为新节点添加内容newNode.innerHTML = 'Hello, DOM!';// 获取要添加到的父节点let parent = document.getElementById('parentElement');// 将新节点添加到父节点中parent.appendChild(newNode);

1.2 使用 insertBefore 方法

如果你想要在一个已存在的节点前插入新节点，可以使用 insertBefore 方法。

// 创建一个新的元素节点let newNode = document.createElement('div');newNode.innerHTML = 'Before Existing Node';// 获取要插入的参考节点let referenceNode = document.getElementById('referenceElement');// 获取父节点let parent = referenceNode.parentNode;// 在参考节点前插入新节点parent.insertBefore(newNode, referenceNode);

1.3 使用 insertAdjacentElement 方法

这个方法允许你将元素插入到另一个元素的前后或子元素之前。

// 创建一个新的元素节点let newNode = document.createElement('div');newNode.innerHTML = 'Adjacent Element';// 获取要操作的元素let parent = document.getElementById('parentElement');// 在元素的末尾插入新节点parent.insertAdjacentElement('beforeend', newNode);

2. 删除节点

删除DOM中的节点就像是修剪枝叶，我们可以用 removeChild 方法来实现。

2.1 删除指定的节点

// 获取要删除的节点let nodeToDelete = document.getElementById('nodeToDelete');// 从DOM中移除节点if (nodeToDelete.parentNode) {nodeToDelete.parentNode.removeChild(nodeToDelete);}

3. 克隆节点

克隆DOM中的节点就像是复制一棵树的枝叶。我们可以用 cloneNode 方法来实现。

3.1 克隆一个节点

// 获取要克隆的节点let nodeToClone = document.getElementById('nodeToClone');// 克隆节点，deep参数为true表示克隆所有子节点let clonedNode = nodeToClone.cloneNode(true);// 为克隆的节点添加内容或修改属性clonedNode.innerHTML = 'This is a cloned node';

3.2 将克隆的节点添加到DOM中

// 获取要添加到的父节点let parent = document.getElementById('parentElement');// 将克隆的节点添加到父节点中parent.appendChild(clonedNode);

4. 删除克隆节点

删除克隆节点和删除普通节点的过程是一样的。

4.1 删除克隆的节点

// 获取要删除的克隆节点let clonedNodeToDelete = document.getElementById('clonedNodeToDelete');// 从DOM中移除克隆节点if (clonedNodeToDelete.parentNode) {clonedNodeToDelete.parentNode.removeChild(clonedNodeToDelete);}

---

好啦，我们今天的JavaScript DOM操作之旅就到这里啦！🚀 DOM操作是前端开发中非常基础且重要的技能，掌握它们可以让你在构建网页时更加得心应手。

如果你有任何疑问，或者想要更多地了解这个话题，随时欢迎留言哦！我们下次再见啦！👋