Node.TEXT_NODE 是识别文本节点的唯一可靠依据，必须用 node.nodeType === Node.TEXT_NODE 判断；遍历需用 childNodes 而非 children；提取内容优先用 nodeValue；替换文本应直接修改 nodeValue，避免 innerHTML。
Node.TEXT_NODE 是识别文本节点的唯一可靠依据，不依赖渲染、不随 HTML 字符串解析变化，IE9+ 和所有现代引擎都支持。
用 nodeType === Node.TEXT_NODE 判断类型，别信 textContent 或 innerText
很多开发者误以为 textContent 为空就不是文本节点，或反过来——看到有内容就认为是文本节点。错：一个 <div>\n <span>hi</span>\n</div> 中，\n 就是 nodeType === 3 的文本节点，但 textContent 是空格加换行；而 <img> 元素的 textContent 也可能是空字符串，但它根本不是文本节点（nodeType === 1）。
必须直接比对 node.nodeType === Node.TEXT_NODE，这是 DOM 规范定义的硬性标识。
- ✅ 正确：
if (node.nodeType === Node.TEXT_NODE) - ❌ 错误：
if (node.textContent?.trim())（漏判空白文本节点）、if (node.nodeName === '#text')（非标准写法，部分旧环境不兼容）
遍历必须用 childNodes，children 会直接丢掉所有文本节点
编辑器、高亮、拼写检查等场景下，用户输入的换行、缩进、空格都会生成 Node.TEXT_NODE。这些节点在 DOM 树中真实存在，但 el.children 只返回 nodeType === 1 的元素节点，天然过滤掉所有文本和注释节点。
立即学习“前端免费学习笔记（深入）”；
例如：<p>Hello<br>World</p> 的 p 元素，其 childNodes 包含：文本节点 "Hello"、<br> 元素、文本节点 "World"；而 children 只有 <br> 一个。
- ✅ 必须用：
Array.from(el.childNodes)或for (let i = 0; i < el.childNodes.length; i++) - ⚠️ 注意：
childNodes是实时集合，避免在循环中修改 DOM；如需兼容旧 WebView，别用for...of
提取内容优先用 nodeValue，不是 textContent
nodeValue 是文本节点的原生属性，返回原始字符串（含换行、制表符），无格式化副作用；textContent 会合并相邻文本节点、忽略不可见字符规则，还可能触发样式计算或 layout 触发，在编辑器中易导致光标偏移或性能抖动。
比如用户输入两段文字中间敲了两次回车："line1\n\nline2"，nodeValue 精确保留两个 \n；textContent 在某些浏览器中可能压缩为单个 \n 或添加额外空格。
- ✅ 推荐：
node.nodeType === Node.TEXT_NODE && node.nodeValue?.trim() - ❌ 避免：
node.textContent?.replace(/\s+/g, ' ').trim()（破坏原始结构）
替换文本内容时只改 nodeValue，绝不用 innerHTML
常见错误是把整个容器的 innerHTML 取出来，正则替换后再塞回去。这会销毁所有子元素节点（<a>、<span>、事件监听器全丢），链接失效、样式丢失、光标重置。
正确路径是：遍历 childNodes → 找到目标 Node.TEXT_NODE → 直接赋值 node.nodeValue = newValue。这样只改文本内容，其余结构毫发无损。
- ✅ 安全：
textNode.nodeValue = textNode.nodeValue.replace(/foo/g, 'bar') - ❌ 危险：
el.innerHTML = el.innerHTML.replace(/foo/g, 'bar') - ⚠️ 注意：若需插入 HTML 片段（如
<mark>），不能直接改nodeValue，应拆分节点 +insertBefore+appendChild
文本节点看似简单，但编辑器中真正难的是保持“原始结构”和“用户意图”的一致性——nodeValue 是唯一能绕过浏览器渲染干预、直触原始输入的入口，其他任何间接路径都会在某个边界 case 里翻车。
