<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background: pink;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
<div class="demo"></div>
<div class="test"></div>
<div class="demo test one"></div>
<div class="demo one"></div>
<div></div>
<div id="one">
<div class="demo test one"></div>
<div class="demo one"></div>
<div class="test"></div>
<div class="demo"></div>
<div></div>
</div>
<div class="demo"></div> </body>
</html>
<script>
// document.getElementsByClassName()方法存在兼容性问题。不支持IE6,7,8，因此需要对其兼容性进行封装；
window.onload=function(){
// 默认第一个应该是class
function getClass(classname,id) {
if(document.getElementsByClassName){
if(id)
{
var eleId=document.getElementById(id);
return eleId.getElementsByClassName(classname);
}
else{//没有id
return document.getElementsByClassName(classname);
}
}
// 不支持情况也分为有没有id
if(id){
var eleId=document.getElementById(id);
var dom=eleId.getElementsByTagName('*');
}else{
var dom=eleId.getElementsByTagName('*'); }
var arr=[];
for(var i=0;i<dom.length;i++ ){
var txtarr=dom[i].className.split(' ');
for(var j=0;j<txtarr.length;j++){
if(txtarr[j].className==classname)
{
arr.push(dom[i]);
}
}
}
return arr;
}
// console.log(getClass('test','one'));
var aa=getClass('test','one');
for(var i=0;i<aa.length;i++){
aa[i].style.backgroundColor='purple';
}
}
</script>