如何在 JavaScript 中通过 ParentNode.children 获取特定元素下的所有子节点-java教程-PHP中文网

ParentNode.children 返回仅含直接子元素节点的HTMLCollection，排除文本和注释节点；可索引访问、for...of遍历，但需转数组才能filter；区别于包含所有节点类型的childNodes；现代推荐用querySelectorAll(':scope > *')替代。

如何在 javascript 中通过 parentnode.children 获取特定元素下的所有子节点

ParentNode.children 返回的是一个 HTMLCollection，只包含该元素的**直接子元素节点（Element 节点）**，不包括文本节点、注释节点等。它不是数组，但可以像数组一样用索引访问，也支持 for...of 遍历。

获取所有子元素（基础用法）

假设你有一个容器元素：

<div id="container">
  <p>段落1</p>
  <span>文字</span>
  <div class="item">子div</div>
  <!-- 注释 -->
  普通文本
</div>

执行以下代码：

const container = document.getElementById('container');
const children = container.children;

此时 children 包含

、、

 这三个元素节点，**忽略注释和纯文本节点**。筛选特定标签或类名的子元素
children 本身不提供过滤方法，需配合数组转换或遍历：

											
												
												
													java-api-doc-generator
													分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
												
												下载
												
											
										
转为数组后用 filter()：
const divChildren = Array.from(container.children).filter(el => el.tagName === 'DIV');
用 for...of 遍历并判断：
for (const child of container.children) {
  if (child.classList.contains('item')) {
    console.log(child);
  }
}
更简洁：用 Array.prototype.slice.call() 或扩展运算符：
const items = [...container.children].filter(el => el.matches('.item'));
注意与 childNodes 的区别
children 和 childNodes 容易混淆：


children → 只返回 元素节点（Element）


childNodes → 返回所有子节点，包括 文本节点、注释节点、元素节点


例如上面例子中：container.childNodes.length 通常大于 container.children.length，因为包含了空格换行产生的文本节点和注释节点。
兼容性与现代替代建议
children 在所有现代浏览器及 IE9+ 中都可用，无需 polyfill。但若需更强的查询能力，推荐直接使用：


element.querySelectorAll(':scope > *') —— 获取所有直接子元素（返回 NodeList）

element.querySelectorAll(':scope > .item') —— 获取带特定类的直接子元素

其中 :scope 表示当前元素本身，> 确保是直接子代，语义清晰且支持 CSS 选择器全部能力。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南