本文详细解析 JavaScript 中 DOM 节点的核心操作方法，涵盖 createElement、createTextNode 等创建手段，以及 appendChild、removeChild、replaceChild 和 insertBefore 的增删改流程。重点介绍 createDocumentFragment 文档碎片在批量操作中的性能优化原理，帮助开发者高效管理页面结构。
DOM 节点操作方法概述
文档对象模型（DOM）
核心方法包括 createElement()、createTextNode()、appendChild()、removeChild()、replaceChild()、insertBefore() 以及 createDocumentFragment()
节点的创建、删除与替换
// 创建新节点示例
function CreatNode() {
var oP = document.createElement("p");
oP.innerHTML = "<font style='color:red;'>Hello World！</font>";
document.body.appendChild(oP);
}
// 删除节点示例
function RemoveNode() {
var oP = document.getElementsByTagName("p");
var len = oP.length;
if (len != 0) {
oP[len - 1].parentNode.removeChild(oP[len - 1]); // 建议通过节点的 parentNode 属性来执行删除操作
}
} else {
alert("已经全部删除！");
}
}
// 替换节点示例
function ReplaceNode() {
var oNewP = document.createElement("p");
oNewP.innerHTML = "<font style='color:red;'>New --> Hello World！</font>";
// 将最后一个新增的节点替换为 oNewP
var len = document.getElementsByTagName("p").length;
var oOldLastP = document.getElementsByTagName("p")[len - 1];
oOldLastP.parentNode.replaceChild(oNewP, oOldLastP);
}
节点插入与文档碎片优化
// insertBefore() 方法说明
该方法用于将新节点插入到指定旧节点之前，需接收两个参数：
1. 要添加的目标节点；2. 插入位置前的参考节点
xxx.parentNode.insertBefore(newChild, oldChild);
// createDocumentFragment() 方法说明
用于创建文档碎片（Document Fragment）
可将多个新建的节点元素先添加到文档碎片中，随后将该碎片作为参数传递给目标容器的 appendChild() 方法
xxx.appendChild(oFragment);
这种方式使目标元素仅调用一次 appendChild，替代多次单独调用，从而显著提升性能。