让js支持getElementsByClassName

最新推荐文章于 2024-04-02 20:25:59 发布

置顶 haiqiancun

最新推荐文章于 2024-04-02 20:25:59 发布

阅读量3.8k

点赞数

分类专栏： js 文章标签： js getElementsByClassNa haiqiancun ie firefox

本文链接：https://blog.csdn.net/zyx13859002783/article/details/38434501

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

都知道document.getElementsByClassName这个方法只能在ie8以上的浏览器使用，也就是说getElementsByClassName是在支持html5的浏览器下才能执行。

为了让ie9以下的浏览器能够支持这个方法于是我自己写了个getElementsByClassName脚本方法让浏览器也能够像jquery那样拿到Class就能获取对象。

为了测试方法的通用性我已用 ie、firefox 、chrome 、safari 进行测试，结果令我很满意，都能完美运行。

一下是我实现的源码看起里会比较乱，只要复制出来运行就可以看到效果，或者可以狠狠点击这里看例子

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>getElementsByClassName</title>
	</head>
	<body>
	<div class="test id">1</div>
	<div class="test454545454">2</div>
	<p class="test454545454">12</p>
	&lt;div class=&quot;test id&quot;&gt;1&lt;/div&gt;<br />
	&lt;div class=&quot;test454545454&quot;&gt;2&lt;/div&gt;<br />
	&lt;p class=&quot;test454545454&quot;&gt;12&lt;/p&gt;<br />
	&lt;script&gt;<br />
	function getElementsByClassName(className){<br />
	&nbsp;&nbsp; &nbsp;var elems = [];<br />
	&nbsp;&nbsp; &nbsp;if(!document.getElementsByClassName){<br />
	&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var dom = document.getElementsByTagName(&quot;*&quot;);<br />
	&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;for(var i =0 ;i&lt;dom.length;i++){<br />
	&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if(dom[i].className){<br />
	&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var classs = dom[i].className.split(&quot; &quot;);<br />
	&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;for(var c = 0;c&lt;classs.length;c++){<br />
	&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if(classs[c]==className){<br />
	&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;elems.push(dom[i]);&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<br />
	&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br />
	&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br />
	&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br />
	&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br />
	&nbsp;&nbsp; &nbsp;}else{<br />
	&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var dom = document.getElementsByClassName(className);<br />
	&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;for(var i =0 ;i&lt;dom.length;i++){<br />
	&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;elems.push(dom[i]);&nbsp;&nbsp; &nbsp;<br />
	&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br />
	&nbsp;&nbsp; &nbsp;}<br />
	&nbsp;&nbsp; &nbsp;return elems;<br />
	}<br />
	<br />
	var testElemt = getElementsByClassName(&quot;test454545454&quot;);<br />
	for(var i =0 ;i&lt;testElemt.length;i++){<br />
	&nbsp;&nbsp; &nbsp;alert(&quot;testElemt &quot;+testElemt[i].innerHTML);&nbsp;&nbsp; &nbsp;<br />
	}<br />
	&lt;/script&gt;
	<script>
	function getElementsByClassName(className){
	    var elems = [];
	    if(!document.getElementsByClassName){
	        var dom = document.getElementsByTagName("*");
	        for(var i =0 ;i<dom.length;i++){
	            if(dom[i].className){
	                var classs = dom[i].className.split(" ");
	                for(var c = 0;c<classs.length;c++){
	                    if(classs[c]==className){
	                        elems.push(dom[i]);            
	                    }
	                }
	            }
	        }
	    }else{
	        var dom = document.getElementsByClassName(className);
	        for(var i =0 ;i<dom.length;i++){
	            elems.push(dom[i]);    
	        }
	    }
	    return elems;
	}
	

	var testElemt = getElementsByClassName("test454545454");
	for(var i =0 ;i<testElemt.length;i++){
	    alert("testElemt "+testElemt[i].innerHTML);    
	}
	</script>
	</body>
	</html>

原文地址 http://haiqiancun.com/bbs/bbsPage/0/detail/297e9e7946a599780146a5a38dde0003/1/20140806112531

haiqiancun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
让js支持getElementsByClassName

都知道document.getElementsByClassName这个方法只能在ie8以上的浏览器使用，也就是说getElementsByClassName是在支持html5的浏览器下才能执行。为了让ie9以下的浏览器能够支持这个方法于是我自己写了个getElementsByClassName脚本方法让浏览器也能够像jquery那样拿到Class就能获取对象。为了测试方法的通用性我已用
复制链接

扫一扫