Javascript - Procurar elementos pelos IDs

Novembro 2016


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!


Tradução feita por Lucia Maurity y Nouira

Veja também :
Este documento, intitulado « Javascript - Procurar elementos pelos IDs »a partir de CCM (br.ccm.net) está disponibilizado sob a licença Creative Commons. Você pode copiar, modificar cópias desta página, nas condições estipuladas pela licença, como esta nota aparece claramente.