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

八股文_JavaScript面试题 0 68

参考回答

在 JavaScript 中，DOM（Document Object Model）提供了一些方法来操作网页中的元素。以下是常见的 DOM 操作，包括添加、移除、移动、复制、创建和查找节点。

详细讲解与拓展

1. 添加节点

appendChild()：将一个节点追加到父节点的子节点列表的末尾。

const newDiv = document.createElement('div');  // 创建新节点
const parentDiv = document.getElementById('parent');  // 获取父节点
parentDiv.appendChild(newDiv);  // 将 newDiv 添加到 parentDiv 的子节点列表末尾

insertBefore()：在指定子节点之前插入一个新的节点。

const newDiv = document.createElement('div');
const parentDiv = document.getElementById('parent');
const referenceNode = document.getElementById('reference'); // 插入的参考节点
parentDiv.insertBefore(newDiv, referenceNode);  // 在 referenceNode 前插入 newDiv

2. 移除节点

removeChild()：从父节点中移除指定的子节点。

const parentDiv = document.getElementById('parent');
const childDiv = document.getElementById('child');
parentDiv.removeChild(childDiv);  // 移除 childDiv

remove()：直接从 DOM 中移除当前元素节点。remove() 可以直接在目标元素上调用。
```
const childDiv = document.getElementById('child');
childDiv.remove();  // 移除 childDiv 元素
```

3. 移动节点

appendChild()：即使目标节点已存在，它也会将该节点从其原来的父节点中移除，然后再追加到新的父节点。

const parentDiv1 = document.getElementById('parent1');
const parentDiv2 = document.getElementById('parent2');
const childDiv = document.getElementById('child');
parentDiv2.appendChild(childDiv);  // 将 childDiv 从 parentDiv1 移动到 parentDiv2

4. 复制节点

cloneNode()：创建一个指定节点的副本，是否复制子节点取决于参数。

如果传入 true，则会深度复制，包括子节点。
如果传入 false，则只复制当前节点本身。

const originalDiv = document.getElementById('original');
const clonedDiv = originalDiv.cloneNode(true);  // 深度复制 originalDiv（包括其子节点）
const parentDiv = document.getElementById('parent');
parentDiv.appendChild(clonedDiv);  // 将 clonedDiv 添加到 parentDiv 中

5. 创建节点

createElement()：创建一个新的元素节点。

const newDiv = document.createElement('div');  // 创建一个 div 元素
newDiv.textContent = 'Hello, World!';  // 设置新节点的文本内容
const parentDiv = document.getElementById('parent');
parentDiv.appendChild(newDiv);  // 将新节点添加到父节点中

createTextNode()：创建一个新的文本节点。

const textNode = document.createTextNode('Hello, World!');  // 创建文本节点
const parentDiv = document.getElementById('parent');
parentDiv.appendChild(textNode);  // 将文本节点添加到父节点中

6. 查找节点

getElementById()：通过 ID 查找元素。

const element = document.getElementById('myElement');  // 获取 ID 为 myElement 的元素

getElementsByClassName()：通过类名查找元素，返回一个类数组对象。

const elements = document.getElementsByClassName('myClass');  // 获取所有类名为 myClass 的元素

getElementsByTagName()：通过标签名查找元素，返回一个类数组对象。

const elements = document.getElementsByTagName('div');  // 获取所有 div 标签的元素

querySelector()：返回与 CSS 选择器匹配的第一个元素。

const element = document.querySelector('.myClass');  // 获取第一个类名为 myClass 的元素

querySelectorAll()：返回与 CSS 选择器匹配的所有元素，返回一个 NodeList。

const elements = document.querySelectorAll('div.myClass');  // 获取所有类名为 myClass 的 div 元素

总结

DOM 操作是 Web 开发中常见的任务，理解并掌握如何通过 JavaScript 操作 DOM 节点是实现动态网页的重要步骤。通过这些方法，开发者可以轻松地添加、移除、移动、复制、创建和查找节点，从而实现复杂的交互和动态效果。