getElementsByClassName – Javascript

He encontrado un script escrito por Stephen Chapman visto en http://javascript.about.com/, el cual nos permite recuperar la colección de objetos que tienen la clase css que buscamos, el script es el siguiente:

document.getElementsByClassName = function(cl) {
    var retnode = [];
    var myclass = new RegExp('\\b'+cl+'\\b');
    var elem = this.getElementsByTagName('*');
    for (var i = 0; i < elem.length; i++) {
        var classes = elem[i].className;
        if (myclass.test(classes)) retnode.push(elem[i]);
    }
    return retnode;
};

Como podemos leer utiliza expresiones regulares para buscar entre todos los elementos que hay en el documento, y encontrar todos los que coincidan con el nombre de la clase que hay como parámetro de entrada, la verdad el script es muy bueno y muy útil, pero yo haría una ligera modificación, porque si yo sé de antemano el nombre del elemento, es decir el tag en donde esta la clase que hay que buscar, por decir todos los “button”ó todos los “div”, pues filtraria por esos elementos y no tendria que recorrer todos los elementos del documento, que en segun que casos se ralentiza, bueno hay va mi contribución:

document.getElementsByClassName = function(cl, sTagName) {
    var retnode = [];
    var myclass = new RegExp('\\b'+cl+'\\b');
    var elem = this.getElementsByTagName((sTagName===""||sTagName===null)?"*":sTagName);
    for (var i = 0; i < elem.length; i++) {
        var classes = elem[i].className;
        if (myclass.test(classes)) retnode.push(elem[i]);
    }
    return retnode;
};

El segundo parametro es una cadena de texto que contiene el nombre del tag y es opcional, si tenemos el nombre del tag (input,span,div,etc) pues filtramos un poco más la busqueda, si la cadena de texto esta vacía ó no lo pasamos pues entonces buscamos por todo el documento.

Actualización: 27 de abril del 2008

Existe un articulo escrito por Josh Resig (creador de jQuery, evangelista de javascript para la corporación Mozilla, autor del libro “Pro Javascript Techniques“) publicado en su blog personal. Nos muestra diferentes metodos de implementar la funcion getElementsByClassName en javascript, ademas de un grafico de la performance de cada implementación:

Tree Walker
http://daniel.glazman.free.fr/weblog/newarchive/2003_06_01_glazblogarc.html#s95320189

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
http://www.robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/

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 getElementsByClass
http://www.dustindiaz.com/getelementsbyclass

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 (XPath)
http://prototypejs.org/

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;
  }
};

Donde Native es la implementación de la función javascript que vendrá en Firefox 3 para invocarla directamente http://developer.mozilla.org/en/docs/DOM:document.getElementsByClassName , la especificación de HTML 5 es http://whatwg.org/specs/web-apps/current-work/#getelementsbyclassname