JavaScript教程：深入理解DOM文档修改-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00945/article/details/148416594

JavaScript教程：深入理解DOM文档修改

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

前言

DOM（文档对象模型）是JavaScript与网页交互的核心接口。掌握DOM修改技术是创建动态网页的基础。本文将全面讲解如何使用JavaScript创建、插入、删除和克隆DOM节点，帮助你构建交互性更强的网页应用。

创建DOM节点

在JavaScript中，我们有两种主要方式创建DOM节点：

1. 创建元素节点

let div = document.createElement('div');

createElement方法可以创建任何HTML标签的元素节点，如div、p、span等。

2. 创建文本节点

let textNode = document.createTextNode('Hello World');

虽然可以直接通过元素节点的textContent或innerHTML属性设置文本内容，但在某些特定场景下，创建独立的文本节点仍然有用。

构建一个完整的元素

让我们通过一个实际例子来理解如何构建一个完整的DOM元素：

// 1. 创建div元素
let alertDiv = document.createElement('div');

// 2. 设置class属性
alertDiv.className = "alert";

// 3. 设置内容
alertDiv.innerHTML = "<strong>注意!</strong> 这是一条重要消息";

插入节点到文档

创建好的节点需要插入到文档中才能显示。现代JavaScript提供了多种插入方法：

主要插入方法

append() - 在元素末尾插入
```
document.body.append(div);
```
prepend() - 在元素开头插入
```
container.prepend(newElement);
```
before() - 在元素前插入
```
existingElement.before(newElement);
```
after() - 在元素后插入
```
existingElement.after(newElement);
```
replaceWith() - 替换元素
```
oldElement.replaceWith(newElement);
```

插入多个节点

这些方法都支持同时插入多个节点或文本：

div.append("Hello", document.createElement('br'), "World");

高级插入技术

insertAdjacentHTML

当需要插入HTML字符串时，insertAdjacentHTML非常有用：

element.insertAdjacentHTML('beforebegin', '<div>内容</div>');

支持四个插入位置：

'beforebegin' - 元素前
'afterbegin' - 元素内部开头
'beforeend' - 元素内部末尾
'afterend' - 元素后

节点操作

移除节点

element.remove();

克隆节点

let clone = element.cloneNode(true);  // 深度克隆，包括子节点
let shallowClone = element.cloneNode(false); // 只克隆元素本身

特殊容器：DocumentFragment

DocumentFragment是一个轻量级的文档容器，可以批量操作节点：

let fragment = new DocumentFragment();

for(let i = 0; i < 3; i++) {
  let li = document.createElement('li');
  li.textContent = `项目 ${i}`;
  fragment.append(li);
}

list.append(fragment);

使用DocumentFragment可以提高性能，因为它不会触发多次重排。