如何用 childNodes 与 children 区分文本节点与元素子节点

childNodes返回所有子节点（含文本、注释等），children仅返回元素节点；前者包含空白文本节点，后者自动过滤非元素内容，更简洁安全。childNodes 和 children 都是用来获取元素子节点的属性，但它们返回的内容完全不同：childNodes 包含所有类型的子节点（元素、文本、注释等），而 children 只返回元素节点（即 HTML 标签），自动过滤掉文本节点和注释节点。childNodes 会包含空白文本节点HTML 中换行、缩进、空格在 DOM 解析时会被当作文本节点（nodeType === 3）。比如：<div>??<p>Hello</p></div>这个 div 的 childNodes 实际包含 3 个节点：一个换行+空格组成的文本节点、一个 <p> 元素节点、再一个换行文本节点。用 div.childNodes.length 得到的是 3，不是 1。判断是否为元素节点可检查 node.nodeType === 1 或用 node instanceof Element。children 只返回元素子节点children 是只读的 HTMLCollection，里面全是 Element 类型节点，完全忽略文本、注释等非元素内容。上面例子中 div.children.length 就是 1，且 div.children[0] 就是那个 <p> 元素。 有道翻译AI助手 有道翻译提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、葡萄牙语、越南语、印尼语、意大利语、荷兰语、泰语全文翻译、网页翻译、文档翻译、PDF翻