如何使用 JavaScript 计算特定元素的所有子元素？
子节点
在 JavaScript 中，文档树或 DOM（文档对象模型）树中直接嵌套在另一个节点内的节点称为子节点。
子节点位于特定 HTML 元素、文本节点和注释节点中，这些节点在处理 HTML 文档时嵌套在其他 HTML 元素内。
方法 1：使用 childNodes 属性
利用 childNodes 属性是计算子组件的一种方法。此属性返回所有子节点（包括文本节点和注释）的 NodeList。我们可以循环遍历 NodeList 并检查每个节点的 nodeType 属性以仅枚举元素节点：
算法
开始
使用 querySelector 方法选择父元素并将其分配给变量"parent"。
初始化变量"count"，值为 0。
使用 forEach 方法遍历父元素的每个子节点，并传递以"node"为参数的回调函数：
a. 使用 nodeType 属性检查节点是否为元素节点，并将其与 Node.ELEMENT_NODE 进行比较。
b.如果节点是元素节点，则将计数变量加 1。
遍历完所有子节点后，将计数变量输出到控制台。
结束。
示例
<div id="parent">
<p>Child 1</p>
<p>Child 2</p>
<span>Child 3</span>
Some text
</div>
const parent = document.querySelector('#parent');
let count = 0;
parent.childNodes.forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE) {
count++;
}
});
console.log(count);
使用 querySelector，我们首先在此代码中选择父元素。接下来，我们将 count 变量的起始值设置为 0。使用 forEach 函数，我们循环遍历 childNodes NodeList，为每个元素节点增加 count 变量。
方法 2：使用 children 属性
使用 children 属性是枚举子元素的另一种方法。只有作为父元素的直接子元素的元素节点才包含在此属性提供的 HTMLCollection 中。要获得总数，我们只需要使用此集合的 length 属性：
算法
开始
使用 querySelector 方法选择父元素并将其分配给变量"parent"。
使用 children 的属性获取父元素的子元素数量并将其分配给变量"count"。
将 count 变量输出到控制台。
结束。
示例
<div id="parent">
<p>Child 1</p>
<p>Child 2</p>
<span>Child 3</span>
Some text
</div>
const parent = document.querySelector('#parent');
const count = parent.children.length;
console.log(count);
在此代码中，我们首先使用 querySelector 选择父元素，从而获取 children 集合的 length 属性。
方法 3：使用 querySelectorAll：
最后，我们可以使用 querySelectorAll 方法枚举子元素。此方法返回与给定选择器匹配的所有元素的 NodeList。只能使用子选择器 (>) 选择直接组件：
算法
开始
使用 querySelector 方法选择父元素并将其分配给变量"parent"。
将 querySelectorAll 方法与选择器">"一起使用*' 选择父元素的所有子元素，并将它们赋值给变量 'elements'。
获取 elements 变量中的子元素数量，并将其赋值给变量 'count'。
将 count 变量输出到控制台。
结束。
示例
<div id="parent">
<p>Child 1</p>
<p>Child 2</p>
<span>Child 3</span>
Some text
</div>
const parent = document.querySelector('#parent');
const count = parent.querySelectorAll('> *').length;
console.log(count);
在此代码中，我们首先使用 querySelector 来选择父元素，然后使用子选择器 (>) 使用 querySelectorAll 选择该元素的所有直接子元素。然后获取结果 NodeList 的长度属性。
结论
JavaScript 提供了几种计数子组件的方法，每种方法都有独特的优点和缺点。最灵活的方法是 childNodes，它可以计数任何类型的子节点，但需要更多编程来排除非元素节点。children 方法仅包括直接子元素，但最直接。querySelectorAll 技术也很简单，可用于选择任何级别的子元素，但它需要了解 CSS 选择器。
