Métodos de Seleção de Elementos

JavaScript fornece várias maneiras de selecionar elementos dentro do Document Object Model (DOM) para manipulação. Vamos explorar os principais métodos usados para isso:

1. document.getElementById():

   • Este método retorna o elemento que possui o ID especificado. Como os IDs devem ser únicos dentro de uma página, este método é uma maneira rápida e eficiente de acessar um elemento específico.

   Exemplo:

   var elemento = document.getElementById('meuId');
   console.log(elemento); // Exibe o elemento com ID 'meuId'
   

2. document.getElementsByTagName():

   • Retorna uma coleção HTML ao vivo de todos os elementos com o nome da tag especificado. Essa coleção é uma HTMLCollection que se atualiza automaticamente quando o documento é alterado.

   Exemplo:

   var paragrafos = document.getElementsByTagName('p');
   console.log(paragrafos); // Exibe todos os elementos <p> no documento
   

3. document.getElementsByClassName():

   • Retorna uma coleção HTML ao vivo de todos os elementos que possuem a classe especificada. Assim como com getElementsByTagName, a coleção é dinâmica e reflete mudanças no DOM.

   Exemplo:

   var itensDaLista = document.getElementsByClassName('item-lista');
   console.log(itensDaLista); // Exibe todos os elementos com a classe 'item-lista'
   

4. document.querySelector():

   • Retorna o primeiro elemento que corresponde a um seletor CSS especificado. É um método muito poderoso e versátil que pode substituir os métodos anteriores quando se busca por um único elemento.

   Exemplo:

   var cabecalho = document.querySelector('.cabecalho');
   console.log(cabecalho); // Exibe o primeiro elemento com a classe 'cabecalho'
   

5. document.querySelectorAll():

   • Retorna uma lista estática (NodeList) de elementos que correspondem a um determinado seletor CSS. Diferente das coleções HTML ao vivo, essa lista não reflete mudanças no DOM.

   Exemplo:

   var links = document.querySelectorAll('a');
   console.log(links); // Exibe todos os elementos <a> no documento
   

Cada um desses métodos tem suas próprias vantagens e usos específicos dependendo do que você precisa fazer no seu script. Usar o método correto para o contexto certo pode simplificar muito o código e melhorar o desempenho.

Exercícios para Selecionar Elementos em uma Página de Exemplo

Agora que entendemos os métodos de seleção de elementos do DOM, vamos aplicar esse conhecimento com alguns exercícios práticos. Esses exercícios irão ajudá-lo a familiarizar-se com a manipulação do DOM e a entender como aplicar esses métodos em situações reais.

Exercício 1: Selecionar e Modificar

Objetivo: Use document.getElementById() para encontrar um elemento pelo seu ID e altere o texto desse elemento.

Instruções:

1. Adicione um elemento <p> com um ID específico ao seu HTML.
2. Use document.getElementById() para selecionar esse elemento.
3. Mude o texto do elemento para algo novo.

Código de Exemplo: