获取 parentNode 的 (.....) 子节点的所有子节点

Posted 2023-02-19

【中文标题】获取 parentNode 的 (.....) 子节点的所有子节点

【英文标题】：Get all childs od childs of (.....) childs of parentNode

【发布时间】：2018-08-12 19:29:42

【问题描述】：

早上好，或者换句话说：“Hello World”。

这听起来像是一个愚蠢的初学者问题，但我不确定我是否错过了什么：

如果在 html 中你有一个有两个孩子的 DIV（比如 div） 你可以说 .childElementCount 将导致 2。 要访问它们，您可以说 .children[0] 和 children[1]

但是，如果孩子们也有孩子，那些也有孩子...... 如何确定 DOM 节点中的元素总数？

我真的需要检查“hasChildren”还是有一种简单的方法来获取我错过的特定 dom 元素的所有子元素和子子元素？

【参考方案1】：

您可以将querySelectorAll 与* 一起使用，因为它将选择其中的所有DOM 元素。然后使用.length 属性计算元素。

var x = document.querySelectorAll("#parent *").length;
console.log(x);

<div id="parent">

  <div>
    <div>
    </div>
    <div>
    </div>
  </div>

  <div>
    <div>
      <div>
        <span></span>
      </div>
    </div>

  </div>
</div>

【讨论】：

感谢您的快速回复。但这仅适用于 id，不是吗？但是，是的，我没有考虑 querySelectorAll，我会检查这个选项，谢谢！编辑：对不起，你是对的，被混淆了！

@David 不，它适用于任何选择器。也许你可能需要稍微调整一下，但它会起作用的。另外，如果此答案有帮助，请务必将其标记为正确:)