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

Question

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

这听起来像是一个愚蠢的初学者问题，但我不确定我是否错过了一些东西:

如果在 HTML 中你有一个带有两个子元素的 DIV(也可以说是 div) 你可以说 .childElementCount 将得到 2。 要访问它们，您可以说.children[0]和children[1]

但是，如果 child 也有 child ，那些人也有 child …… 如何确定 DOM 节点中元素的总数？

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

Answer 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>