document.getElementsByClassName的理想实现

document.getElementsByClassName的理想实现

各种实现方式

Pure DOM

通常先使用getElementsByTagName("*")取出文档中所有元素，然后进行遍历，使用正则表达式找出匹配的元素放入一个数组返回。由于IE5不支持document.getElementsByTagName("*")，要使用分支document.all以防错误。

The Ultimate getElementsByClassName方案，作者为Robert Nyman，05年实现，可见老外许多东西在很早以前就走得很远了。

另一个实现，由Dustin Diaz（《JavaScript Design Patterns》的作者）提供，但兼容性不如上面的，不支持IE5。

还有个更古老级的，我从prototype.js1.01版本中找到的，它能支持多个类名的查找（上面两个不行）。它不支持IE5，效率一般般，但作为最早的框架之一，它已经做得很好，其他框架还没有想到这个呢！

DOM Tree Walker

使用document.createTreeWalker，这是个比较不常用的二级DOM方法。可惜IE全系列歇菜。

XPath

更加新式时髦的技术。

下面取自Prototype.js框架。

由于这个是不能运行的，我们修改如下：

当然如果游览器原生支持，就用原生的。

各主流游览器的支持情况
IE8	IE7	IE6	FF3	FF2	Saf3	Op9	Op10	Chrome
N	N	N	Y	N	Y	Y	Y	Y

速度比较一览

综合以上方案，我得出了一个最理想的实现——兼容IE5，让后面两个参数是可选的，能原生的原生，利用字面量与倒序循环提高效率……

用法：

但它还是不如原生的getElementsByClassName，不能同时检索多个class

<h2 class="red cell title">安装支持</h2>

<span class="cell red  ">jjj</span>

<div class="filament_table  red cell">这是DIV</div>

#利用 var dd = getElementsByClassName("cell red") ，这三个元素都应该能被检索到！

因此，最最终的方案为：

var getElementsByClassName = function (searchClass, node,tag) {
if(document.getElementsByClassName){
var nodes =  (node || document).getElementsByClassName(searchClass),result = [];
for(var i=0 ;node = nodes[i++];){
if(tag !== "*" && node.tagName === tag.toUpperCase()){
result.push(node)
}
}
return result
}else{
node = node || document;
tag = tag || "*";
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
patterns = [],
current,
match;
var i = classes.length;
while(--i >= 0){
patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
}
var j = elements.length;
while(--j >= 0){
current = elements[j];
match = false;
for(var k=0, kl=patterns.length; k<kl; k++){
match = patterns[k].test(current.className);
if (!match)  break;
}
if (match)  result.push(current);
}
return result;
}
}