兼容IE8以下，获取className节点的元素(document.getElementsByClassName()兼容写法)。

时间：2022-11-04 20:37:05

 

因为ie8一下不兼容 

                document.getElementsByClassName()
                功能：通过class的名字获取符合条件的元素
 
                node.getElementsByClassName()
                指定node节点下，符合条件的元素。
  
所以我们自己封装一个兼容IE8以下，获取className节点的函数。
            //兼容IE8以下，获取className节点的元素。
            function elementsByClassName(node, className){
                var res = [];//定义一个数组用来存class相同的节点
                //1、查找node所有的子节点
                var nodes = node.getElementsByTagName("*");
                /*node.getElementsByTagName("*") 的意思是通过标签名查找所以node节点下所有的节点*为通配符*/
                for(var i = 0; i < nodes.length; i++){//遍历每一个节点
                    if(nodes[i].className == className){//判断每一个节点的class属性名是否等于 传入的class名
                        res.push(nodes[i]);
                    }
                }

然后进行调用即可

        window.onload = function(){
            var oUl = document.getElementById('ul1')
            var node = elementByClassName(oUl, 'box');
            alert(node.length);//2
        }

html结构如下：

<body>
        <ul id = 'ul1'>
            <li class = 'box'>11111111</li>
            <li>11111111</li>
            <li>11111111</li>
            <li class = 'box'>11111111</li>
        </ul>
        <ol>
            <li>22222222</li>
            <li class = 'box'>22222222</li>
            <li>22222222</li>
        </ol>    
</body>

 

标签：

相关文章