兼容IE678
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 10px;
}
</style>
</head>
<body>
<div id="demo"></div>
<div></div>
<div></div>
<div class="one"></div>
<div class="there one"></div>
<div></div>
<div></div>
<div class="one two"></div>
<div></div>
<div id="last"></div>
</body>
</html>
<script>
//封装className
//遍历document.getElementByClassName();
function getByClass(classname){
if(document.getElementByClassName){
return document.getElementByClassName(classname);
}else{
var dom=document.getElementsByTagName("*");
var newArr=[];
for(var i=0;i<dom.length;i++){
var nowArr=dom[i].className.split(" ");//得到新的数组
for(var j=0;j<nowArr.length;j++){
if(nowArr[j]==classname){
newArr.push(dom[i]);
}
}
}
return newArr;
}
}
//调用
//alert(getByClass("one").length);
//封装 str有可能是#demo,.one,div
function $(str){
var s=str.charAt(0);// 得到的可能是"#",".","其他";
var ss=str.slice(1);//得到"demo","one"等
switch(s){
case "#":return document.getElementById(ss);break;
case ".":return getByClass(ss);break;
default:return document,getElementsByTagName(str);
}
}
//调用
$("#demo").style.backgroundColor="red";
// alert($(".one").length);
for(var i=0;i<$(".one").length;i++){
$(".one")[i].style.backgroundColor="blue";
}
</script>