让js支持getElementsByClassName

来源：互联网发布：品质淘生活淘宝达人编辑：程序博客网时间：2024/05/21 19:49

都知道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

0 0