javascript - 获取某个节点的所有后代节点(也是叶子节点)

Question

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

例如，如果我有这个文档:

...

<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") );