Este articulo está dirigido a todos los que se preguntan cómo buscar elementos en función de su ID. Es decir cuando corresponde a una expresión regular.
Problema
Probablemente ya conozcas el método
getElementById(id) que permite obtener la referencia a un elemento mediante su ID (este ID es único)
Quizás también conozcas el método
getElementsByTagName(tagName) que devuelve un arreglo conteniendo todos los elementos que poseen el tag indicado.
Pero existen casos en el que estas dos soluciones no son suficientes.
Por ejemplo, si tienes cuadros en tu sitio; cuando el usuario hace clic en un botón, cada cuadro cambia de tamaño, cada uno con un nuevo tamaño que le es propio. Entonces necesitarás tener la lista de sus IDs para poder manejarlos. Aquí tienes dos soluciones:
- Cada vez que agregues un cuadro, incrementas la lista de IDs
- Creas un bucle que examine el documento en busca de cuadros, de este modo el método se adapta directamente al código. Pero, cómo obtener todos los IDs, sabiendo que no conoces el número exacto de cuadros (por tanto no hay bucle) y que no sabes dónde se encuentran en la página (por lo tanto no hay while).
Solución
Existe un método llamado
getElementByRegexId. Este método necesita dos parámetros, a saber:
- La expresión regular a la que deben corresponder los IDs.
- [Fac] El nombre de la etiqueta en la que se buscará. Si no se indica nada, se busca en todas las etiquetas.
El principio es simple: se examinan los elementos obtenidos mediante getElementsByTagName, se prueban sus ID y si corresponden a la expresión regular, se le agrega a un arreglo.
function getElementsByRegexId(regexpParam, tagParam) {
// Si no se especifica el nombre de una etiqueta, se busca en todas las etiquetas
tagParam = (tagParam === undefined) ? '*' : tagParam;
var elementsTable = new Array();
for(var i=0 ; i<document.getElementsByTagName(tagParam).length ; i++) {
if(document.getElementsByTagName(tagParam)[i].id && document.getElementsByTagName(tagParam)[i].id.match(regexpParam)) {
elementsTable.push(document.getElementsByTagName(tagParam)[i]);
}
}
return elementsTable;
}
Ejemplos de uso :
var divCuadros = getElementsByRegexId(/_cuadro.*/, "div");
var tousLesCuadros = getElementsByRegexId(/_cuadro.*/);
Véase también
Comunidad de asistencia y consejos.
El artículo original fue escrito por
Mihawk. Traducido por
Carlos-vialfa.
