Outros métodos getElement
Até este momento utilizamos apenas o método getElementById para selecionar elementos html da página. Vamos agora conhecer outros métodos comuns.
getElementsByClassName
Pelo nome deste método é fácil supor o que ele faz, seleciona elementos que tenham uma classe específica. Diferentemente dos ids, que só podem pertencer a um elemento na página, uma classe pode ser compartilhada por vários elementos, por isso este método retornará um array composto por vários objetos, também chamados de nós (nodes). Cada objeto é um elemento html que possui a classe selecionada.
<div class="exemplo">Elemento 1</div>
<div class="exemplo">Elemento 2</div>
<div class="exemplo">Elemento 3</div>
var elementos = document.getElementsByClassName("exemplo");
console.log(elementos);
// O console retornará um array: [ {...}, {...}, {...} ]
// Cada um destes objetos é um dos elementos que possuem a classe "exemplo".
Os objetos deste array podem ser acessados por meio do índice, neste caso [0], [1] e [2]. Para alterar as suas propriedades, como a innerHTML, ou as propriedades css, é preciso definir o índice:
elementos[0].innerHTML = "Texto do elemento 1";
getElementsByTagName
O funcionamento deste método é muito parecido com o anterior, mas em vez de selecionar classes, este seleciona elementos com uma tag específica (como div, h1, p, img, etc).
<p>Parágrafo 1</p>
<p>Parágrafo 2</p>
<p>Parágrafo 3</p>
Parágrafo 1
Parágrafo 2
Parágrafo 3
var paragrafos = document.getElementsByTagName("p");
console.log(paragrafos);
// O console retornará um array: [ {...}, {...}, {...} ]
// Cada um destes objetos é um dos elementos do tipo <p>.