都知道document.getElementsByClassName这个方法只能在ie8以上的浏览器使用,也就是说getElementsByClassName是在支持html5的浏览器下才能执行。
为了让ie9以下的浏览器能够支持这个方法于是我自己写了个getElementsByClassName脚本方法让浏览器也能够像jquery那样拿到Class就能获取对象。
为了测试方法的通用性我已用 ie、firefox 、chrome 、safari 进行测试,结果令我很满意,都能完美运行。
一下是我实现的源码看起里会比较乱,只要复制出来运行就可以看到效果,或者可以狠狠点击这里看例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getElementsByClassName</title>
</head>
<body>
<div class="test id">1</div>
<div class="test454545454">2</div>
<p class="test454545454">12</p>
<div class="test id">1</div><br />
<div class="test454545454">2</div><br />
<p class="test454545454">12</p><br />
<script><br />
function getElementsByClassName(className){<br />
var elems = [];<br />
if(!document.getElementsByClassName){<br />
var dom = document.getElementsByTagName("*");<br />
for(var i =0 ;i<dom.length;i++){<br />
if(dom[i].className){<br />
var classs = dom[i].className.split(" ");<br />
for(var c = 0;c<classs.length;c++){<br />
if(classs[c]==className){<br />
elems.push(dom[i]); <br />
}<br />
}<br />
}<br />
}<br />
}else{<br />
var dom = document.getElementsByClassName(className);<br />
for(var i =0 ;i<dom.length;i++){<br />
elems.push(dom[i]); <br />
}<br />
}<br />
return elems;<br />
}<br />
<br />
var testElemt = getElementsByClassName("test454545454");<br />
for(var i =0 ;i<testElemt.length;i++){<br />
alert("testElemt "+testElemt[i].innerHTML); <br />
}<br />
</script>
<script>
function getElementsByClassName(className){
var elems = [];
if(!document.getElementsByClassName){
var dom = document.getElementsByTagName("*");
for(var i =0 ;i<dom.length;i++){
if(dom[i].className){
var classs = dom[i].className.split(" ");
for(var c = 0;c<classs.length;c++){
if(classs[c]==className){
elems.push(dom[i]);
}
}
}
}
}else{
var dom = document.getElementsByClassName(className);
for(var i =0 ;i<dom.length;i++){
elems.push(dom[i]);
}
}
return elems;
}
var testElemt = getElementsByClassName("test454545454");
for(var i =0 ;i<testElemt.length;i++){
alert("testElemt "+testElemt[i].innerHTML);
}
</script>
</body>
</html>
原文地址 http://haiqiancun.com/bbs/bbsPage/0/detail/297e9e7946a599780146a5a38dde0003/1/20140806112531