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();        }    }