遍历节点的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 );

如果您觉得此文有帮助，可以打赏点钱给我支付宝1669866773@qq.com ，或扫描二维码