Introdução ao DOM
O DOM (Document Object Model) é uma interface de programação que representa documentos HTML e XML como uma árvore de objetos. Cada elemento HTML é representado como um nó na árvore DOM, o que permite que os scripts manipulem o conteúdo e a estrutura da página de forma dinâmica.
Seletores DOM
Seletores DOM são métodos usados para selecionar e acessar elementos específicos no DOM. Aqui estão alguns dos seletores mais comuns:
document.getElementById('id'): Seleciona um elemento pelo seu ID.document.getElementsByClassName('class'): Seleciona todos os elementos com uma determinada classe.document.querySelector('selector'): Seleciona o primeiro elemento que corresponde a um seletor CSS.document.querySelectorAll('selector'): Seleciona todos os elementos que correspondem a um seletor CSS.
Manipulação do DOM
A manipulação do DOM envolve a alteração da estrutura, conteúdo ou estilo dos elementos na página. Aqui estão algumas operações comuns:
element.innerHTML: Altera o conteúdo HTML interno de um elemento.element.setAttribute('attribute', 'value'): Define um atributo de um elemento.element.classList.add('class'): Adiciona uma classe a um elemento.element.classList.remove('class'): Remove uma classe de um elemento.
Eventos em JavaScript
Eventos permitem que JavaScript reaja a interações do usuário ou outras ações na página. Alguns eventos comuns incluem:
click: Disparado quando um elemento é clicado.mouseover: Disparado quando o mouse passa sobre um elemento.keydown: Disparado quando uma tecla é pressionada.
Os eventos são adicionados aos elementos com o método addEventListener. Por exemplo:
element.addEventListener('click', function() {
// Código a ser executado quando o evento ocorrer
});
Exemplo Prático
Vamos criar um exemplo prático que ilustra a seleção de elementos, manipulação do DOM e eventos:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo Prático</title>
</head>
<body>
<button id="meuBotao">Clique em mim</button>
<p id="mensagem"></p>
<script>
document.addEventListener('DOMContentLoaded', () => {
const botao = document.getElementById('meuBotao');
const mensagem = document.getElementById('mensagem');
botao.addEventListener('click', () => {
mensagem.textContent = 'O botão foi clicado!';
});
});
</script>
</body>
</html>
Exercícios Interativos
Tente completar os exercícios abaixo para praticar o que aprendeu:
-
Selecione o elemento com o ID "exemplo1" e altere seu conteúdo para "Olá, DOM!".
<div id="exemplo1"></div> <script> // Seu código aqui </script> -
Adicione um evento de clique ao botão com o ID "exemplo2" que muda a cor de fundo do documento para azul.
<button id="exemplo2">Clique para mudar a cor</button> <script> // Seu código aqui </script>