JavaScript节点操作入门教程

本文深入解析了JavaScript中DOM节点创建与操作的核心实践，强调必须使用document.createElement()而非innerHTML字符串拼接来安全、高效地构建动态元素，避免意外清空子节点、触发重排和丢失事件监听器；明确区分textContent（防XSS、纯文本、样式无关）与innerHTML（解析HTML但有安全风险）的适用场景；推荐append/prepend/before/after等现代API实现批量、精准的节点插入，并警示删除与替换前务必检查parentNode存在性，同时指出实际开发中最易忽视却隐患巨大的两类问题：错用innerHTML导致的安全漏洞，以及未校验父节点就调用remove引发的静默失效——这些细节恰恰是写出健壮、可维护DOM操作代码的关键所在。

创建元素节点用 document.createElement()，不是字符串拼接

直接写 div.innerHTML = '

hello

' 看似快，但会清空原有子节点、触发重排、丢失事件监听器。真正动态建节点必须走 DOM API。

• document.createElement('div') 返回一个干净的 Element 实例，尚未挂载到文档中
• 支持传入带命名空间的标签名，如 document.createElementNS('http://www.w3.org/2000/svg', 'circle')
• 不能传入 HTML 字符串（比如 createElement('') 会报错）
• 创建后需配合 appendChild() 或 insertBefore() 才能显示

textContent 和 innerHTML 的边界必须分清

往节点里塞内容时，选错属性会导致 XSS 漏洞或格式丢失。

• 只设纯文本：用 node.textContent = '1 → 页面显示 1 < 2，安全且快
• 要解析 HTML：用 node.innerHTML = 'bold' → 渲染为加粗文字，但会执行内联 script（如有）
• innerText 受 CSS 影响（如 display: none 的文本不计入），textContent 不受样式影响，更可靠
• 对表单元素（input、textarea），应操作 value 属性而非 textContent

插入多个节点别循环调用 appendChild()

逐个 appendChild() 会多次触发重排，性能差。浏览器原生支持批量操作。

• 用 DocumentFragment 中转：const frag = document.createDocumentFragment(); items.forEach(item => frag.appendChild(item)); parent.appendChild(frag);
• 现代写法可用 parent.append(...nodes)，支持多个参数或展开数组，且不清空已有子节点
• parent.prepend() 插到开头，node.before() / node.after() 插在指定节点前后，比 insertBefore() 更直观
• 注意：append() 和 prepend() 接收的是节点或字符串；字符串会被自动转成 Text 节点，不会被解析为 HTML

删除与替换节点前先确认父节点存在

node.remove() 看似简单，但若节点已脱离 DOM 或未挂载，它不报错也不生效——容易误以为删除成功了。

• 安全删除写法：if (node.parentNode) node.parentNode.removeChild(node); 或封装成 node.remove?.()（需兼容性兜底）
• 替换节点用 parentNode.replaceChild(newNode, oldNode)，必须确保 oldNode 是 parentNode 的直接子节点
• 用 node.replaceWith(...nodes) 更灵活，支持多个新节点，也接受字符串（转为 Text）
• 所有移除操作都不会自动清理绑定的事件监听器，如果节点曾用 addEventListener() 绑过事件，需手动 removeEventListener() 或用事件委托规避

实际项目里最常出问题的不是“会不会创建”，而是“什么时候该用 textContent 却用了 innerHTML”，以及“删节点时没检查 parentNode 是否为空”。这些地方不报错，但行为和预期差很远。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~