<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="ul1">
<li></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
</ul>
</body>
</html>
<script>
// 参数:从哪个父级下选取元素,哪一个class元素
function getByClass(oParent, sClass){
var aEle = oParent.getElementsByTagName('*');
var aResult = [];
var i=0;
for(i=0;i<aEle.length;i++){
if(aEle[i].className == sClass){
aResult.push(aEle[i]);//每次循环出来就存入aResult里面,push：数组后面添加新的元素。
}
}
return aResult;
}
//用法
window.onload = function () {
// 用className来选元素
var oUl = document.getElementById("ul1");
var aBox = getByClass(oUl,'box');//上面返回的return aResult是一个数组，所以需要下面循环出来，再一一添加样式
var i = 0;
for(i=0;i<aBox.length;i++){
aBox[i].style.background = "yellow";
}
}
</script>
总结，当然，这里用.box{background = "yellow"}也可以实现，如果出现为className来捆绑事件的话，可能会用到这个封装的小事件