博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
兼容IE8以下,获取className节点的元素(document.getElementsByClassName()兼容写法)。
阅读量:5172 次
发布时间:2019-06-13

本文共 954 字,大约阅读时间需要 3 分钟。

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

转载于:https://www.cnblogs.com/jxldjsn/p/11084513.html

你可能感兴趣的文章
centos 引导盘
查看>>
Notes of Daily Scrum Meeting(12.8)
查看>>
Apriori算法
查看>>
onlevelwasloaded的调用时机
查看>>
lr_start_transaction/lr_end_transaction事物组合
查看>>
CodeIgniter学习笔记(四)——CI超级对象中的load装载器
查看>>
.NET CLR基本术语
查看>>
ubuntu的home目录下,Desktop等目录消失不见
查看>>
建立,查询二叉树 hdu 5444
查看>>
[Spring框架]Spring 事务管理基础入门总结.
查看>>
2017.3.24上午
查看>>
Python-常用模块及简单的案列
查看>>
LeetCode 159. Longest Substring with At Most Two Distinct Characters
查看>>
基本算法概论
查看>>
jquery动态移除/增加onclick属性详解
查看>>
JavaScript---Promise
查看>>
暖暖的感动
查看>>
Java中的日期和时间
查看>>
Django基于admin的stark组件创建(一)
查看>>
C. Tanya and Toys_模拟
查看>>