Question

如何获取父容器的所有后代元素？我想把它们放在阵列中。

<div class="parent">
    <div class="child1">
        <span class="child2">
            <div class="child3">
                <div class="child4">
                    <span class="child5"></span>
                </div>
                <div class="child6">
                    <div class="class7"></div>
                </div>
            </div>
        </span>

        <div class="child8"></div>
        <span class="child9">
            <div class="child10"></div>
        </span>
    </div>
</div>

我认为递归是一种选择。在第一点，我知道parent元素。

Answer 1

~~如果您指的是 children ，则元素实例具有childNodes（包括非元素子元素，如文本节点）和（在大多数引擎上）children（其中只有子元素。）~~ （你澄清了你的意思是后代。）

如果您指的是后代，则可以使用querySelectorAll：

var descendants = theElement.querySelectorAll("*");

所有现代浏览器和IE8都有querySelectorAll。

它为您提供了NodeList，它类似于数组。如果你想要一个真正的JavaScript数组，你可以使用Array#slice来获取它，如下所示：

var descendants = Array.prototype.slice.call(theElement.querySelectorAll("*"), 0);

示例：

＆＃13;

var descendants = Array.prototype.slice.call(
  document.querySelector(".parent").querySelectorAll("*"),
  0
);
descendants.forEach(function(descendant) {
  display(descendant.className);
});
function display(msg) {
  var p = document.createElement('p');
  p.innerHTML = String(msg);
  document.body.appendChild(p);
}

＆＃13;

<div class="parent">
    <div class="child1">
        <span class="child2">
            <div class="child3">
                <div class="child4">
                    <span class="child5"></span>
                </div>
                <div class="child6">
                    <div class="class7"></div>
                </div>
            </div>
        </span>

        <div class="child8"></div>
        <span class="child9">
            <div class="child10"></div>
        </span>
    </div>
</div>

＆＃13;

Answer 2

使用theElement.getElementsByTagName("*")而不是theElement.querySelectorAll("*") - 因为速度更快。旧浏览器也更好地支持getElementsByTagName。

这将返回一个HTMLCollection，它与Array- 类似。您指定将其作为数组。要将其转换为真实数组，请执行以下操作：

Array.prototype.slice.call(theElement.getElementsByTagName("*"))

如果您想要更好的浏览器支持，您可以使用jQuery 1.12.4或picoQuery，它是jQuery的重新实现，您可以在其中选择在线构建器中需要的方法。在这种情况下，您不需要任何方法，因为选择是核心的一部分，并且构建只有1kb gzip。 picoQuery是为现代浏览器编写的，但是对于旧浏览器可以回溯到jQuery 1.12.4

Answer 3

document.querySelector('.parent').querySelectorAll('*')

首先我们找到元素（您可以根据需要执行此操作），然后使用querySelectorAll()选择所有后代。

如何获取父容器的所有后代元素？

3 个答案: