document.getElementsByClassName兼容性问题

最新推荐文章于 2022-04-14 09:31:45 发布

清风乐鸣

最新推荐文章于 2022-04-14 09:31:45 发布

阅读量2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： javascript 兼容性问题文章标签： javascript

本文链接：https://blog.youkuaiyun.com/QTFYING/article/details/71169916

javascript 同时被 2 个专栏收录

49 篇文章

订阅专栏

兼容性问题

6 篇文章

订阅专栏

本文介绍了一个HTML5新增的JavaScript函数document.getElementsByClassName的兼容性处理方法，通过一个简单的示例展示了如何为不支持此函数的老版浏览器提供支持。

今天在复习的时候注意到一个细节，原来 document.getElementsByClassName 是 HTML5 新增加的一个 js 函数，对于一些老浏览器例如 IE9 以下的浏览器是不支持这个函数的，所以在那些需要处理兼容性问题的，这个也是一个要处理的一个细节，同时也可称经常被面试官问道：
我翻阅了很多的博客，大家都是千篇一律的转载，我给大家写一个小例子，来给大家展示一下该函数怎么去做低版本浏览器的兼容性问题：

<html>
  <body>
    <div class="ccc"></div>
    <i class="aaa"></i>
    <i class="ccc"></i>
    <script type="text/javascript">
      if(!document.getElementsByClassName)//判断浏览器是否支持这个方法
      {
          document.getElementsByClassName=function(cname){
              var selected=new Array();
              var alltag=document.getElementsByTagName("*");//获取所有标签
              for(var i=0;i<alltag.length;i++)
              {
                  var t=alltag[i];
                  alert(t.className);
                  if(t.className==cname)    //比较标签的class与所要查找的class是否相同
                  {
                      selected.push(t);          //将相同的存入数组
                  }
              }
              return selected;
          }
      }
      alert(document.getElementsByClassName("ccc").length); //演示：查找css类名为"ccc"的标签个数
    </script>
  </body>
</html>

弹出的结果是 2