Javascript - Buscar elementos por IDs

Diciembre 2016


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.*/);   



Consulta también :
El documento «Javascript - Buscar elementos por IDs» de CCM (es.ccm.net) se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo siempre y cuando respetes las condiciones de dicha licencia y des crédito a CCM.