获取childnode的孩子，直到没有

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,”，但无论哪种方式，它都可能是昂贵的代码。