在JS中主要可以通过document.getElementById,getElementsByTagName 和getElementsByClassName来获取目标HTML对象。我中document.getElementById,getElementsByTagName基本所有主流浏览器都支持，可以当心使用。但是由于getElementsByClassName方法较新，IE6,7以及一些老旧的浏览器不支持该方法，所以在使用时为了解决兼容问题，需要通过函数来封装，然互调用函数就可以解决。下面具体介绍一种简单的封装方法。
需要注意的是，以下的方法并不是完整的，它没有考虑元素的class名有相同的字符的情况。如果需要封装完整的函数，需要用到正则表达式。
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<meta charset="utf-8"/>
<style type="text/css">
#box{
width: 500px;
height: 500px;
border:1px solid #ddd;
background:red;
margin: 100px auto;
}
.cute{
width: 100px;
height: 100px;
margin: 10px auto;
}
</style>
</head>
<body>
<div id="box">
<div class="cute"></div>
<div class="cute"></div>
<div ></div>
<div ></div>
<div class="cute"></div>
</div>
</body>
<script type="text/javascript">
//声明函数，将classname通过参数穿进去
function getElementsByClassName(classname){
if(document.getElementsByClassName){
return document.getElementsByClassName(classname);
}
else{
var arr = []; //声明一个空数组，用于存放符合条件的元素
var results = document.getElementsByTagName("*"); //通过标签名获取所有的标签
for(var i=0;i<results.length;i++){
if(results[i].className.indexOf("classname") != -1){
arr[arr.length] = results[i]; //将className中含有“classname”的元素放入声明好的空数组
}
}
return arr; //返回该数组；数组中保存的就是我们通过ByClassName获取到的元素；
}
}
var cute = getElementsByClassName("cute");
cute[0].style.background = "yellow";
cute[1].style.background = "green";
cute[2].style.background = "blue";
</script>
</html>
