• getElementsByClassName 兼容性


    getElementsByClassName是html5 新增加的一个类名。
    该方法可以让我们通过class属性中的类名来访问元素。不过该方法比较新,某些DOM树还没有,因此在使用中要当心。
    由于只有较新的浏览器支持,为了弥补这一不足,可以使用已有的DOM方法来实现自己的getElementsByClassName.下边这个函数使用各种新老浏览器。
     小提示:
    getElementById--------------       id是单选的,是getElement
    getElementsByClassName-----     是可以复用的,是getElements
    getElementsByTagName-------/
    DOM树中最常用的三个获取元素的方法,前边的getElement是不同的。记着呦~~
    /*node 是dom树的搜索起点  classname 是要搜索的类名*/
    function getElementsByClassName(node,classname){
        if(node.getElementsByClassName){
            return node.getElementsByClassName(classname);
        }else{
            var results = new Array();
            var elems = node.getElementsByTagName("*");
            for(var i=0;i<elems.length;i++){
                console.log(elems[i].ClassName);
                if(elems[i].ClassName.indexOf(classname)!=-1){
                    results[results.length] = elems[i];
                }
            }
            return results;
        }
    }
    /*用法*/
    var shopping = document.getElementById('shop');
    var shoplist = getElementsByClassName(shoplist,'list');
    
    /*如果不知道id,id全局dom搜索的话*/
    getElementsByClassName(document,'list');

    使用方法

    html

           <ul class="clear home-footer">
                  <li class="item">
                        <a href="index.html">
                            <p class="name" style="font-size: 16px;">租赁流程</p>
                        </a>
                    </li>
                    <li class="item">
                        <a href="apply.html">
                            <p class="name">预订须知</p>
                        </a>
                    </li>
                    <li class="item">
                        <a href="javascript:void(0);">
                            <p class="name">服务网点</p>
                        </a>
                    </li>
                    <li class="item item-mb">
                        <a href="rank.html">
                            <p class="name">用户反馈</p>
                        </a>
                    </li>
                </ul>
      <script>
       var re_node = getElementsByClassName(document,'name');
         for(var j=0;j<re_node.length;j++){
          var rec_style = re_node[j].innerText;
          console.log(rec_style);
       }
     </script>

     结果截图如下:

  • 相关阅读:
    利用jQuery实现页面渐显效果
    struts2+hibernate4+spring3+maven搭建项目:简单账务管理系统(从头至尾,不断更新)
    struts2+hibernate4+spring3+maven搭建项目:简单账务管理系统第二篇:struts+spring搭建
    学习Qt ing...
    正则表达式大杂烩
    gradle 基础配置
    Cglib和jdk动态代理的区别
    WebFlux Controller层测试
    zipkin 配置翻译
    seata 踩坑记录
  • 原文地址:https://www.cnblogs.com/xiaoxiao2014/p/5826987.html
Copyright © 2020-2023  润新知