Como selecionar elementos HTML via JavaScript DOM

Como selecionar elementos HTML via JavaScript DOM

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:

R$ 1500,00

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