JS删除DOM节点的几种方式

本文深入探讨了JavaScript中删除DOM节点的几种核心方法，包括`remove()`、`removeChild()`以及`innerHTML = ''`。其中，`remove()`以其简洁的语法和无需指定父节点的特性，成为现代Web开发的首选。`removeChild()`则因其良好的兼容性，在需要兼容旧浏览器或需返回被移除节点时仍具价值。虽然`innerHTML = ''`能快速清空容器，但需警惕潜在的内存泄漏和性能问题。文章还强调了移除节点后的内存管理，建议将JavaScript引用设为`null`，并妥善处理事件监听器和第三方组件。针对批量移除大量DOM节点的情况，文章提出了利用DocumentFragment或将父元素临时移出文档流等性能优化策略，并建议在现代开发中结合虚拟DOM库，以更高效地管理复杂DOM更新，提升用户体验。

移除DOM节点主要有三种方式：使用 remove() 方法、removeChild() 方法和 innerHTML = ''；2. 推荐优先使用 remove()，因其语法简洁且无需获取父节点；3. removeChild() 兼容性更好，适用于需要兼容旧浏览器或需返回被移除节点的场景；4. innerHTML = '' 适合快速清空容器，但可能引发内存泄漏和性能问题；5. 移除节点后应将JavaScript引用设为 null 以避免内存泄漏；6. 对于绑定事件或第三方组件，需手动销毁监听器或调用 cleanup 方法；7. 批量移除大量DOM节点时，为避免频繁回流和重绘，可采用将父元素临时移出文档流或使用 DocumentFragment 的方式优化性能；8. 在现代开发中，结合虚拟DOM库能更高效地管理复杂DOM更新。

JavaScript里移除DOM节点，其实有几种方式，最直接、最常用的就是通过父节点调用 removeChild 方法，或者更现代一些，直接在节点上调用 remove() 方法。

解决方案

说起DOM节点的移除，我个人最常用的还是 remove()。这玩意儿用起来是真的方便，直接 element.remove() 就完事了，不用先找到它的爹。想想看，以前用 removeChild 的时候，你得先 parentElement.removeChild(childElement)，多绕一步。虽然 removeChild 兼容性更好，毕竟是老API了，但在现代浏览器环境下，remove() 几乎是首选，代码写起来也更简洁直观。

举个例子，假设你有一个按钮，点击后要把某个ID为 myDiv 的元素干掉：

// HTML: 
我是一个要被移除的Div
 移除

const removeBtn = document.getElementById('removeBtn');
const myDiv = document.getElementById('myDiv');

removeBtn.addEventListener('click', () => {
    // 方式一：使用 remove()，更推荐
    if (myDiv) { // 检查元素是否存在是好习惯
        myDiv.remove();
        console.log('myDiv 已通过 remove() 移除。');
    }

    // 方式二：使用 removeChild()，需要知道父节点
    // 如果你知道myDiv的父节点是body，你可以这样写：
    // if (myDiv && myDiv.parentNode) {
    //     myDiv.parentNode.removeChild(myDiv);
    //     console.log('myDiv 已通过 removeChild() 移除。');
    // }
});

除了这两种，有时候你可能想清空一个容器里的所有子元素，这时候 innerHTML = '' 倒是个偷懒的办法。比如 container.innerHTML = '';。但这个方法有点粗暴，它会把容器里所有DOM元素重新解析一遍，如果子元素绑定了事件监听器，这些监听器可能就不会被自动清理，容易造成内存泄漏。所以，除非你确定容器里的内容不需要精细控制，或者性能不是瓶颈，不然还是少用为妙。

移除DOM节点后，还需要注意哪些细节？

移除DOM节点，不光是把它从视觉上“拿掉”那么简单，背后还有些事情值得我们留意。最典型的就是内存泄漏问题。你把一个DOM元素从文档流里移除了，它在页面上看不见了，但如果你的JavaScript代码里还保留着对它的引用（比如一个变量指向它，或者某个事件监听器还挂在它上面），那么这个元素及其子元素占用的内存就不会被垃圾回收机制释放掉。时间一长，尤其是在单页应用里频繁操作DOM，这就可能导致内存占用越来越高，最终影响应用性能。

所以，一个好的习惯是，在移除DOM节点后，如果你的代码中还存在对该节点的引用，最好将其设置为 null，明确告诉垃圾回收器，这个对象你已经不再需要了。

let someElement = document.getElementById('targetElement');
if (someElement) {
    someElement.remove();
    someElement = null; // 显式解除引用
    console.log('元素已移除并解除引用。');
}

此外，如果被移除的元素上有复杂的事件监听器，或者它是一个第三方库组件，确保这些监听器和组件实例也能被正确销毁或解除绑定，是避免内存泄漏的关键。有些库提供了 destroy() 或 cleanup() 方法，务必调用。

在不同场景下，如何选择合适的DOM移除方法？

选择哪种移除方法，其实主要看你的具体需求和目标环境。

如果你在写现代Web应用，目标浏览器支持ES6及以上，那么 element.remove() 几乎是万能的。它简洁、直观，不需要你先找到父节点，直接操作目标元素就行。这在处理事件委托、或者元素本身就是动态生成且父级不确定时，显得尤为方便。

而 parentNode.removeChild(childElement) 呢，它虽然“老派”一点，但兼容性是最好的，几乎所有浏览器都支持。如果你在开发一个需要兼容IE8甚至更老环境的项目，或者你确实需要获取被移除的那个子元素的引用（因为 removeChild 会返回被移除的子元素），那么 removeChild 就有了用武之地。例如，你可能想把一个元素从一个地方移到另一个地方，先移除，再插入，这种场景下 removeChild 就很自然。

至于 innerHTML = '' 这种方式，我前面也提了，它最大的优势是能快速清空一个容器的所有子元素。但代价就是它会重新解析HTML字符串，效率可能不如逐个移除DOM节点，并且有内存泄漏的风险。所以，它适合那些内容不复杂、不需要保留事件监听器、且对性能要求不那么极致的场景，比如一个简单的列表清空。在处理大量动态内容时，我个人更倾向于使用更精细的DOM操作，或者结合虚拟DOM库来管理。

处理大量DOM节点移除时，有哪些性能优化策略？

当需要移除大量DOM节点时，直接循环 remove() 或者 removeChild() 可能会导致频繁的DOM操作，每次操作都可能触发浏览器回流（reflow）和重绘（repaint），从而造成性能瓶颈，页面卡顿。这时候，就需要一些策略来优化。

一个非常有效的策略是使用 DocumentFragment。DocumentFragment 是一个轻量级的文档片段，它不是DOM树的一部分，因此对其进行操作不会引起页面回流或重绘。你可以把需要移除的节点先批量地从DOM中“取”出来，或者把需要操作的节点先放到 DocumentFragment 里进行操作，等所有操作完成后，再将 DocumentFragment 整体插入或移除。

假设你要清空一个有几百个子元素的容器：

const container = document.getElementById('largeContainer');

// 性能较差的直接循环移除
// while (container.firstChild) {
//     container.removeChild(container.firstChild);
// }

// 优化策略：将父元素从文档流中暂时移除，操作完成后再放回去
// 这种方法不适用于清空，更适用于批量修改子元素
// const parent = container.parentNode;
// const nextSibling = container.nextSibling;
// parent.removeChild(container);
// // 在这里对 container 进行大量子元素的移除操作
// while (container.firstChild) {
//     container.removeChild(container.firstChild);
// }
// parent.insertBefore(container, nextSibling);


// 优化策略：使用 DocumentFragment (适用于批量添加，但也可以间接用于优化移除)
// 更直接的批量移除优化，其实是利用父元素脱离文档流的特性
// 比如，你可以先将父元素隐藏 (display: none)，进行移除操作，再显示
// 或者，如果只是清空，最快的还是 innerHTML = ''，但要注意前面说的副作用

// 对于批量移除，更常见的优化思路是：
// 1. 如果是清空所有子元素，且不关心事件监听器，innerHTML = '' 是最快的。
// 2. 如果需要保留事件监听器或者进行更复杂的处理，可以考虑将父元素暂时从DOM中移除，
//    进行批量操作（包括移除），然后重新插入。这样只会触发两次回流。
//    例如：
const parentNode = container.parentNode;
if (parentNode) {
    const tempFragment = document.createDocumentFragment();
    while (container.firstChild) {
        tempFragment.appendChild(container.firstChild); // 将所有子元素移到片段中
    }
    // 此时 container 已经空了，且只触发了一次回流（将所有子元素从 container 移走）
    // 如果目的是彻底移除，那么 tempFragment 就可以被丢弃了，里面的元素会被垃圾回收。
    // 如果是想操作完再放回去，那就在 tempFragment 里操作，最后再 append 到 container。
    console.log('大量DOM节点已通过片段优化移除。');
}

另一种思路是，如果你只是要更新部分内容，而不是完全移除再重建，可以考虑使用更细粒度的DOM操作，或者借助一些前端框架（如React、Vue）的虚拟DOM机制，它们会帮你处理这些复杂的优化，只更新真正改变的部分。但在原生JS层面，批量操作前脱离文档流，或者使用 DocumentFragment，都是减少回流次数的有效手段。

到这里，我们也就讲完了《JS删除DOM节点的几种方式》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！