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

Posted jxldjsn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了兼容IE8以下,获取className节点的元素(document.getElementsByClassName()兼容写法)。相关的知识,希望对你有一定的参考价值。

因为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>

以上是关于兼容IE8以下,获取className节点的元素(document.getElementsByClassName()兼容写法)。的主要内容,如果未能解决你的问题,请参考以下文章

关于HTML中,如何根据元素的className获取元素?

根据ClassName获取元素节点

JS的兼容函数

window.getComputedStyle能够获取元素的实际样式,但是低版本的ie8及以下不支持,如何在低版本的ie上兼容类似的功能

IE8部分兼容问题及解决方法

IE8 兼容 getElementsByClassName