Js关于getElmentsByClassName()的兼容与封装

最新推荐文章于 2024-06-25 01:50:37 发布

F__Rong

最新推荐文章于 2024-06-25 01:50:37 发布

阅读量1.4k

点赞数

分类专栏： JS笔记文章标签： javascript getElmentsByClassNam 兼容 DOM getelemetbyid

本文链接：https://blog.csdn.net/F__Rong/article/details/76516170

版权

JS笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

getElmentsByClassName()的兼容与封装

一.思路

我们知道getElmentsByClassName()是通过类名来获取标签，但在IE6、7、8中，它存在一丢丢的兼容问题。为解决这个兼容问题，我们的大体思路是封装函数，在函数里先判断浏览器是否支持getElmentsByClassName()，如果支持则直接返回，如果不支持就得进行判断了。
如果浏览器不支持：通过getElmentsByTagName("*")获得所有的标签，进行遍历，通过判断当前标签的ClassName与所要查找的是否一样再进行下一步，如果不一样不进行操作，如果一样则将其留下。
关于classname一样的如何留下：提前声明一个空的数组，如果一样则将其推进push();数组中。

二. 初步封装

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 150px;
				height: 150px;
				background-color: pink;
				margin: 10px;
			}
			.demo{
				background-color: red;
			}
		</style>
		<script>//封装类名
			window.onload=function(){
				//var dom=document.getElementsByClassName("demo");主流浏览器
				function getclass(classname)
				{//如果浏览器支持，则直接返回
					if(document.getElementsByClassName)
					{
						return document.getElementsByClassName(classname);//不用加else 因为return直接返回了
					}
					var arr=[];//用于存放满足的数组
					var dom=document.getElementsByTagName("*");//所有的，遍历，判断
					for (var i=0;i<dom.length;i++) {
						if(dom[i].className==classname)
						{//推进数组里面
							arr.push(dom[i]);
						}
					}
					return arr;//返回符合的
				}
				getclass("demo");
				alert(getclass("demo").length);//该类名标签的个数
			}
		</script>
	</head>
	<body>
		<div></div>
		<div class="demo"></div>
		<div></div>
		<div></div>
		<div class="demo"></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div class="demo"></div>
	</body>
</html>

效果：

三. 封装类名（分割）

当类名中包含几个类时上面的方法就不完善了，因此我们要把每个标签的类名分割后再进行判断。
关于分割：分割可以利用将字符串转换为数组，当然每个小类之间转换符号是空格，因此split(" ");
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 150px;
				height: 150px;
				background-color: pink;
				margin: 10px;
			}
			.text{
				background-color: red;
			}
		</style>
		<script>//封装类名
			window.onload=function(){
				//var dom=document.getElementsByClassName("demo");主流浏览器
				function getclass(classname)
				{//如果浏览器支持，则直接返回
					if(document.getElementsByClassName)
					{
						
						return document.getElementsByClassName(classname);//不用加else 因为return直接返回了
					}
					var arr=[];//用于存放满足的数组
					var dom=document.getElementsByTagName("*");//所有的，遍历，判断
					for (var i=0;i<dom.length;i++) {
						var txt=dom[i].split(" ");//分割此标签的小类名  在小类名里面遍历看是否有一样的
						for (var j=0;j<txt.length;j++) {
							if(txt[j]==classname)
							{//存在符合的类  向arr数组中推dom
								arr.push(dom[i]);
							}
						}
					}
					return arr;//返回符合的
				}
				getclass("text");
				alert(getclass("text").length);该类名标签的个数
			}
		</script>
	</head>
	<body>
		<div></div>
		<div class="demo"></div>
		<div></div>
		<div class="text"></div>
		<div class="demo"></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div class="demo text"></div>
	</body>
</html>

效果：

四.添加id

如果只想选择某个div（有id）下面的某类标签，则需要再向函数传递id作为形参判断，先判断浏览器是否支持，再判断是否有id,其他思路同前。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 150px;
				height: 150px;
				background-color: pink;
				margin: 10px;
			}
			#one .text{
				background-color: red;
			}
		</style>
		<script>//封装类名
			window.onload=function(){
				function getclass(classname,id){
					if(document.getElementsByTagName)//游览器支持
					{	//有id的时候
						if(id)
						{
							var eleid=document.getElementById(id);
							return eleid.getElementsByClassName(classname);
						}
						else	//没有id的时候
						{
							return document.getElementsByClassName(classname);
						}
					}//不支持的时候
					if(id)
					{
						var eleid=document.getElementById(id);
						var dom=eleid.getElementsByTagName("*");//获取id下面的所有元素	
					}
					else{
						var dom=document.getElementsByTagName("*");
					}
					var arr=[];//用于存放满足的数组
					var dom=document.getElementsByTagName("*");//所有的，遍历，判断
					for (var i=0;i<dom.length;i++) {
						var txt=dom[i].split(" ");//分割此标签的小类名  在小类名里面遍历看是否有一样的
						for (var j=0;j<txt.length;j++) {
							if(txt[j]==classname)
							{//存在符合的类  向arr数组中推dom
								arr.push(dom[i]);
							}
						}
					}
					return arr;//返回符合的
				}
				getclass("text","one");
				alert(getclass("text","one").length);
			}
		</script>
	</head>
	<body>
		<div></div>
		<div class="demo"></div>
		<div></div>
		<div class="text"></div>
		<!--只需要#one里的 .text-->
		<div id="one">
			<div class="demo"></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div class="demo text"></div>
		</div>	
	</body>
</html>