JS实现——查找指定父节点下所有子代节点

利用JS遍历出某个父节点下的所有子节点，深度优先遍历，每一次都优先遍历子节点，所有子节点遍历完，才返回遍历兄弟节点

第一种方式是利用递归将指定父节点下的所有子节点，但该方式空间占有率较高，耗时长

function getChildren(parent) {
    // 如果parent不是文本节点，就输出节点名字，否则除数文本节点
    console.log(parent.nodeType != 3 ? parent.nodeName : parent.nodeValue);
    
    // 循环所有直接子节点
    var children = parent.childNodes;
    
    for (var i = 0, len = children.length; i < len; i++) {
        var child = children[i];
        getChildren(child);
    }
}

// 找body下面的所有子代节点
getChildren(document.body);

第二种方式是采用迭代器获取指定父节点下的所有子节点
迭代器： 创建一个简单的范围迭代器，它定义了从开始（包括）到结束（独占）间隔步长的整数序列。 它的最终返回值是它创建的序列的大小，由变量iterationCount跟踪。

function getChildren2(parent) {
    // 创建迭代器
    var iterator = document.createNodeIterator(parent, NodeFilter.SHOW_ELEMENT, null, false);

    console.log(iterator);
    // 用循环反复调用节点迭代器对象的nextNode().跳向下一个节点
    var node;
    while ((node = iterator.nextNode()) != null) {
        console.log(
            node.nodeType != 3 ? node.nodeName : node.nodeValue
        );
    }
}
getChildren2(document.body);

// 利用这两种方式对相同页面进行测试后的的计时结果

console.time("add");
getChildren(document.body);
console.timeEnd("add");
// add：1678 毫秒 - 倒计时结束

console.time("add");
getChildren2(document.body);
console.timeEnd("add");
// add：677 毫秒 - 倒计时结束