Manipulação do DOM com JavaScript

Manipulação do DOM com JavaScript

O Document Object Model (DOM) é uma interface de programação para documentos HTML, permitindo que o JavaScript acesse e modifique o conteúdo, estrutura e estilo de uma página web. Dominar a manipulação do DOM é essencial para criar websites interativos.

O que é o DOM?

O DOM representa a página web como uma árvore hierárquica de objetos, onde cada parte do documento HTML (elementos, atributos, texto) se torna um nó que pode ser manipulado através de JavaScript.

Selecionando Elementos do DOM

Existem várias maneiras de selecionar elementos do DOM:

Manipulando Elementos

Depois de selecionar os elementos, você pode modificá-los de várias formas:

1. Alterar o conteúdo: Use textContent ou innerHTML.
2. Modificar atributos: Com setAttribute() ou acessando diretamente.
3. Gerenciar classes: Através de classList.add(), classList.remove() ou classList.toggle().
4. Modificar estilos: Através da propriedade style.

Exemplo Prático

Aqui está um exemplo de como criar um botão que muda a cor de fundo quando clicado:

Experimente este código em seu projeto e veja como é fácil adicionar interatividade às suas páginas web usando JavaScript!