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

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

如果您指的是子元素,则元素实例childNodes(包括非元素子元素,如文本节点)和(在大多数引擎上)children(只有子元素). (你澄清了你的意思是后代.)

如果您的意思是后代,您可以使用querySelectorAll:

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

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

它给你一个NodeList,就像阵列一样.如果你想要一个真正的JavaScript数组,你可以使用Array.prototype.slice它来获取它,如下所示:

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

例:

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

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

Answer 2

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

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

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

如果您想要更好的浏览器支持，则可以使用jQuery 1.12.4或picoQuery，它是jQuery的重新实现，您可以在在线生成器中选择所需的方法。在这种情况下，您不需要方法，因为选择是核心的一部分，构建仅压缩了1kb。picoQuery是为现代浏览器编写的，但对于较旧的浏览器则使用jQuery 1.12.4