兼容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>