您的位置：首页 > 其它

IE不支持getElementsByClassName()方法的问题

2013-09-06 10:40 645 查看

我们知道，原生的JS给我们提供了getElementsByClassName方法，可以通过此方法获取到含有某指定class的节点集合，注意是集合，也就是此函数返回一个数组。

但是，IE却并不支持这个方法，但这方法却是很有实用性，所以，我们又不得不专门为IE实现这么一个函数。

怎么实现呢？我们想，这是获取某节点下含有某class的方法，那么，我们就要给这个函数传两个参数：className和context上下文。接着，我们可以判断浏览器是否支持getElementsByClassName方法，支持的话，我们直接调用此方法返回，不支持，则继续下面的思路。

1.获取所有document或者传进来的context下的所有节点元素，可以通过node.getElementsByTagName('*')实现；

2.遍历获取到的所有节点，匹配我们指定的className，成功匹配则存进一个数组保存，因为相同的class可以有多个，所以不能一匹配到就返回，要存进数组里，最后再一次性返回。

上面的思路并不是很清晰，但代码会清晰得告诉我们，如下：

测试代码如下：

<script type="text/javascript">

function getElementsByClassName(className,context){

context = context || document;

if(context.getElementsByClassName){

return context.getElementsByClassName(className);

}

var nodes = context.getElementsByTagName('*');

var rets = [];

for(var i = 0; i < nodes.length; i++){

if(hasClass(className,nodes[i])){

rets.push(nodes[i]);

}

}

return rets;

}

function hasClass(className,node){

var classNames = node.className.split(/\s+/);

for(var i = 0; i < classNames.length; i++){

if(classNames[i] == className){

return true;

}

}

return false;

}

window.onload = function(){

var test = document.getElementById('test');

alert(getElementsByClassName('test1',test).length); //2

}

</script>

</head>

<body>

<div id="test">

<div class="test1"></div>

<div class="test1"></div>

</div>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航