Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

使用NodeIterator来遍历节点层的操作

  要遍历文档的元素很简单,getElementsByTagName和querySelectorAll都可以实现。但是这些方法都是Element层的,他们无法操作到Node层,比如文本节点或注释节点。使用createNodeIterator就可以完成这个遍历,但遗憾的是IE8-都不支持这个方法。
  这是DOM2中引入的在document对象上的一个方法,用来创建一个用于遍历指定节点的迭代器。这个方法有四个参数,分别是:根节点、要遍历的节点类型、过滤器回调、实体引用开关。其实目前就前三个参数有用,第四个参数是给EntityAPI预留的,目前这个API浏览器都基本没实现,所以第四个参数一般无所谓的。下面是一个简单的例子 <script>
onload=function(){
  var o,i,html;
  html=document.documentElement;
  i=document.createNodeIterator(html,NodeFilter.SHOW_ALL,function(){
    return NodeFilter.FILTER_ACCEPT;
  },false);
  while(o=i.nextNode())console.log(o);
};
</script>

  这里指定的是documentElement,也就是HTML的根元素,而迭代遍历后得到的结果是包含了HTML根元素的所有元素,也就是说指定的根元素和它的所有子节点都会被遍历出来。这里的第二参数是从NodeFilter这个对象中可以得到的带SHOW前缀的常量,取值有很多,我就不一个个列出来的,详见文章末尾的连接。常用的就是SHOW_ALL、SHOW_ELEMENT、SHOW_TEXT,等这些。要注意的是有些节点并不属于DOM树的,比如属性节点、实体节点等。因此SHOW_ATTRIBUTE、SHOW_ENTITY,等这些取值无法从DOM元素上获取到东西,必须直接把他们自身作为根节点才能获取到。
  第三个参数是过滤器回调,用法类似Array的filter,只不过返回值不是布尔,也是NodeFilter中的常量(FILTER前缀)。返回FILTER_ACCEPT是接受指定元素,返回FILTER_REJECT是拒绝指定元素(不再遍历它的后代元素),返回FILTER_SKIP是跳过指定元素(后代元素依然会遍历到)。
  在Firefox和Chrome中,createNodeIterator函数除了的一个参数外的其它参数都是可选的。但是在IE中四个参数必须齐全,所以使用时一般四个参数全传上。
  创建NodeIterator对象之后可以调用nextNode和previousNode方法来控制游标移动来遍历元素。还有个detach方法可以释放这个迭代器,不过一般都交给JavaScript的GC机制自动回收,也不会常用到。
  另外,如果只是要遍历元素的话不建议使用这个,应该使用getElementsByTagName或querySelectorAll。因为NodeIterator的效率比它们低,用这个有点杀鸡有牛刀了。还有个与之类似的TreeWalker对象,这里就先不介绍了。
  最后是NodeIterator对象的相关文档
    MDN NodeIterator
    MSDN NodeIterator
    W3C Iterator-overview
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^