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

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

以下是 JavaScript 中 DOM 节点操作的常见方法，涵盖创建、添加、移除、移动、复制和查找节点的详细说明及示例：

一、创建节点

1. 创建元素节点

// 创建新的 <div> 元素
const newDiv = document.createElement('div');

2. 创建文本节点

// 创建文本内容
const newText = document.createTextNode('Hello World!');

3. 创建带属性的节点

const newImg = document.createElement('img');
newImg.src = 'image.jpg';
newImg.alt = '示例图片';

二、添加节点

1. 追加到父节点末尾

const parent = document.getElementById('parent');
parent.appendChild(newDiv); // 将 newDiv 添加到 parent 末尾

2. 插入到指定位置

const referenceNode = document.getElementById('child1');
parent.insertBefore(newDiv, referenceNode); // 在 referenceNode 前插入

3. 直接插入 HTML（现代方法）

parent.insertAdjacentHTML('beforeend', '<p>插入的内容</p>');
// 可选位置：'beforebegin', 'afterbegin', 'beforeend', 'afterend'

三、移除节点

1. 通过父节点移除子节点

parent.removeChild(childNode); // 传统方法

2. 直接移除自身（现代方法）

childNode.remove(); // 直接调用节点的 remove() 方法

四、移动节点

1. 移动现有节点到新位置

const newParent = document.getElementById('newParent');
newParent.appendChild(childNode); // 从原位置移除，添加到新位置

2. 示例：交换两个节点的位置

const node1 = document.getElementById('node1');
const node2 = document.getElementById('node2');
const parent = node1.parentNode;
parent.insertBefore(node2, node1); // 将 node2 移到 node1 前面

五、复制节点

1. 浅拷贝（不复制子节点）

const clonedNode = node.cloneNode(false); // 只复制节点本身

2. 深拷贝（复制节点及其子节点）

const clonedNode = node.cloneNode(true); // 复制节点及所有子节点

六、查找节点

1. 通过 ID 查找

const element = document.getElementById('myId');

2. 通过类名查找

const elements = document.getElementsByClassName('myClass'); // 返回动态集合

3. 通过标签名查找

const elements = document.getElementsByTagName('div'); // 返回动态集合

4. 通过 CSS 选择器查找

// 返回第一个匹配元素
const element = document.querySelector('.myClass');
// 返回所有匹配元素（静态集合）
const elements = document.querySelectorAll('div.highlight');

5. 层级关系查找

// 父节点
const parent = node.parentNode;

// 子节点集合（包含文本节点）
const children = node.childNodes;

// 仅元素子节点
const elementChildren = node.children;

// 前后兄弟节点
const nextSibling = node.nextElementSibling;
const prevSibling = node.previousElementSibling;

七、综合示例

<div id="container">
  <p class="text">原始段落</p>
</div>

// 创建新节点
const newParagraph = document.createElement('p');
newParagraph.textContent = '新段落';

// 添加到容器末尾
document.getElementById('container').appendChild(newParagraph);

// 移除原始段落
const oldParagraph = document.querySelector('.text');
oldParagraph.remove();

// 复制节点并插入到前面
const clonedParagraph = newParagraph.cloneNode(true);
document.getElementById('container').prepend(clonedParagraph);

八、最佳实践

1. 优先使用 querySelector 和 querySelectorAll：更灵活且支持复杂选择器。
2. 操作前检查节点是否存在：避免 null 错误。

   const node = document.getElementById('myId');
   if (node) {
     node.remove();
   }
   

3. 批量操作使用文档片段：减少重绘次数。

   const fragment = document.createDocumentFragment();
   for (let i = 0; i < 10; i++) {
     const div = document.createElement('div');
     fragment.appendChild(div);
   }
   document.body.appendChild(fragment);
   

通过掌握这些方法，你可以高效地操作 DOM 节点，实现动态的页面交互！

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github