Explorando o DOM

Explorar o Document Object Model (DOM) é uma habilidade essencial para qualquer desenvolvedor web, pois permite interagir e modificar dinamicamente a estrutura e o estilo de uma página web. O DOM é uma representação em árvore de todos os elementos de uma página, e compreendê-lo permite que os desenvolvedores manipulem conteúdo, estrutura e estilo de uma página diretamente com JavaScript.

Objetivos

1. Selecionar Elementos do DOM: Aprender diferentes métodos para localizar e selecionar elementos dentro do documento HTML usando JavaScript.
2. Manipular Elementos do DOM: Modificar elementos, incluindo seus atributos, conteúdo e estilos, para responder a interações do usuário e atualizar a interface do usuário dinamicamente.

Tópicos de Aprendizado

Seleção de Elementos

• getElementById(): Seleciona um elemento pelo seu atributo ID.
• getElementsByClassName(): Retorna uma coleção de todos os elementos que possuem uma classe específica.
• getElementsByTagName(): Retorna uma coleção de todos os elementos com o nome de tag especificado.
• querySelector(): Retorna o primeiro elemento que corresponde a um seletor CSS específico.
• querySelectorAll(): Retorna todos os elementos que correspondem a um seletor CSS específico.

Manipulação de Elementos

• textContent e innerHTML: Modificar o conteúdo de texto de um elemento ou seu HTML interno, respectivamente.
• style: Alterar o estilo CSS de um elemento diretamente via JavaScript.
• setAttribute() e removeAttribute(): Adicionar ou remover atributos de elementos.
• classList: Adicionar, remover ou alternar classes CSS em um elemento para alterar sua aparência e comportamento.

Atividade Prática

Para praticar essas habilidades, você criará uma página web que permite a manipulação dinâmica de conteúdos e estilos. Os exercícios incluirão:

1. Modificação de Conteúdo:

   • Criar botões que, quando clicados, alteram o texto de diferentes elementos na página.

   document
     .getElementById("changeTextButton")
     .addEventListener("click", function () {
       document.getElementById("textElement").textContent = "Texto alterado!";
     });

2. Alteração de Estilos:

   • Implementar botões que modificam propriedades como cor de fundo, cor de texto e tamanho de fonte de elementos específicos.

   document
     .getElementById("changeStyleButton")
     .addEventListener("click", function () {
       let element = document.getElementById("styleElement");
       element.style.backgroundColor = "blue";
       element.style.color = "white";
       element.style.fontSize = "20px";
     });

3. Manipulação de Classes CSS:

   • Usar classList para adicionar, remover ou alternar classes para diferentes efeitos visuais.

   document
     .getElementById("toggleClassButton")
     .addEventListener("click", function () {
       document.getElementById("dynamicElement").classList.toggle("highlight");
     });

Conclusão

Ao final, você terá as competências para selecionar e manipular elementos do DOM de forma eficaz, permitindo criar páginas web que respondem e se adaptam às ações dos usuários. Essas habilidades são fundamentais para desenvolver interfaces dinâmicas e interativas, essenciais para qualquer aplicação web moderna.