ParentNode.children 返回仅含直接子元素节点的HTMLCollection，排除文本和注释节点；可索引访问、for...of遍历，但需转数组才能filter；区别于包含所有节点类型的childNodes；现代推荐用querySelectorAll(':scope > *')替代。
ParentNode.children 返回的是一个 HTMLCollection，只包含该元素的**直接子元素节点（Element 节点）**，不包括文本节点、注释节点等。它不是数组，但可以像数组一样用索引访问，也支持 for...of 遍历。
获取所有子元素（基础用法）
假设你有一个容器元素：
<div id="container"> <p>段落1</p> <span>文字</span> <div class="item">子div</div> <!-- 注释 --> 普通文本 </div>
执行以下代码：
立即学习“Java免费学习笔记（深入）”；
const container = document.getElementById('container');
const children = container.children;此时 children 包含 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10362" title="java-api-doc-generator"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="java-api-doc-generator" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10362" title="java-api-doc-generator">java-api-doc-generator</a>
<p>分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。</p>
</div>
<a href="/xiazai/skill10362" title="java-api-doc-generator" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>、<span></span>、<div class="item"> 这三个元素节点，**忽略注释和纯文本节点**。<h3>筛选特定标签或类名的子元素</h3>
<p><code>children 本身不提供过滤方法，需配合数组转换或遍历：
- 转为数组后用
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 选择器全部能力。
