遍历节点的API

用久了IE,人落伍的,许多新的API都无法用。比如现在讲的遍历API,在DOM1.0中,人人都知道这几个属性nextSibling,previousSibling,childNodes ,firstChild,lastChild,parentNode,当然还有children,不过它一年前才被标准化,与nextElementSibling,previousElementSibling,firstElementChild,lastElementChild归为一个系列。不过标准浏览器还支持更强悍的遍历,拥有过滤功能。

nodeIterator

这是一个对象,要使用它需要调用document.createNodeIterator方法。

var nodeIterator = document.createNodeIterator(root, whatToShow, filter, entityReferenceExpansion);  

第一个参数:从哪一个节点开始遍历,包括它自身。

第二个参数:是一个数字,用于判断遍历什么类型的节点。

NodeFilter.SHOW_ALL = -1
NodeFilter.SHOW_ELEMENT = 1
NodeFilter.SHOW_ATTRIBUTE = 2
NodeFilter.SHOW_TEXT = 4
NodeFilter.SHOW_CDATA_SECTION = 8
NodeFilter.SHOW_ENTITY_REFERENCE = 16
NodeFilter.SHOW_ENTITY = 32
NodeFilter.SHOW_PROCESSING_INSTRUCTION = 64
NodeFilter.SHOW_COMMENT = 128
NodeFilter.SHOW_DOCUMENT = 256
NodeFilter.SHOW_DOCUMENT_TYPE = 512
NodeFilter.SHOW_DOCUMENT_FRAGMENT = 1024
NodeFilter.SHOW_NOTATION = 2048

第三个参数:一个对象,格式非常固定,或者干脆为null。

 { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
//这里的NodeFilter.FILTER_ACCEPT可以换为NodeFilter.FILTER_REJECT, 或 NodeFilter.FILTER_SKIP

第四个参数:一个布尔值,不知有何用,填false就对了。

一个例子,取得body的所有元素节点,包括body自身。

        var nodeIterator = document.createNodeIterator(
        document.body,
        NodeFilter.SHOW_ELEMENT,
        { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
        false
      );

想了解更多,请点击这里

treeWalker

用法基本同nodeIterator 。

var treeWalker = document.createTreeWalker(root, whatToShow, filter, entityReferenceExpansion);

一个例子,取得body的所有元素节点,但不包括body自身。

    var treeWalker = document.createTreeWalker(
        document.body,
        NodeFilter.SHOW_ELEMENT,
        { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
        false
      );
       var nodeList = new Array();
       while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
       alert(nodeList)

想了解更多,请点击这里这里

// Get all element, comment, and text nodes in the document document.getNodes( Node.ELEMENT_NODE, Node.COMMENT_NODE, Node.TEXT_NODE );
原文地址:https://www.cnblogs.com/rubylouvre/p/1667693.html