0Pricing
JavaScript Academy · Aula

getElementById e getElementsByClassName

Use métodos clássicos de seleção.

getElementById e getElementsByClassName é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

getElementById

getElementById retorna o único elemento com o id correspondente ou null. Os identificadores devem ser únicos em uma página, portanto esse método retorna um elemento.

const header = document.getElementById("header");
console.log(header.tagName);

Sem o símbolo de cerquilha

Ao contrário dos seletores CSS, você passa o identificador bruto, sem o #. Passar "#header" não encontraria correspondência.

document.getElementById("menu");   // correct
document.getElementById("#menu");  // wrong, returns null

getElementsByClassName

getElementsByClassName retorna uma dinâmica HTMLCollection de todos os elementos que têm a classe informada.

const cards = document.getElementsByClassName("card");
console.log(cards.length);

A coleção HTML é dinâmica

A coleção é atualizada automaticamente conforme o DOM muda. Se você adicionar um novo .card mais tarde, cards.length aumentará sem uma nova consulta.

const cards = document.getElementsByClassName("card");
// later, after appending a new .card element
// cards.length reflects the new total automatically

Acessando uma coleção por índice

Acesse os itens pelo índice. Uma HTMLCollection se comporta como um vetor, mas não é um vetor de verdade.

const cards = document.getElementsByClassName("card");
console.log(cards[0].textContent);

Sem forEach diretamente

Como ela se comporta como um vetor, mas não é um vetor, HTMLCollection não tem forEach. Converta-a primeiro ou use um laço for simples.

const cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
  console.log(cards[i].textContent);
}

getElementsByTagName

getElementsByTagName retorna uma HTMLCollection dinâmica com todos os elementos de um determinado marcador, como todos os parágrafos.

const paras = document.getElementsByTagName("p");
console.log(paras.length);

Várias classes

Você pode passar vários nomes de classes separados por espaços. Os elementos precisam ter todas as classes listadas para serem incluídos.

const items = document.getElementsByClassName("btn primary");

Restritos a um elemento

Esses métodos também existem nos elementos, restringindo a pesquisa aos descendentes desse elemento.

const list = document.getElementById("todo-list");
const items = list.getElementsByClassName("done");

Convertendo em um vetor

Para usar métodos de vetor, como map ou filter, espalhe a coleção em um vetor de verdade.

const cards = document.getElementsByClassName("card");
const titles = Array.from(cards).map((c) => c.textContent);

Quando usar cada um

Use getElementById para buscas rápidas por identificadores únicos. Prefira querySelectorAll quando quiser uma captura estática ou seletores complexos; use a família getElementsBy* quando precisar especificamente de uma coleção dinâmica.

Verificação rápida

Escolha o comportamento correto.

Recapitulação

Você aprendeu getElementById, que encontra um elemento pelo identificador bruto, sem #, e getElementsByClassName e getElementsByTagName, que retornam coleções HTML dinâmicas. As coleções dinâmicas precisam ser convertidas com Array.from para usar métodos de vetor e não têm seu próprio forEach.

Perguntas Frequentes

A aula “getElementById e getElementsByClassName” é grátis?

Sim — o texto completo de “getElementById e getElementsByClassName” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “getElementById e getElementsByClassName”?

Use métodos clássicos de seleção. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “getElementById e getElementsByClassName”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Selecionando elementos com querySelector
  2. getElementById e getElementsByClassName
  3. Percorrendo pais, filhos e irmãos
  4. NodeList versus HTMLCollection
← Voltar para JavaScript Academy