DOM节点操作有哪些方法？

DOM节点操作主要包括创建、插入、删除、替换和查找节点，核心方法及优化策略如下：

1. 创建与插入节点

核心方法：
document.createElement(tagName)：创建指定标签的DOM节点。
优化策略：
使用DocumentFragment：将多个节点先添加到文档片段中，再一次性插入DOM，减少重绘与重排。let fragment = document.createDocumentFragment();for (let i = 0; i < 100; i++) { let li = document.createElement('li'); li.textContent = 'Item ' + i; fragment.appendChild(li);}document.getElementById('myList').appendChild(fragment);
模板字符串或引擎：复杂结构可用模板字符串拼接HTML，或通过模板引擎管理。

2. 删除与替换节点

核心方法：
parentNode.removeChild(childNode)：删除指定子节点。
parentNode.replaceChild(newNode, oldNode)：替换子节点。
注意事项：
存在性检查：操作前需确认节点存在，避免错误。
内存泄漏：删除节点后释放引用（如移除事件监听器）。
兼容性：替换节点时确保新节点类型与旧节点兼容。
性能优化：批量删除/替换时使用DocumentFragment减少重排。

3. 查找节点

核心方法：
document.getElementById(id)：通过ID查找，效率最高（返回单个节点）。
document.getElementsByClassName(className)：通过类名查找（返回动态HTMLCollection）。
document.getElementsByTagName(tagName)：通过标签名查找（返回动态HTMLCollection）。
document.querySelector(selector)：通过CSS选择器查找（返回第一个匹配节点）。
document.querySelectorAll(selector)：通过CSS选择器查找（返回静态NodeList）。
优化建议：
优先使用getElementById：ID唯一且查找速度快。
动态集合处理：遍历HTMLCollection或NodeList前转换为数组（Array.from()或[...elements]），避免因DOM变化导致意外错误。
减少复杂查询：querySelector/querySelectorAll效率较低，仅在必要时使用。

4. 性能优化策略

减少DOM操作次数：
批量操作：使用DocumentFragment或虚拟DOM库（如React）。
避免循环内操作：将节点操作移至循环外。
事件委托：
将事件监听器绑定到父元素，通过event.target判断子元素事件，减少监听器数量。
document.getElementById('myList').addEventListener('click', (event) => { if (event.target.tagName === 'LI') { console.log('Clicked:', event.target.textContent); }});
CSS优化：
使用CSS修改样式（如display: none隐藏元素），而非DOM属性操作。
避免频繁读取布局属性（如offsetWidth），强制触发重排。

5. 重绘与重排的理解

重绘（Repaint）：
触发条件：元素样式变化（如颜色、背景色），不影响布局。
优化：合并样式修改，使用class替代内联样式。
重排（Reflow）：
触发条件：元素尺寸、位置或结构变化（如宽度、边距、DOM增删）。
优化：
避免频繁修改布局属性（如width、top）。
使用transform和opacity实现动画（触发GPU加速，避免重排）。
隐藏元素时用display: none（触发重排一次）而非visibility: hidden（持续重绘）。

总结

DOM节点操作需兼顾功能与性能，核心原则包括：

热门标签