element.children天生只包含元素节点，自动排除文本、注释等非元素节点；而childnodes包含所有节点类型，易导致编辑器操作出错。
Element.children 本身已是过滤结果，无需再“过滤”
很多人误以为 Element.children 是一个需要手动加工的原始集合，其实它**天生就只包含元素节点**（nodeType === 1），文本、注释、CDATA、空白换行等非元素型节点从不进入这个集合。HTML 编辑器里常见的“无效节点”——比如用户回车产生的空文本节点、粘贴带格式内容残留的注释、或富文本编辑器插入的占位 文本——全被自动排除在外。
为什么用 children 替代 childNodes 处理编辑器内容更安全
在 HTML 编辑器场景中，直接操作 element.childNodes 极易踩坑：
-
element.childNodes[0]可能是换行符组成的文本节点，调用.innerHTML会报undefined或静默失败 - 遍历
childNodes时遇到注释节点（nodeType === 8），.textContent返回空字符串，但.outerHTML会暴露原始注释，污染输出 - 编辑器常动态插入/删除节点，
children是实时 HTMLCollection，能准确反映当前可见子标签结构；而childNodes包含大量不可见节点，长度和索引不稳定
✅ 正确姿势：只要目标是操作“用户可见的子标签”，一律用 element.children —— 它不是“过滤工具”，而是“天然净化后的视图”。
children 在富文本编辑器中的典型误用与修复
常见错误写法：editorDiv.childNodes.forEach(...)，试图统一处理所有子内容。问题在于：
- 编辑器源码中
<div contenteditable="true"> <p>A</p>\n<p>B</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/ai/1400" title="Synthesys"><img src="https://img.php.cn/upload/ai_manual/001/431/639/68b6d1838268f847.png" alt="Synthesys" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/ai/1400" title="Synthesys" class="overflowclass">Synthesys</a> <p class="overflowclass">Synthesys是一款提供 AI 配音、数字人视频和图像生成的内容创作平台。</p> </div> <a rel="nofollow" href="/ai/1400" title="Synthesys" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div>的childNodes实际含 5 个节点（换行++换行+
+换行）
- 用
.textContent提取内容时，空白文本节点返回"\n"，导致拼接出多余换行 - 想给每个子块加 class，却对文本节点调用
.setAttribute报错
✅ 修复方式：改用 element.children，并注意它不支持 forEach（原生 HTMLCollection）：
Array.from(editorDiv.children).forEach(child => {
if (child.tagName === 'P') {
child.classList.add('editor-paragraph');
}
});
当真需要访问文本节点时，别硬套 children
如果编辑器功能涉及纯文本替换（如高亮关键词、替换选区文本），children 就不够用了——它根本看不到文本节点。这时必须切回 childNodes，并显式判断类型：
- 用
node.nodeType === Node.TEXT_NODE（即3）识别纯文本 - 跳过空白文本：用
node.textContent.trim() !== ''过滤掉仅含空格/换行的节点 - 避免直接修改
textContent破坏编辑器光标位置：优先用Range+DocumentFragment替换
真正容易被忽略的是：同一个编辑器容器，children 和 childNodes 应该按语义分工使用，而不是强行统一成一种遍历方式。混用或误判节点类型，比性能问题更容易引发不可见的 DOM 结构错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
