DOM Manipulation
Learn how to dynamically update web pages to create interactive business applications.
What You'll Learn
Description
Manipulação do DOM é como uma página web muda depois de carregar — exibir uma mensagem, adicionar uma linha a uma tabela, validar um formulário, reagir a um clique. Este tutorial cobre as APIs nativas do navegador (getElementById, querySelector, textContent, classList, addEventListener, createElement) sobre as quais todo framework é construído.
Você vai percorrer quatro capítulos com exemplos de código executáveis e uma demo interativa de lista de tarefas em que pode clicar no seu navegador, ao lado do código DOM vanilla equivalente. Cada capítulo também mostra como descrever o comportamento desejado a um assistente de IA e conferir o que ele devolve.
Ao final, você saberá selecionar elementos com segurança, conectar eventos, renderizar listas a partir de um array de dados, validar um formulário no envio e evitar os padrões de layout thrashing que deixam as páginas lentas.
What's inside
- 1.Selecionando elementos — o que é o DOM, como encontrar elementos com getElementById e querySelector, e como descrever a mudança desejada a um assistente de IA.
- 2.Texto, estilos e eventos — ler e alterar texto, atributos e estilos, e conectar seus primeiros listeners de click e input.
- 3.Eventos e renderização — criar e remover elementos, delegação de eventos e renderização do DOM a partir de um array de dados.
- 4.Formulários e desempenho — tratar o envio de formulário com validação, além de batching e debouncing para apps rápidos e responsivos.