JavaScript中DOM核心操作的实战指南

// 创建元素
const div = document.createElement('div');
div.textContent = 'Hello';
div.className = 'box active';
div.dataset.id = '123';

// 创建文本节点（最常用）
const text = document.createTextNode('纯文本内容');

// 克隆节点（深度克隆最常用）
const clone = original.cloneNode(true);   // true = 深克隆（包含子节点）
const shallow = original.cloneNode(false); // 只克隆自身

// 方式1：最常用、最直观（2020年后主流）
parent.append(child);           // 末尾添加（可多个）
parent.prepend(child);          // 开头添加
parent.before(child);           // 兄弟前插入
parent.after(child);            // 兄弟后插入

// 方式2：经典但已被取代
parent.appendChild(child);      // 只支持一个节点
parent.insertBefore(newNode, referenceNode);

// 方式3：批量插入（性能最好）
const fragment = document.createDocumentFragment();
fragment.append(div1, div2, div3);   // 不会引起多次重排
parent.appendChild(fragment);        // 一次性插入

// 删除自身（最常用）
element.remove();                    // 现代首选

// 旧方式（仍兼容）
parent.removeChild(element);

// 清空所有子节点（三种方式对比）
element.innerHTML = '';              // 最快，但有 XSS 风险
while (element.firstChild) {
  element.removeChild(element.firstChild);
}
element.replaceChildren();           // 现代最推荐（2020+），干净、高效

// 推荐写法（2020+）
button.addEventListener('click', (e) => {
  // e.currentTarget vs e.target
  // e.preventDefault()
  // e.stopPropagation()
}, { once: true, passive: true });   // 优化选项

// 事件委托（性能最佳）
document.addEventListener('click', (e) => {
  if (e.target.matches('.delete-btn')) {
    // 处理删除
  }
});

// 移除事件（必须是同一个函数引用）
const handler = () => console.log('clicked');
btn.addEventListener('click', handler);
btn.removeEventListener('click', handler);