nodelist 是只读类数组，不能直接遍历子节点；应使用 parentnode.childnodes 或 children 等 api。空白文本节点（nodetype === 3 且 textcontent.trim() === ''）会干扰逻辑，需过滤。推荐用 n.nodetype === 1 || (n.nodetype === 3 && n.textcontent?.trim()) 或直接用 parent.children。
NodeList 本身不能直接遍历子节点，它只是节点集合的只读类数组；真正要遍历子节点，应操作 parentNode.childNodes（返回 NodeList）或使用更精准的 API。空白文本节点（nodeType === 3）常在 HTML 换行缩进处自动生成，导致 childNodes 中混入无意义的 TEXT_NODE，干扰逻辑——比如误判子元素个数、遍历时报错、事件绑定错位等。
识别并过滤掉空白文本节点
TEXT_NODE 的 nodeType 是 3，但并非所有 type=3 都该被忽略：需进一步判断其 textContent 是否仅含空白字符（空格、换行、制表符）。简单用 trim() 判断最稳妥。
- ❌ 错误做法：
node.nodeType !== 3—— 会误删有实际内容的文本节点 - ✅ 推荐写法：
node.nodeType === 1 || (node.nodeType === 3 && node.textContent.trim() !== '') - 一行过滤示例：
Array.from(parent.childNodes).filter(n => n.nodeType === 1 || n.textContent?.trim())
用 children 替代 childNodes 获取纯元素节点
parent.children 返回的是 HTMLCollection，只包含元素节点（Element），天然排除 TEXT_NODE 和 COMMENT_NODE，适合“只要子标签”的场景。
- 优势：语义清晰、无需手动过滤、兼容性好（IE9+）
- 注意：
children不响应动态插入的文本节点，也不包含 SVG 元素在某些旧环境中的特殊情况（极少见） - 转换为数组便于遍历：
[...parent.children].forEach(el => {...})
调试时快速定位干扰节点
遇到遍历结果异常，别急着改逻辑——先可视化查看真实 DOM 结构：
- 在控制台执行：
console.log(Array.from(parent.childNodes).map(n => ({type: n.nodeType, text: n.textContent?.slice(0,20), tagName: n.tagName}))) - 用 红色高亮 type=3 且 trim 后为空的节点，一眼识别“隐形干扰源”
- 检查 HTML 源码是否在标签间写了换行或空格（如
<div>\n <span>A</span>\n</div>）
现代替代方案：querySelectorAll + :scope > *
若目标是获取直接子元素且支持较新浏览器，可绕过 childNodes，用 CSS 选择器语义化选取：
-
parent.querySelectorAll(':scope > *')—— 只选直接子元素，不涉文本节点 - 兼容处理：
parent.matches && parent.querySelectorAll ? ... : [...parent.children] - 优势：意图明确、链式调用友好、可结合其他伪类（如
:scope > [data-role]）
