aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Hace unos días comentabamos que Firefox 3 implementará una versión nativa de getElementByClassName. John Resig, creador de jQuery ha publicado una comparativa entre las diferentes versiones de esta función en javascript.

Tree Walker [url]

document.getElementsByClass = function(needle) {
 function acceptNode(node) {
   if (node.hasAttribute("class")) {
     var c = " " + node.className + " ";
      if (c.indexOf(" " + needle + " ") != -1)
        return NodeFilter.FILTER_ACCEPT;
   }
   return NodeFilter.FILTER_SKIP;
 }
 var treeWalker = document.createTreeWalker(document.documentElement,
     NodeFilter.SHOW_ELEMENT, acceptNode, true);
 var outArray = new Array();
 if (treeWalker) {
   var node = treeWalker.nextNode();
   while (node) {
     outArray.push(node);
     node = treeWalker.nextNode();
   }
 }
 return outArray;
}

The Ultimate getElementsByClassName [url]

 function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];      
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }   
    }
    return (arrReturnElements)
}

Dustin Diaz’s getElementByClass [url]

function getElementsByClass(searchClass,node,tag) {
       var classElements = new Array();
       if ( node == null )
               node = document;
       if ( tag == null )
               tag = '*';
       var els = node.getElementsByTagName(tag);
       var elsLen = els.length;
       var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
       for (i = 0, j = 0; i < elsLen; i++) {
               if ( pattern.test(els[i].className) ) {
                       classElements[j] = els[i];
                       j++;
               }
       }
       return classElements;
}

Prototype 1.5.0 [url]

document.getElementsByClassName = function(className, parentElement) {
 if (Prototype.BrowserFeatures.XPath) {
   var q = ".//*[contains(concat(' ', @class, ' '), ' " + className + " ')]";
   return document._getElementsByXPath(q, parentElement);
 } else {
   var children = ($(parentElement) || document.body).getElementsByTagName('*');
   var elements = [], child;
   for (var i = 0, length = children.length; i < length; i++) {
     child = children[i];
     if (Element.hasClassName(child, className))
       elements.push(Element.extend(child));
   }
   return elements;
 }
};

Nativa en Firefox 3 [url]

document.getElementsByClassName

Pruebas 

Para las pruebas ha copiado la página de inicio de Yahoo dentrode un HTML estático y ha realizado la misma operación de seleccionar los elelemtos de una determinada clase dentro del fichero. 

Resultados

Creo que no hace falta comentar nada acerca de los resultado obtenidos, la imagen habla por si misma. 

Conclusiones 

Queda claro, que todo lo que esté declarado en el nucleo del navegador es, y vá a ser más rápido que cualquier otro método. Así que me parece un gran acierto que integren esta función dentro del corazón de Firefox y espero que los demás navegadores sigan su ejemplo.