document.getElementsByClassName的封装，兼容ie8

来源：互联网发布：sql统计总金额编辑：程序博客网时间：2024/05/16 19:35

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盒子为蓝色,最后一个为粉色
谷歌截图：效果同Ie8
今晚老师布置的作业，以前看书看到过一些关于节点的知识，w3c回顾下，经过百般调试，修成正果。0.0
js小白，如有错误或建议，可指出。

阅读全文

0 0