如何统计DOM父节点下深层嵌套子节点的子元素数量

问题原因 #

你当前使用的childNodes会返回元素的全部子节点，除了<li>这类HTML标签元素外，还包含换行、空格产生的文本节点、注释节点，所以统计结果和预期不符。

实现方案 #

要仅统计子元素（标签类型的节点），替换为children属性即可，children会自动过滤非元素类型的节点，正好匹配你的需求。
修正后的完整代码如下：

const parent = document.querySelectorAll('.parent');
parent.forEach(el => {
  const ul = el.querySelector('.child3-child');
  // 增加判空逻辑，避免无对应元素时控制台报错
  if (!ul) return
  const div = document.createElement('div');
  div.textContent = ul.children.length;
  el.append(div);
});

另外你提供的示例HTML存在语法错误，ul的闭合标签漏写了斜杠，修正后对应结构为：

<div class="child3">
  <ul class="child3-child">
    <li>
      some text...
    </li>
  </ul>
</div>

修正后运行代码，统计结果为1，和你的预期一致。

内容的提问来源于stack exchange，提问作者zyyyzzz