Javascript - Procurar elementos pelos IDs


Bom dia a todos,

Este artigo se dirige àqueles que estão saber como procurar elementos por em função do seu ID. Ou seja, quando este combina com uma expressão regular.

Problema


Vocês já conhece o métodos getElementById(id), que permite retornar o único elemento com esse ID (já que o ID é obrigatoriamente único).
Vocês também conhecem o método getElementsByTagName(tagName), que retorna uma tabela com todos os elementos com a tag indicada.

Porém, existem casos em que estas soluções não bastam.


Exemplo: você tem quadrados em seu site, quando o usuário clica em um botão, cada quadrado muda de tamanho, cada um deles com um novo tamanho que lhe é próprio. Então, você precisará fazer uma lista com seus IDs para administrá-los. Você tem duas soluções:
  • Cada vez que você adicionar um quadrado, você incrementará, manualmente, uma lista de IDs.
  • Você tem um loop que percorre o documento para encontrar os quadrados, assim o método se encaixa diretamente ao código. E é aí que o negócio complica! Como recuperar todos os IDs que se parecem, sabendo que você não sabe o número exato de quadrados (logo, nada de loop) e você não sabe onde eles estão na página (logo, nada de "while")?

Solução


Proponho aqui um método chamado getElementByRegexId. Este método tem dois parâmetros, a saber:
  • A expressão regular que deve corresponder aos IDs
  • [Fac] O nome da tag onde procurar. Se nada estiver indicado, procurar em todas as tags.



O princípio é simples: nós percorremos os elementos recuperados através do getElementsByTagName, testamos seu ID e se ele corresponder à expressão regular, o adicionamos a uma tabela.

function getElementsByRegexId(regexpParam, tagParam) {    
    //Se nenhum nome de tag for especificado, devemos procurar em todas as tags    
   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;    
  }


Exemplos de uso :
var divQuadrados = getElementsByRegexId(/_quadrado.*/, "div");    
var todososQuadrados = getElementsByRegexId(/_quadrado.*/);    


Pronto, não hesite em melhorar esta dica, adicionar opções etc etc ...

Em todos os casos, espero que ela seja útil!


Artigo original publicado por jak58. Tradução feita por pintuda. Última modificação: 28 de setembro de 2011 às 09:28 por pintuda.
Este documento, intitulado 'Javascript - Procurar elementos pelos IDs', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (https://br.ccm.net/) ao utilizar este artigo.
As pilhas e as filas em Javascript
Javascript - Trocar um "bom dia" por um "boa noite" e inversam