Web 技术研究所

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

JavaScript遍历注释节点

  遍历普通的HTML元素很容易,直接使用getElementsByTagName,或者现代浏览器中提供的querySelectorAll,这些方法都可以遍历HTML元素。但是注释节点就不同,它没有标签,无法直接用这些方法获取到。因此对于低版本浏览器我们只能遍历整个文档来搜索。
  在低版本IE就连根据class获取元素都需要遍历整个文档,更何况连标签名都算没有的注释节点呢?所以在低版本IE上遍历是必不可少的。但是现代浏览器就不用那么麻烦!在之前的文章中有提到过一个被我称为树木漫步者的家伙,它就可以根据节点类型来获取节点。因此我们可以结合低版本IE和现代浏览器的实现方式,写出一个全兼容的代码。
<!--JavaScript遍历注释节点-->
<!--大家好,我是个注释节点-->
<script>
onload=function(){
  var i,o,s=getCommentNodes(document);
  for(i=0;o=s[i];i++)console.log(o);
};

//兼容的获取简单方案
var getCommentNodes=window.NodeFilter?function(e){
  //支持TreeWalker的浏览器
  var r=[],o,s;
  s=document.createTreeWalker(e,NodeFilter.SHOW_COMMENT,null,null);
  while(o=s.nextNode())r.push(o); //遍历迭代器
  return r;
}:function(e){
  //不支持的需要遍历
  switch(e.nodeType){
    case 8:return [e]; //注释节点直接返回
    case 1:case 9: //文档或元素需要遍历子节点
      var i,s=e.childNodes,l=s.length,result=[];
      for(i=0;i<s.length;i++) //递归每个子节点
        result.push(getCommentNodes(s[i]));
      return Array.prototype.concat.apply([],result); //合并子数组
  };
};
</script>
网名:
54.156.92.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^