Browsed by
Tag: getElementsByClassName

DOM中的getElementsByClassName

DOM中的getElementsByClassName

今天在脚本中应用到了根据类名取元素的方法,却对其效率不甚满意。于是,小幅修改了其探测元素类名的方法,提升了约3成的效率.DOM中的getElementsByClassName解释如下:DOM API 中提供3种方法取元素(getElementById,getElementsByName,getElementsByTagName),经常编写CSS的人自然就会产生疑问,有没有根据样式类名取元素的方法,可惜,DOM1/2 里面都没有这样的方法,prototype 很早就扩展过DOM的方法,添加了 getElementsByClassName,从方法名上看,似乎非常正统,与前面3种方法名称也像,分析其代码,却发现还是通过 getElementsByTagName 来实现。这个方法称不上优雅,因为需要遍历所有的元素,探测元素是否包含目标样式类名,返回符合条件的元素数组。google了一下,却没有找到更优雅高效的替代方法。

function getElementsByClassName(className, parentElement){<br />var elems = ($(parentElement)||document.body).getElementsByTagName(&quot;*&quot;);<br />var result=[];<br />for (i=0; j=elems[i]; i++){<br />&nbsp;&nbsp; if ((&quot; &quot;+j.className+&quot; &quot;).indexOf(&quot; &quot;+className+&quot; &quot;)!=-1){<br />result.push(j);<br />&nbsp;&nbsp; }<br />}<br />return result;<br />}

既然有getElementsByClassName,一样可以有 getElementsByAttribute(如:getElementsByValue、getElementsByStyle、getElementsByType)

document.getElementsByClassName = function(className,oBox) {<br />//适用于获取某个HTML区块内部含有某一特定className的所有HTML元素<br />this.d= oBox || document;<br />var children = this.d.getElementsByTagName('*') || document.all;<br />var elements = new Array();<br />for (var ii = 0; ii &lt; children.length; ii++) {<br />var child = children[ii];<br />var classNames = child.className.split(' ');<br />for (var j = 0; j &lt; classNames.length; j++) {<br />if (classNames[j] == className) {<br />elements.push(child);<br />break;<br />}<br />}<br />}<br />return elements;<br />}<br /><br />document.getElementsByType = function(sTypeValue,oBox) {<br />//适用于获取某个HTML区块内部同属于某一特定type的所有HTML元素,如:input,script,link等等<br />this.d= oBox || document;<br />var children = this.d.getElementsByTagName('*') || document.all;<br />var elements = new Array();<br />for (var ii = 0; ii &lt; children.length; ii++) {<br />if (children[ii].type == sTypeValue) {<br />elements.push(children[ii]);<br />}<br />}<br />return elements;<br />}<br /><br />function $() {<br />var elements = new Array();<br />for (var ii = 0; ii &lt; arguments.length; ii++) {<br />var element = arguments[ii];<br />if (typeof element == 'string')<br />element = document.getElementById(element);<br />if (arguments.length == 1)<br />return element;<br />elements.push(element);<br />}<br />return elements;<br />}<br /><br />$Cls = function (s,o){<br />return document.getElementsByClassName(s,o);<br />};<br /><br />$Type = function (s,o){<br />return document.getElementsByType(s,o);<br />};<br /><br />$Tag = function (s,o){<br />this.d=o || document;<br />return this.d.getElementsByTagName(s);<br />};<br /><br />$Name = function (s){ //通过name的方式只能针对整个document而言,不能为其限定范围<br />return document.getElementsByName(s);<br />