Scribd
Carregar
5 visualizações1 página

Aula JavaScript DOM Resumo Com Exercicios

O documento aborda o DOM (Document Object Model) e sua manipulação com JavaScript, incluindo seletores como getElementById e querySelector. Ele também discute eventos do usuário e sugere um mini-projeto de 'To-Do' para praticar, além de exercícios práticos para reforçar o aprendizado. Exemplos de código são fornecidos para ilustrar a seleção de elementos, manipulação de classes e criação de novos elementos.

Enviado por

dinilo456
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
5 visualizações1 página

Aula JavaScript DOM Resumo Com Exercicios

O documento aborda o DOM (Document Object Model) e sua manipulação com JavaScript, incluindo seletores como getElementById e querySelector. Ele também discute eventos do usuário e sugere um mini-projeto de 'To-Do' para praticar, além de exercícios práticos para reforçar o aprendizado. Exemplos de código são fornecidos para ilustrar a seleção de elementos, manipulação de classes e criação de novos elementos.

Enviado por

dinilo456
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

Aula: JavaScript e DOM

Resumo com exemplos + exercícios (nível iniciante/intermediário)

1) O que é DOM?
O DOM (Document Object Model) é uma representação em árvore do HTML. Com JavaScript, você consegue
ler, criar e modificar elementos, estilos e eventos em tempo real.
Principais seletores
Método Quando usar
[Link]() Selecionar um elemento único por id.
[Link]() Selecionar o primeiro elemento que bate com um seletor
CSS.
[Link]() Selecionar todos os elementos que batem com um seletor
CSS (NodeList).

Exemplos rápidos
• Selecionar e alterar texto: const titulo = [Link]('h1'); [Link] =
'Olá!';
• Alterar classe: [Link]('ativo'); [Link]('escuro');
• Criar elemento: const li = [Link]('li'); [Link] = 'Item';
[Link](li);
2) Eventos (events)
Eventos são ações do usuário (clique, digitação, envio de formulário). O padrão é usar
addEventListener e separar a lógica em funções.
• Clique: [Link]('click', () => { /* ação */ });
• Input: [Link]('input', (e) => { [Link]([Link]); });
• Submit: [Link]('submit', (e) => { [Link](); /* valida */ });
3) Mini-projeto sugerido (para portfólio)
Construa um 'To-Do' com: adicionar tarefa, marcar como feita, filtrar (todas/abertas/feitas) e
salvar no localStorage.
Checklist do mini-projeto
• Estrutura HTML com input + botão + lista (ul).
• Validação: impedir tarefa vazia e mostrar mensagem amigável.
• Ações por item: concluir, editar, remover.
• Persistência: salvar array de tarefas no localStorage e recarregar ao abrir a página.
4) Exercícios
• Ex. 1: Crie um botão que alterna o tema (claro/escuro) usando [Link].
• Ex. 2: Faça um contador de caracteres em um textarea (limite 200) e mude a cor quando estiver
perto do limite.
• Ex. 3: Monte uma validação simples de e-mail em um formulário (regex básica) e bloqueie o
submit se estiver inválido.
Gabarito (ideias)
Use eventos 'click' e 'input'. Para o contador: [Link]. Para salvar tarefas:
[Link](array) e [Link]([Link]('chave')).

Gerado em 02/03/2026 • Página 1

Você também pode gostar