JavaScript 操作 DOM 建立增加删除克隆访问节点示例宣贯
在 JavaScript 中，DOM（Document Object Model）是指文档对象模型，它是 HTML 和 XML 文档的编程接口。通过 DOM，我们可以动态地操作文档的结构、样式和内容。本文将介绍如何使用 JavaScript 操作 DOM 建立、增加、删除、克隆和访问节点。
1. 创建节点
使用 `createElement()` 方法可以创建一个新的元素节点。例如，`var node = document.createElement("div");` 创建了一个 `<div>` 元素节点。但是，需要注意的是，这个节点不会被自动添加到文档中。
2. 创建文本节点
使用 `createTextNode()` 方法可以创建一个文本节点。例如，`var value = document.createTextNode("text");` 创建了一个文本节点。这个文本节点可以被添加到元素节点中，但是它也不会被自动添加到文档中。
3. 插入节点到最后
使用 `appendChild()` 方法可以将节点插入到另一个节点的最后。例如，`node.appendChild(value);` 将文本节点插入到 `<div>` 元素节点的最后。
4. 插入节点到目标节点的前面
使用 `insertBefore()` 方法可以将节点插入到目标节点的前面。例如，`node.insertBefore(_span, _p);` 将 `<span>` 节点插入到 `<p>` 节点的前面。
5. 复制节点
使用 `cloneNode()` 方法可以复制一个节点。例如，`node.cloneNode(true);` 将复制整个节点和里面的内容；`node.cloneNode(false);` 将只复制节点，不包括里面的内容。
6. 删除节点
使用 `removeChild()` 方法可以删除一个节点。例如，`node.removeChild(_p);` 将删除 `<p>` 节点。
7. 替换节点
使用 `replaceChild()` 方法可以替换一个节点。例如，`node.replaceChild(_p, _span);` 将 `<span>` 节点替换成 `<p>` 节点。
8. 设置节点属性
使用 `setAttribute()` 方法可以设置节点的属性。例如，`node.setAttribute("title", "abc");` 将设置 `<div>` 节点的 `title` 属性为 "abc"。
JavaScript 操作 DOM 可以实现动态地创建、插入、删除、克隆和访问节点，从而实现了对文档的动态操作。
