document.getElementsByClassName的封装,兼容ie8

时间:2021-07-29 09:32:30
function $(type){
var arr=new Array();//创建一个数组
function find(jiedian,type){//定义一个函数,带两个形参,一个是要遍历的元素节点,一个是节点的类名
if(jiedian.hasChildNodes()){//判断是否存在子节点
var childs=jiedian.childNodes;//子节点集合
for(var i=0;i<childs.length;i++){//遍历节点
if(childs[i].className==type){//节点类名判断
arr.push(childs[i]);//添加进数组
}
find(childs[i],type);//递归继往下查找
}
}
}
find(document.body,type);//查找body内的,classname为type的
return arr;//返回数组
}
 
以下为测试实例:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="../js/myclassName.js" type="text/javascript" charset="utf-8"></script><style type="text/css">div{width: 50px;height: 50px;background: red;}</style></head><body><div class="aa"></div><div class="box"><p class="box"></p></div><div class="box"><p class="box"></p></div><div class="box"></div><div class="aa"></div><script type="text/javascript">var aa=$("aa")[0];aa[0].style.background="blue";
aa[1].style.background="pink";
// var bb=document.getElementsByClassName("box")[0];// bb.style.background="pink";</script></body></html>


IE8截图:第一个div盒子为蓝色,最后一个为粉色
document.getElementsByClassName的封装,兼容ie8
谷歌截图:效果同Ie8
document.getElementsByClassName的封装,兼容ie8
今晚老师布置的作业,以前看书看到过一些关于节点的知识,w3c回顾下,经过百般调试,修成正果。0.0
js小白,如有错误或建议,可指出。