Robert Nyman publicó en 2005 un artículo en el que mostraba la «Ultimate getElementsByClassName
«, una función desarrollada en Javascript que sin necesidad de usar ningún tipo de framework nos permite obtener todos los elementos de una misma clase pasada por parámetro.
Ultimate getElementsByClassName (2005)
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)
}
Esta funcionalidad que actualmente está contemplada para el estandar y que será integrada en todos los navegadores futuros, nos ahorrará muchas líneas de código cuando esté implementada como parte del núcleo del navegador.
Robert ha desarrollado de nuevo la función, añadiéndole una serie de mejoras que han hecho crecer considerablemente la función:
Ultimate getElementsByClassName (2008)
/*
Developed by Robert Nyman, http://www.robertnyman.com
Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = function (className, tag, elm){
if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, elm) {
elm = elm || document;
var elements = elm.getElementsByClassName(className),
nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
returnElements = [],
current;
for(var i=0, il=elements.length; i<il; i+=1){
current = elements[i];
if(!nodeName || nodeName.test(current.nodeName)) {
returnElements.push(current);
}
}
return returnElements;
};
}
else if (document.evaluate) {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = "",
xhtmlNamespace = "http://www.w3.org/1999/xhtml",
namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
returnElements = [],
elements,
node;
for(var j=0, jl=classes.length; j<jl; j+=1){
classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
}
try {
elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
}
catch (e) {
elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
}
while ((node = elements.iterateNext())) {
returnElements.push(node);
}
return returnElements;
};
}
else {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = [],
elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
current,
returnElements = [],
match;
for(var k=0, kl=classes.length; k<kl; k+=1){
classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
}
for(var l=0, ll=elements.length; l<ll; l+=1){
current = elements[l];
match = false;
for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
match = classesToCheck[m].test(current.className);
if (!match) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
};
}
return getElementsByClassName(className, tag, elm);
};
Nuevas funcionalidades
- Utiliza
getElementsByClassName
nativo si está disponible - Utiliza
XPath
nativo si está disponible - Soporta múltiples
class
en una misma petición - Devuelve un
array
con el que trabajar.
Modo de uso
La función puede recibir 3 parámetros:
- class: El class que estamos buscando. Obligatorio.
- tag: El tag que contiene la class. Opcional.
- elm: Elemento padre desde el que empezar a buscar.Opcional
getElementsByClassName(class, tag, elm);
// Ejemplos
getElementsByClassName("rojo"); // Todos los elementos con class="rojo"
getElementsByClassName("rojo azul grande"); //Todos los elements con class="rojo", class="azul",...
getElementsByClassName("rojo", "p"); //Todas las P con class="rojo"
getElementsByClassName("rojo", "p", document.getElementById("content")); // Todas las P con class="rojo" en el elemento content e hijos.
Para realizar una búsqueda por más de una class, deberemos separarlas por espacios en el parámetro class.
6 comentarios, 3 referencias
+
#