JavaScript篇：DOM 操作

JavaScript DOM 操作的核心在于理解节点（Node）及其相关接口，通过操作节点实现对文档结构的动态修改。 以下是关键内容的系统梳理：

1. 节点类型DOM 由七种节点构成，常见类型包括：

   Document（顶层节点，nodeType === 9）

   Element（HTML 标签，nodeType === 1）

   Text（文本内容，nodeType === 3）

   DocumentFragment（轻量级文档片段，nodeType === 11）

2. 核心接口

   Node：所有节点的基类，提供通用属性和方法（如 nodeType、childNodes、appendChild()）。

   NodeList：动态集合（如 childNodes、querySelectorAll 返回），可通过索引或 item() 访问。

   HTMLCollection：仅包含元素节点的静态集合（如 getElementsByTagName 返回）。

1. 常用属性

   导航类：parentNode、childNodes、firstChild、nextSibling

   信息类：nodeType、nodeName、textContent（获取节点及其后代的文本）

   状态类：isConnected（检查节点是否在文档中）

2. 核心方法

   增删改：

   appendChild(node)：添加子节点到末尾。

   insertBefore(newNode, referenceNode)：在指定位置插入节点。

   removeChild(node)：移除子节点。

   replaceChild(newNode, oldNode)：替换子节点。

   克隆与规范化：

   cloneNode(deep)：deep 为 true 时递归克隆子节点。

   normalize()：合并相邻文本节点并移除空文本节点。

1. NodeList 的特性

   动态性：childNodes 会随 DOM 变化自动更新；querySelectorAll 返回的是静态集合。

   遍历方式：

   // 转为数组后使用 forEachconst children = document.body.childNodes;const nodeArray = Array.from(children);nodeArray.forEach(node => console.log(node));// 或直接使用 for 循环for (let i = 0; i < children.length; i++) { console.log(children[i]);}

2. HTMLCollection 的限制仅包含元素节点，不支持数组方法，需先转换为数组：

   const elements = document.getElementsByTagName('div');const elementArray = [...elements]; // 使用扩展运算符转换

1. 动态创建与插入节点

   const fragment = document.createDocumentFragment();const newElement = document.createElement('div');newElement.textContent = 'Hello DOM';fragment.appendChild(newElement);document.body.appendChild(fragment); // 一次性插入，减少重绘

2. 节点遍历与修改

   // 移除所有空文本节点const walker = document.createTreeWalker( document.body, NodeFilter.SHOW_TEXT, { acceptNode: node => node.nodeValue.trim() === '' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP });let node;while ((node = walker.nextNode())) { node.remove();}

3. 性能优化技巧

   使用 DocumentFragment 批量操作节点。

   避免频繁操作 DOM，尽量在内存中完成修改后一次性插入。

1. ParentNode 与 ChildNode

   ParentNode：提供 append()、prepend() 等方法（支持多参数和字符串）。

   ChildNode：提供 remove()、before()、after() 等便捷方法。

2. Mutation Observer监听 DOM 变化（如子节点增减、属性修改），替代已废弃的 Mutation Events：

   const observer = new MutationObserver(mutations => { mutations.forEach(mutation => console.log('DOM changed:', mutation.type));});observer.observe(document.body, { childList: true, attributes: true });

• 节点操作是 DOM 操作的基础，需熟练掌握 Node 接口的属性和方法。
• 集合选择：根据需求选择 NodeList（动态）或 HTMLCollection（静态）。
• 性能关键：减少直接操作真实 DOM，优先使用 DocumentFragment 和内存处理。
• 现代 API：利用 ParentNode/ChildNode 的便捷方法和 MutationObserver 实现高效监听。

通过理解这些核心概念，可以高效完成动态内容更新、结构调整等常见 DOM 操作任务。