兼容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()兼容写法)。的主要内容,如果未能解决你的问题,请参考以下文章
window.getComputedStyle能够获取元素的实际样式,但是低版本的ie8及以下不支持,如何在低版本的ie上兼容类似的功能