JavaScript DOM深度遍历(2种方法)和广度遍历

DOM深度优先遍历

1. API方法creatNodeIterator(ele,whatToShow,filter,boolean)

参数介绍：

• whatToShow：待显示的节点类型，值有
  
  • NodeFilter.SHOW_ALL
  • NodeFilter.SHOW_ELEMENT
  • NodeFilter.SHOW_ELEMENT
  • NodeFilter.SHOW_ATTRIBUTE
• filter 表示过滤待显示的节点
• boolean表示实体扩展，在HTML页面没用，为false
  其内部包含nextNode(),previousNode()

代码举例

var body = document.getElementsByTagName('body')[0];
    var filter = function (node) {
        return node.tagName.toLocaleLowerCase() === 'li' || node.tagName.toLocaleLowerCase() === 'p'? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
    }
    var iterator = document.createNodeIterator(body,NodeFilter.SHOW_ELEMENT,null,false);
    var node = iterator.nextNode();
    while(node !== null){
        console.log(node.tagName);
        node = iterator.nextNode();
    }

---

2. API方法creatNodeTreeWalker(ele,whatToShow,filter,boolean)

参数和creatNodeIterator一样，但包含的功能更多，可以直接跳到对应的节点:

• parentNode()
• firstChild()
• lastChild()
• nextSibling()
• previousSibling()

代码举例

 var body = document.getElementsByTagName('body')[0];
    var walker = document.createTreeWalker(body,NodeFilter.SHOW_ELEMENT,null,false);
    var node = walker.firstChild();
        node = walker.nextSibling();
    while(node !== null){
        console.log(node.tagName);
        node = walker.nextNode();
    }

---

3.递归方法实现

  function deepFirstSearch (node) {
        console.log(node.tagName);
        if(node.children.length){
            Array.from(node.children).forEach(function (el) {
                deepFirstSearch (el);
            })
        }
    }

---

DOM广度优先遍历

原理：先将node节点push进queue中，每次处理一个出队的元素直到queue中无元素待处理，每次处理完一个节点后，将其子节点全部push进数组queue中

   function wideFirstSearch(node) {
        var queue = [];
        while(node){
            console.log(node.tagName);
            Array.from(node.children).forEach(function (el) {
                queue.push(el);
            });
            node = queue.shift();
        }
    }