获取某个节点的所有后代节点（也是叶子节点）

Question

我有一个 html 文档，包含一个<div id="main">. 这里面div可能有几个层次的节点，没有一个精确的结构，因为是创建文档内容的用户。我想使用一个JavaScript函数来返回div id="main". 任何标签都是，考虑到可能有不同级别的孩子。

例如，如果我有这个文件：

...

<div id="main">

    <h1>bla bla</h1>

    <p>
        <b>fruits</b> apple<i>text</i>.
        <img src="..">image</img>
    </p>

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

    <p>..</p>

</div>
...

该函数getNodes将返回一个对象节点数组（我不知道如何表示它，所以我列出了它们）：

[h1, #text (= bla bla), p, b, #text (= fruits), #text (= _apple), i, #text (= text), img, #text (= image), div, p, p, p, #text (= ..)]

正如我们从示例中看到的，您必须返回所有节点，甚至叶节点（即 #text 节点）。

现在我有这个函数返回除叶子之外的所有节点：

function getNodes() {
    var all = document.querySelectorAll("#main *");
    for (var elem = 0; elem < all.length; elem++) {
        //do something..
    }
}

事实上，在上面的例子中应用的这个特性返回：

[H1, P, B, I, IMG, DIV, P, P, P]

没有#text 节点。此外，如果该方法以这种方式返回文本元素：

all[elem].children.length

我得到（我在 上测试过<p>fruits</p>）<p>是一个叶节点。但是如果我构建 DOM 树，很明显它不是叶节点，在这个例子中，叶节点是#text......

谢谢

Answer 1

递归到 DOM 的经典案例。

function getDescendants(node, accum) {
    var i;
    accum = accum || [];
    for (i = 0; i < node.childNodes.length; i++) {
        accum.push(node.childNodes[i])
        getDescendants(node.childNodes[i], accum);
    }
    return accum;
}

和

getDescendants( document.querySelector("#main") );