进一步优化—IE8以下浏览器不支持document.getElementsByClassName() 访问节点；怎么解决？---封装自己的类名

最新推荐文章于 2021-11-22 09:22:46 发布
最新推荐文章于 2021-11-22 09:22:46 发布
阅读量573 收藏
点赞数
文章标签： 浏览器兼容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36146776/article/details/52903283
版权

当className有多个时，IE8以下不支持获取同时存在多个className的元素，怎么解决？？

如<div class="demo test one">123</div>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>封装Class类</title>
	<!-- 主要为了解决IE8以下浏览器不支持document.getElementsByClassName()；(通过类名访问节点) 的问题； -->
	<style type="text/css">
	div{background-color: pink;margin-top: 20px;width: 300px; height: 100px;}
	</style>
	<script type="text/javascript">
		window.οnlοad=function(){
			//获取ID下面的className
			function fn(id,classname){//封装语句
				//支持getElementsByClassName的情况下
				if(document.getElementsByClassName){
					if(id){//有ID的情况下
						var arrId=document.getElementById(id);
						return arrId.getElementsByClassName(classname);
					}else{
						return document.getElementsByClassName(classname);
					}
				}else{//不支持getElementsByClassName的情况下
					if(id){
						var arrId=document.getElementById(id);
						var dom=arrId.getElementsByClassName(classname);
						var arr=[];
						for(var i=0;i<dom.length;i++){
							var txtArr=dom[i].className.split(" ");
							for(var j=0;j<txtArr.length;j++){
								if(txtArr[j]==classname){
									arr.push(dom[i]);
								}
							}
						}
						return arr;
					}
				}
			}
			//传入数值；并调用
			fn("top","test");
			console.log(fn("top","test").length);//5	
			var aa=fn("top","test");
			console.log(aa);
			for(var i=0;i<aa.length;i++){
				aa[i].style.backgroundColor="red";
			}	
		}
	</script>
</head>
<body>
	<div></div>
	<div class="test"></div>
	<div class="demo test one">123</div>
	<div></div>
	<div id="top">
		<div class="test"></div>
		<div></div>
		<div class="demo one test">456</div>
		<div></div>
		<div class="test"></div>
		<div class="one test"></div>
		<div class="test"></div>
	</div>
	<div class="demo test">789</div>
</body>
</html>


吃瓜群众欢乐多
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML DOM中通过id，类名，标签名，选择器获得元素
需要更努力的博客
10-19 1562
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="p1"></div> <script> p1 =...
IE8、IE7、IE6中使用getElementById需要注意的问题
小飞鱼的blablabla...
10-08 8896
最近，在公司负责编写一个绩效考核模块，页面上有许多输入框，笔者就想用javascript做一下简单验证，用struts的验证比较麻烦而且增加服务器负载。笔者在公司电脑上安装了IE10、chrome、firefox、搜狗浏览器这几个比较主流的浏览器进行测试，没有发现什么问题，但是提交代码后，别人在IE8上测试出现了各种各样的问题。。。笔者表示十分郁闷！！下面是笔者写的部分js代码和html页面代码：
封装class，让className可以在IE8及其以下版本的浏览器中使用
XinYe666666的博客
06-26 412
思路：在IE8及其以下版本的浏览器中className会变为一个字符串，用split将其变为数组，用逗号隔开你所需要的class名，再建一个新数组，判断原来那个数组里面的元素有没有你需要的类名，如果有，就添加到  新数组里，最后返回新数组&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="U...
js获取某个ID的class名称
weixin_30650859的博客
09-09 898
1、HTML结构 <div id = "test" class="test_class">我的类名为test_class</div> <input type='button' value='获取div类名' onclick="fun()"/> 2、javascript代码 function fun(){ name = document.ge...
封装一个方法，getElementsByClassName,兼容IE678，实现document.getElementByClassName("“”)一样的功能
weixin_41875025的博客
03-04 462
封装思想过程： 1、获取所有标签： documeent.getElementsByTagName("*")； 2、定义一个存放元素节点的数组，[],索引从0开始； 3、遍历这个数组，选取其中类名和参数相同的元素节点，把该节点放入新的数组中 &lt;script&gt; function getElementsByClassName(str){ //封装的方法名叫getElementsBy...
js中设置元素class的三种方法小结
weixin_34032792的博客
07-15 195
一、el.setAttribute('class','abc'); 复制代码 代码如下: &lt;!DOCTYPE HTML&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;setAttribute('class', 'abc')&lt;/title&gt; &lt;style t
IE低版本不支持document.getElementsByClassName
weixin_45966674的博客
11-22 210
//如果当前浏览器没有class获取元素的方法 getElementsByClassName 那就自己声明一个getElementsByClassName if (!document.getElementsByClassName) { document.getElementsByClassName = function (className, element) { var children = (element || document).getElementsByTagNam
【常见错误】通过document.getElementsByClassName()获取的dom元素添加监听事件时报错：addEventListener is not a function
热门推荐
公众号：前端蛋卷
06-30 3万+
今天写了一个表达验证的网页，在给一个输入框添加监听事件的时候，控制台一直报错，报错原因显示Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function通过查资料得知：这是因为选择器没有正确选择元素对象document.getElementsByClassName(...)捕捉到...
解决IE8以下不支持getElementsByClassName的方法
ltx06的专栏
12-20 8811
IE8以下的浏览器中，无法通过Class标签getElementsByClassName函数获取元素。ie9以上及主流浏览器均支持通过Class获取元素，ie8及以下的解决办法： 1、可以用jQuery代替  引用jQuery后，使用$(".ClassName")等方法获取元素。 2、自己写getElementsByClassName函数方法 1
IE8状态下document.getElementByName(“aa“),都会获取到id或name为aa的元素
T_P_F的博客
09-27 368
IE8状态下document.getElementByName("aa"); 都会获取到id或name为aa的元素 也就是说document.getElementByName("aa");会获取到所有name或这id为aa的元素，这就会导致异常出现
原来IE测试兼容性问题这么简单
u012453843的专栏
07-23 1万+
在前台开发过程中，最令程序员抓狂的便是浏览器的兼容问题，不仅有不同浏览器之间的兼容问题，还有同一个浏览器不同版本之间的兼容问题，为此，我们要想让所写程序适用于所有浏览器才行，这就涉及到了调试。写完一个页面我们需要在各个主流浏览器中跑一下，如IE、火狐、Google等，今天我要说的是，如何方便的测试IE不同版本的兼容性。 1.首先我们来看一段有兼容问题的html代码(红色字体有兼容问题)
兼容更多浏览器自定义getElementsByClassName
strawberry233的博客
08-18 151
function getElementsByClassName(node,classname)     {     if(node.getElementsByClassName){     return node.getElementByClassName(classname);     }else{     var results= new Array();     var elem
document.getElementsByClassName与document.getElementById
放羊的小孩
05-04 1万+
document.getElementsByClassName()与document.getElementById()，大家应该对这两个方法都非常的不能再熟悉的js方法了，就是获取DOM元素嘛，有什么难的。今天我在这两个简单的方法上面犯了错误。我页面中有一个按钮button，把按钮的结构代码直接贴上来吧，说的不直观，直接看代码最好了。&lt;button type="button" class="...
兼容IE8以下，获取className节点的元素(document.getElementsByClassName()兼容写法)。
weixin_30814329的博客
06-25 1032
因为ie8一下不兼容 document.getElementsByClassName() 功能：通过class的名字获取符合条件的元素 node.getElementsByClassName() 指定node节点下，符合条件的元素。 所以我们...
DELPHI GetClassName - 获取指定窗口的类名
Zimmerk的杂物堆
04-15 5512
//声明:GetClassName( hWnd: HWND; {指定窗口句柄} lpClassName: PChar; {缓冲区} nMaxCount: Integer {缓冲区大小}): Integer; {返回类名大小; 失败返回 0}  //测试1: 新建一个工程, 主窗口的类名默认是 TForm1, 用程序获取一下看看
ie8及其以下浏览器的document.getElementsByClassName兼容性问题
最新发布
06-02
是的，IE8及其以下浏览器不支持document.getElementsByClassName方法。不过，你可以使用其他方法来实现类似的功能，比如使用document.getElementsByTagName方法获取所有元素，然后遍历判断每个元素的class是否符合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值