效果图:
CSS部分:
.active{
width: 100px;
height: 100px;
background-color: red;
}
HTML部分:
<div class="goal" >DDDDDDD
<div class="show">EEEEEEEEE
<div class="how">FFFFFFFFF</div>
</div>
</div>
<div class="day" >AAAAAAA
<div class="night">GGGGGGGGGGG
<div class="today">
HHHHHHHHHHHHH
</div>
</div>
</div>
<div class="same" >BBBBBBB
<div class="today go">
HHHHHHHHHHHHH
</div>
</div>
<div class="idol" >CCCCCCCCC
<div class="today ccc">
HHHHHHHHHHHHH
</div>
</div>
JS部分:
window.onload=function(){
var father=document.body;//选择父节点
//调用getClassName的替代函数,将today类名的节点选出来
var goal=getget('today',father);
for(var i=0;i<goal.length;i++){//将选择出来的节点上色
goal[i].className='active';
}
//getget方法为兼容IE8的函数,传入两个参,类名和父节点
function getget(str,father){
var arr=[];//创建数组,存放所有的节点包括子节点,孙节点等
function find(father){//自定义的find方法,采用递归将节点放入数组
var son=father.children;
for(var i=0;i<son.length;i++){
if(son[i].children.length>0){
arr.push(son[i]);
find(son[i]);
}
else{
arr.push(son[i]);
}
}
return arr;
}
var newArr=find(father);
var finalArr=[];//新数组存放包含所需类名的节点
//对arr筛选,选出带有我们所需类名的节点并存放入newArr
for(var i=0;i<newArr.length;i++){
strArr=newArr[i].className.split(' ');
for(var j=0;j<strArr.length;j++){
if(str==strArr[j]){
finalArr.push(newArr[i]);
}
}
}
return finalArr;
}
}