Question

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

现在我有这个函数可以返回所有标签，甚至是div id = "main"以外的标签：

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

就像这样的文件：

<div id="main">

    <h1>bla bla</h1>

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

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

    <p>..</p>

</div>

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

[h1, p, b, i, img, div, p, p, p]

谢谢

Answer 1

使用document.querySelectorAll。它返回一个NodeList，而不是一个数组，但你可以用相同的方式循环它：

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

http://jsfiddle.net/suuja4L5/

Answer 2

只需获取父元素，然后像下一样获取后代：

var mainDiv = document.getElementById("main");
mainDiv.getElementsByTagName("*")

Answer 3

如果您想要<div id="main">的所有孩子，请使用以下内容：

var children = document.querySelector("#main").children;

以递归方式获取另一个标记内的所有标记节点

3 个答案: