如何用JavaScript统计<step>元素内直接子元素的数量？

嘿，这事儿其实挺容易搞定的，我给你分享两种实用的实现方式，都能准确得到你要的结果（也就是2个）：

方法1：用Element.children属性（最推荐） #

children属性专门返回元素的直接元素子节点，会自动忽略文本节点、注释这些非元素类型的节点，完全符合你的需求。代码示例：

// 先获取目标<step>元素
const stepElement = document.querySelector('step[name="step1"]');
// 直接取children的长度就是直接子元素的数量
const directChildCount = stepElement.children.length;
console.log(directChildCount); // 控制台会输出2

这个方法简单高效，因为它已经帮你过滤掉了那些空白换行之类的文本节点，不用额外处理。

方法2：用childNodes结合过滤（更灵活） #

如果你之后需要更精细的筛选（比如排除特定标签的子元素），可以用childNodes先拿到所有子节点，再过滤出元素类型的节点：

const stepElement = document.querySelector('step[name="step1"]');
// 把childNodes转成数组，然后筛选出元素节点
const directChildElements = Array.from(stepElement.childNodes).filter(node => {
  return node.nodeType === Node.ELEMENT_NODE;
});
// 取筛选后的数组长度
const directChildCount = directChildElements.length;
console.log(directChildCount); // 同样输出2

这里Node.ELEMENT_NODE的值是1，你也可以直接写node.nodeType === 1，效果是一样的。

为什么结果是2？ #

你的标签里，直接子元素就是<select>和<input>，那些换行、空格属于文本节点，不会被上面两种方法统计进去，所以最终数量正好是2。

内容的提问来源于stack exchange，提问作者KAVYA H L