document.getElementsByClassName的封装，兼容ie8

最新推荐文章于 2022-07-21 15:32:51 发布

YanTuTwo

最新推荐文章于 2022-07-21 15:32:51 发布

阅读量457

点赞数

分类专栏：前端学习从入门到翻车文章标签： javascript 前端遍历函数 ie 8

本文链接：https://blog.csdn.net/YanTuTwo/article/details/77102627

版权

前端学习从入门到翻车专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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小白，如有错误或建议，可指出。

YanTuTwo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
document.getElementsByClassName的封装，兼容ie8

function $(type){ var arr=new Array();//创建一个数组 function find(jiedian,type){//定义一个函数，带两个形参，一个是要遍历的元素节点，一个是节点的类名 if(jiedian.hasChildNodes()){//判断是否存在子节点 var childs=jiedian.childNodes;//子节点集合 f
复制链接

扫一扫