获取子节点的子节点直到没有

Question

我正在使用 DOMParser() 来解析 HTML 字符串，并尝试使用 for 循环获取所有子节点。但是我不知道如何获取子节点的节点，以及它们的子节点等...

var str = "<div><p>paragraph<span>span</span></p></div>";
var doc = new DOMParser().parseFromString(str, 'text/html');
var childnodes = doc.body.childNodes;

for (var i = 0; i < childnodes.length; i++) {
    console.log(childnodes[i]);
    console.log(childnodes[i].childNodes);
    console.log(childnodes[i].childNodes[i].childNodes);
}

这如我所愿，它给出了 div、p、text 和 span，但我如何使用for循环获取所有孙子？没有 jQuery?

Here's a fiddle 加上上面的代码。

Answer 1

你应该为此使用递归：

function travelChildren(childnodes){

    for (var i = 0; i < childnodes.length; i++) { // for each node in childnodes
        console.log(childnodes[i]); // console log current node
        travelChildren(childnodes[i].childNodes) // and travel its children
    }

}

travelChildren(childnodes) // start recursion with the child nodes you want

Answer 2

对于那些可以使用jQuery的人，您可以在while循环中完成。

var $children = $(document.body).children();
while ($children.length) {
    console.log($children.attr('class'));
    $children = $children.children();
}

或者按照@adeneo的建议，您可以使用contents():

$(document.body).find('*').contents();

尽管如此，jQuery 建议“Avoid the All Selector,”无论哪种方式都可能是昂贵的代码。

获取子节点的子节点直到没有

Get childnode's children until there aren't any

html

javascript

children

domparser