Selecionando elementos por ID, classe e tag
Seja bem-vindo à segunda aula do módulo 3! Nesta etapa, você aprofundará seus conhecimentos sobre como selecionar elementos do DOM (Document Object Model) de forma precisa e eficiente, utilizando métodos específicos para IDs, classes e tags.
No desenvolvimento web, é comum a necessidade de selecionar elementos específicos em uma página.
No JavaScript, podemos utilizar diferentes métodos para fazer essa seleção, como por ID, classe e tag.
Nesta explicação, vamos aprender como realizar essas seleções de forma clara e eficiente.
Selecionando por ID
Um ID é um identificador único atribuído a um elemento HTML.
Podemos selecionar um elemento por ID utilizando o método getElementById().
Esse método retorna o elemento que possui o ID correspondente. É como se cada elemento tivesse um “RG” exclusivo.
Exemplo de código:
var elemento = document.getElementById("meuElemento");
Selecionando por classe
Uma classe é um atributo que pode ser compartilhado por vários elementos HTML.
Podemos selecionar elementos por classe utilizando o método getElementsByClassName().
Esse método retorna uma lista de elementos que possuem a classe especificada. É como se fosse uma “lista de amigos” que possuem a mesma característica.
Exemplo de código:
var elementos = document.getElementsByClassName("minhaClasse");
Selecionando por tag
Uma tag representa um tipo de elemento HTML, como <div>, <p>, <h1> entre outros.
Podemos selecionar elementos por tag utilizando o método getElementsByTagName().
Esse método retorna uma lista de elementos que possuem a tag especificada. É como se fosse uma “coleção de objetos” do mesmo tipo.
Exemplo de código:
var elementos = document.getElementsByTagName("div");
Desafio:
- Crie um script JavaScript que cria três botões na página web.
- Cada botão deve ter uma classe diferente: “botao-vermelho”, “botao-azul” e “botao-verde”.
- Adicione um evento de click a cada botão.
- Quando o usuário clicar em um botão, altere a cor do botão e exiba uma mensagem na tela informando a cor do botão clicado.
Agora que você aprendeu a selecionar elementos por ID, classe e tag, vamos dar um passo adiante na manipulação do DOM.
A próxima aula te guiará por como modificar o conteúdo e os estilos dos elementos, expandindo suas habilidades para criar interfaces ainda mais dinâmicas.
