曲振飞的个人博客

专注于Web全栈开发、APP设计、网站建设

当前位置 : 主页 > 前端开发 > 自定义方法获取类名解决getElementsByClassName的兼容性

自定义方法获取类名解决getElementsByClassName的兼容性

时间:2016-08-19 09:59:30 栏目:前端开发 作者:曲振飞 点击: 516

在网站制作中,我们会根据程序的需要获取当前页中所有class属性为某个值的所有节点,如果我们采用document.getElementsByClassName(“className”);方法可以很简单的就能够实现,但是不得不注意的是,浏览器的兼容性问题,因为getElementsByClassName并非一个标准DOM方法,在IE9以下浏览器中该方法是不兼容的,那我们可以自定义个方法:

设计思路:

    1、先获取所有的节点

    2、遍历这些节点

    3、判断这些节点中哪些是我们所需要的

    4、输出并返回值

程序实现:

function getClassName(name){
    //1.获取所有的节点
    var arr=new Array();
    var list=document.all;
    //2.遍历节点
    for(var i=0;i<list.length;i++){
      document.write(list[i].nodeName+" ");
       //3.判断当前class属性为one的节点
       if(list[i].className==name){
        arr[arr.length]=list[i];
      }
   }
   //4.输出返回节点
   return arr;
}



关键字: DOM

关于站长

曲振飞,一个热忠、从事于互联网的90后青年.专注于网站建站、网站设计及优化.以用户体验、WEB标准为主旨,将网站的整体设计与网页设计的相关原理紧密结合.