nodetype === node.text_node 是识别纯文本节点的唯一可靠依据，需结合 nodevalue?.trim() 过滤空白；编辑器中必须用 childnodes 而非 children 遍历，以获取用户输入的文本节点。
nodeType === Node.TEXT_NODE 是识别纯文本节点的唯一可靠依据
HTML 编辑器里，用户输入的换行、缩进、空格会自动生成大量 Node.TEXT_NODE（即 node.nodeType === 3），它们不是“看不见”，而是容易被误当作有效内容处理。比如用 innerHTML 替换时混入空白节点，或事件委托中 e.target 指向一个空文本节点而非预期的 button。直接比对 node.nodeType === Node.TEXT_NODE 是跨浏览器最稳的方式——它不依赖渲染状态、不随 HTML 字符串解析变化，IE9+ 和所有现代引擎都支持。
过滤空白文本节点必须结合 textContent.trim()
只判断 node.nodeType === Node.TEXT_NODE 不够：很多节点类型是 3，但 textContent 只有换行符或空格，这类节点在编辑器中属于“干扰源”，不该参与高亮、替换或事件响应。
- ❌ 错误写法：
node.nodeType === Node.TEXT_NODE→ 会把\n \t当作有效文本 - ✅ 正确写法：
node.nodeType === Node.TEXT_NODE && node.textContent?.trim() - 编辑器场景下，建议统一用
node.nodeValue替代textContent读取原始值（nodeValue对文本节点更底层、无格式化副作用） - 批量过滤示例：
Array.from(el.childNodes).filter(n => n.nodeType === Node.TEXT_NODE && n.nodeValue?.trim())
别用 children 替代 childNodes 处理文本编辑逻辑
el.children 返回的是 HTMLCollection，只含元素节点（nodeType === 1），天生丢弃所有文本、注释节点。这对“只操作子标签”的场景很友好，但在 HTML 编辑器中是危险的——你根本拿不到用户输入的纯文本段落，也就无法做拼写检查、关键词高亮或字符级样式注入。
- 编辑器必须用
el.childNodes或el.firstChild/el.nextSibling遍历链式结构 - 若需兼容旧环境（如某些 WebView），避免用
for...of遍历childNodes，改用传统for (let i = 0; i - 注意：
normalize()会合并相邻文本节点，但会破坏编辑器光标定位逻辑，慎用
替换文本节点内容时，永远只改 nodeValue，绝不碰 innerHTML
编辑器中要加粗某段文字、替换敏感词、或插入 emoji，常见错误是先取 el.innerText，再拼字符串塞回 el.innerHTML。这会清空所有子元素节点（a、span、img 全消失），超链接失效、样式丢失、事件监听器被销毁。
- ✅ 正确路径：遍历
childNodes→ 找到目标Node.TEXT_NODE→ 修改其nodeValue -
nodeValue是文本节点的原始数据载体，改它不影响 DOM 结构，也不触发 HTML 解析，XSS 风险可控 - 示例：
textNode.nodeValue = textNode.nodeValue.replace(/foo/g, 'bar') - 如果要插入带标签的新内容（如把“hello”变成
<strong>hello</strong>），不能直接设nodeValue，得用document.createTextNode()+replaceChild()组合
真正难的不是识别文本节点，而是判断哪些文本节点该被保留、哪些该被折叠、哪些该被拆分——尤其当用户在富文本中混合使用 br、div 和连续空格时，nodeValue 的边界和换行符表现会因浏览器而异。这时候，靠 nodeType 定类型、靠 nodeValue 做原子操作，是最少意外的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
