O Básico da web

Como selecionar elementos HTML via JavaScript/DOM

Algumas pessoas me escreveram e-mails com dúvidas sobre seleção de elementos HTML em JavaScript, a maioria delas com dúvidas relacionadas ao artigo sobre títulos editáveis, que publiquei por aqui há algum tempo atrás. Por isso resolvi escrever este artigo sobre esse tema tão simples, mas ao mesmo tempo tão vital para o desenvolvedor JavaScript.

Os “ganchos”

Para selecionar um elemento HTML e poder manipulá-lo via JavaScript/DOM você precisa primeiro ter algo que identifique esse elemento. Um “gancho” (em inglês, hook).

Este gancho pode ser:

• o ID do elemento
• um nome de classe
• um nome de tag (DIV, SPAN, P, A, etc)
• Um atributo ou valor de atributo específico

Dependendo do tipo de gancho usado, seu trabalho pode ser mais simples ou mais complexo. Vamos ver caso a caso.

Um elemento ou vários elementos?

Quando “pescamos” elementos HTML via JavaScript/DOM, o que temos como retorno pode ser um elemento específico ou um conjunto de elementos (um Array de elementos, pra ser mais específico).

Na verdade, o que manipulamos via JavaScript são referências a elementos HTML. Ou seja, uma variável que “aponta” para o elemento e que, uma vez modificada, reflete as modificações no elemento em si. Mas não se preocupe com isso agora. Trate as referências como elementos de fato caso isso torne as coisas mais simples de abstrair pra você.

Selecionando elementos pelo ID

A única forma de selecionar um elemento específico sem nenhum esforço extra é usando o ID do elemento como gancho. Para isso usamos o método document.getElementById().

A sintaxe deste método é simples: var elemento = document.getElementById("id_do_elemento");

Exemplo:

HTML:
<span id="preco">R$ 1500,00</span>
JavaScript:
var preco = document.getElementById('preco');

Feito isso, você pode, por exemplo, exibir um alerta com o conteúdo do elemento, assim: alert(preco.innerHTML).

E é isso. Selecionar um elemento pelo ID é muito simples. Mas nem sempre temos um ID disponível, por isso vamos ver como selecionar elementos usando outros tipos de ganchos.

Selecionando vários elementos: o processo básico

Quando você não tem um ID disponível para selecionar um elemento específico, a única opção é selecionar diversos elementos e depois “pescar” aquele ou aqueles que te interessam.

Basicamente, tudo começa com o método document.getElementsByTagName(). Como o nome já diz, este método seleciona elementos por nomes de tags.

Feito isso, basta iterar pelos elementos, usando loops (em geral, for) e, de acordo com determinadas condições, separar os elementos com os quais você precisa trabalhar. Vamos ver os exemplos mais comuns.

Seleção por nome de classe

Imagine que você quer selecionar todos os elementos que tenham a classe “preco”. Não importa se o elemento é um DIV, um SPAN ou qualquer outro, desde que tenha a classe “preco”, ele te interessa.

Para isso você vai precisar, antes de qualquer outra coisa, selecionar todos os elementos da página de uma só vez. Isto é muito simples, veja:

var todos_elementos = document.getElementsByTagName('*');

Neste caso, todos_elementos é um Array contendo todos os elementos da página. Não vou entrar em detalhes sobre Arrays por aqui. Se você já programou, em praticamente qualquer linguagem, já deve conhecê-los. Caso contrário, continue lendo que acho que vai dar pra entender mesmo assim.

Agora vamos fazer um for para percorrer todos os elementos do nosso array e selecionar apenas aqueles que têm a classe que nos interessa. Vamos assumir, para simplificar os exemplos, que você quer os elementos que tenham apenas a classe “preco”. Elementos com mais de uma classe ficam de fora.

var precos = Array();
for (var i=0; i<todos_elementos.length; i++){
  var el = todos_elementos[i];
  if (el.className == 'preco'){
    precos.push(el);
  }
}

O código acima pega todos os elementos com a classe “preco” e joga dentro de um outro Array, “precos”. Agora você pode iterar por este Array e fazer o que quiser com seus elementos.

Seleção por nome de tag

Para selecionar elementos pelo nome da tag, o método usado é o mesmo document.getElementsByTagName() e o processo é exatamente igual ao descrito acima.

Por exemplo, vamos selecionar todos os DIVs da nossa página:

var divs = document.getElementsByTagName('div');

Simples assim.

Se você quiser selecionar diretamente, por exemplo, o primeiro DIV da página, use o seguinte:

var div = document.getElementsByTagName('div')[0];

Seleção por um atributo específico

Aqui a coisa funciona da mesma maneira que a seleção por classe. Vamos selecionar, por exemplo, todos os links (tag A) com o atributo rel=”nofollow”:

var links = document.getElementsByTagName('a');
for (var i=0; i<links.length; i++){
  var link = links[i];
  var rel = link.getAttribute('rel');
  if (rel && rel == 'nofollow'){
   link.className = 'nofollow';
  }
}

O código acima atribui a classe “nofollow” a todos os links com rel=”nofollow”. Com isso podemos, por CSS, aplicar uma cor diferente nesses links, por exemplo.

Como vocês podem ver, selecionar elementos via JavaScript/DOM não é nada complicado. Espero que a explicação tenha sido clara e aguardo as opiniões — e, mais importante, as dúvidas — de vocês.

Leia também:

• Padrões web: Desenvolvimento em camadas – Camada de comportamento
• Como criar elementos HTML via JavaScript/DOM
• HTML – Esqueleto de um documento HTML – Parte 2: HTML e HEAD
• HTML – Esqueleto de um documento HTML – Parte 3: Outros elementos do HEAD
• HTML – Esqueleto de um documento HTML – Parte 1: DOCTYPE
• Hospedagem de sites Dreamhost: 50% de desconto