JavaScript正则比较两个字符串 jQuery起点教程之Animate

DOM中的getElementsByClassName

今天在脚本中应用到了根据类名取元素的方法,却对其效率不甚满意。于是,小幅修改了其探测元素类名的方法,提升了约3成的效率.DOM中的getElementsByClassName解释如下:DOM API 中提供3种方法取元素(getElementById,getElementsByName,getElementsByTagName),经常编写CSS的人自然就会产生疑问,有没有根据样式类名取元素的方法,可惜,DOM1/2 里面都没有这样的方法,prototype 很早就扩展过DOM的方法,添加了 getElementsByClassName,从方法名上看,似乎非常正统,与前面3种方法名称也像,分析其代码,却发现还是通过 getElementsByTagName 来实现。这个方法称不上优雅,因为需要遍历所有的元素,探测元素是否包含目标样式类名,返回符合条件的元素数组。google了一下,却没有找到更优雅高效的替代方法。
function getElementsByClassName(className, parentElement){
var elems = ($(parentElement)||document.body).getElementsByTagName("*");
var result=[];
for (i=0; j=elems[i]; i++){
  if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1){
   result.push(j);
  }
}
return result;
}
既然有getElementsByClassName,一样可以有 getElementsByAttribute(如:getElementsByValue、getElementsByStyle、getElementsByType)
document.getElementsByClassName = function(className,oBox) {
//适用于获取某个HTML区块内部含有某一特定className的所有HTML元素
this.d= oBox || document;
var children = this.d.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var ii = 0; ii < children.length; ii++) {
var child = children[ii];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
}

document.getElementsByType = function(sTypeValue,oBox) {
//适用于获取某个HTML区块内部同属于某一特定type的所有HTML元素,如:input,script,link等等
this.d= oBox || document;
var children = this.d.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var ii = 0; ii < children.length; ii++) {
if (children[ii].type == sTypeValue) {
elements.push(children[ii]);
}
}
return elements;
}

function $() {
var elements = new Array();
for (var ii = 0; ii < arguments.length; ii++) {
var element = arguments[ii];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}

$Cls = function (s,o){
return document.getElementsByClassName(s,o);
};

$Type = function (s,o){
return document.getElementsByType(s,o);
};

$Tag = function (s,o){
this.d=o || document;
return this.d.getElementsByTagName(s);
};

$Name = function (s){ //通过name的方式只能针对整个document而言,不能为其限定范围
return document.getElementsByName(s);
};
TAG: dom element classname
kimi post in JavaScript教程 at 2007-09-28 22:53:46.
永久地址:http://ijavascript.cn/jiaocheng/dom-getelementsbyclassname-171.html
在百度中搜索《DOM中的getElementsByClassName》。

发表评论

发表评论

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

网友评论仅供网友表达个人看法,并不表明本网同意其观点或证实其描述。