Introdução à Consulta do DOM

Consultar o DOM envolve selecionar e acessar elementos específicos no documento para que seja possível manipulá-los ou interagir com eles. O JavaScript oferece diversos métodos para consultar elementos, cada um com seu caso de uso e comportamento específicos.

GetElementById

getElementById é utilizado para selecionar um único elemento pelo seu ID exclusivo. É um dos métodos mais utilizados, pois os IDs devem ser únicos dentro do documento.
Caso de uso: Mais indicado para selecionar um elemento específico quando se conhece o seu ID.
Retorno: Um único elemento ou null caso nenhum elemento seja encontrado.

// HTML:
<div id="header">Welcome</div>

// JS:
const headerEl = document.getElementById('header');
console.log(headerEl.textContent); // Output: Welcome

GetElementsByClassName

getElementsByClassName seleciona elementos pelo nome da classe e retorna uma HTMLCollection dinâmica dos elementos.
Caso de uso: Útil quando é necessário selecionar múltiplos elementos com a mesma classe.
Retorno: Uma HTMLCollection dinâmica dos elementos correspondentes, que é atualizada se o DOM for alterado.
Limitações: Não é possível utilizar métodos de array diretamente; é necessário converter para array se preciso.

// HTML:
<p class="text">First paragraph</p>
<p class="text">Second paragraph</p>

// JS:
const textEls = document.getElementsByClassName('text');
console.log(textEls); // Output: HTMLCollection(2) [p.text, p.text]
console.log(textEls[0].textContent); // Output: First paragraph
console.log(textEls[1].textContent); // Output: Second paragraph

GetElementsByTagName

getElementsByTagName seleciona elementos pelo nome da tag (por exemplo, div, p) e retorna um HTMLCollection ao vivo.
Caso de uso: Ideal para selecionar todos os elementos de um determinado tipo.
Retorno: Um HTMLCollection ao vivo de elementos.
Limitações: Não é específico, pois seleciona todos os elementos de uma determinada tag dentro do contexto.

// HTML:
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

// JS:
const listItems = document.getElementsByTagName('li');
console.log(listItems); // Output: HTMLCollection(2) [li, li]
console.log(listItems.length); // Output: 2

QuerySelector

querySelector seleciona o primeiro elemento que corresponde a um seletor CSS. É versátil, permitindo o uso de qualquer seletor CSS válido para encontrar elementos.
Caso de uso: Adequado para selecionar a primeira correspondência de qualquer seletor CSS.
Retorno: O primeiro elemento correspondente ou null se não houver correspondência.

// HTML:
<div class="box" id="main-box">Content</div>

// JS:
const boxEl = document.querySelector('.box'); // Selects the first .box element
console.log(boxEl.id); // Output: main-box
console.log(boxEl.className); // Output: box
console.log(boxEl.textContent); // Output: Content

QuerySelectorAll

querySelectorAll seleciona todos os elementos que correspondem a um seletor CSS e retorna um NodeList estático. Diferente de outros métodos, não atualiza dinamicamente se o DOM mudar.
Caso de uso: Indicado para selecionar múltiplos elementos com seletores complexos.
Retorno: Um NodeList estático de elementos que não é atualizado automaticamente.

// HTML:
<p class="content">Paragraph</p>
<span class="content">Text</span>
<div class="content">Container</div>

// JS:
const contentEls = document.querySelectorAll('.content');
console.log(contentEls); // Output: NodeList(3) [p.content, span.content, div.content]
console.log(contentEls.length); // Output: 3

Diferenças Entre Esses Métodos

Tipos de Retorno

Coleções Dinâmicas vs. Estáticas

Seletores CSS

Desempenho

Exemplo Prático: Validação de Formulário

Combinação desses métodos em um cenário prático: destaque de campos de formulário inválidos utilizando classes.

O método getElementById seleciona o elemento de formulário, enquanto querySelectorAll recupera todos os campos de entrada com a classe .input-field. Um ouvinte de evento no evento "submit" do formulário impede o envio padrão e verifica cada campo de entrada. Se um campo estiver vazio, ele é destacado com uma borda vermelha; campos preenchidos recebem uma borda verde, fornecendo feedback visual imediato ao usuário.