兼容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>
复制代码

 

作者：暗恋桃花源丫
本人web前端小白，只是用博客作为笔记！
转载的文章，如有侵权24小时内删除！

posted @   暗恋桃埖源  阅读(2578)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
SQL AI 助手