APIs de Navegador -
Manipulando Documentos
Bem-vindos ao curso de Manipulação de Documentos com APIs de
Navegador. Nesta apresentação, vamos explorar o DOM e CSS em
JavaScript, ferramentas essenciais para desenvolvedores web.
por Ailton Gonsalves de Souza
O que é o DOM?
Interação
1 Permite JavaScript manipular elementos HTML
Estrutura
2
Representa documentos como árvores de objetos
Documento
3
Organiza HTML/XML como nós manipuláveis
DOM significa Document Object Model. É uma interface de programação que representa páginas web como estruturas
manipuláveis via código.
Como o DOM Funciona
1 Carregamento
O navegador lê o HTML e cria a árvore DOM.
2 Renderização
O navegador exibe os elementos segundo a árvore.
3 Manipulação
JavaScript pode alterar nós, atualizando a página.
4 Eventos
Interações do usuário são capturadas e processadas.
Selecionando Elementos
getElementById()
Encontra um elemento específico através do atributo id.
Ex: [Link]("meuBotao")
getElementsByClassName()
Retorna uma coleção de elementos com a classe especificada.
Ex: [Link]("item")
querySelector()
Seleciona o primeiro elemento que corresponde ao seletor CSS.
Ex: [Link](".menu > li")
querySelectorAll()
Seleciona todos os elementos que correspondem ao seletor.
Ex: [Link]("p")
Manipulando o Conteúdo
innerHTML textContent value
Obtém ou define o conteúdo HTML de Obtém ou define o texto de um Obtém ou define o valor de campos de
um elemento. elemento, sem interpretar HTML. formulário.
[Link] = "<span>Novo [Link] = "Texto [Link]("meuInput
texto</span>"; simples"; ").value = "Texto";
Modificando Atributos
1 getAttribute()
Obtém o valor de um atributo específico.
const src = [Link]("src");
2 setAttribute()
Define o valor de um atributo.
[Link]("disabled", "true");
3 removeAttribute()
Remove completamente um atributo do elemento.
[Link]("style");
4 hasAttribute()
Verifica se o elemento possui determinado atributo.
if ([Link]("required")) { ... }
Manipulando CSS com
JavaScript
style classList getComputedSt
Acessa diretamente as Gerencia classes CSS
yle()
propriedades CSS de de um elemento. Obtém os estilos
um elemento. efetivamente
[Link]
aplicados a um
[Link] = d("destaque");
elemento.
"blue";
const estilo =
getComputedStyle(ele
mento);
Navegando pela Árvore
DOM
Pais
1 [Link] ou [Link]
Acessa o elemento pai direto na hierarquia.
Filhos
2 [Link] ou [Link]
Obtém coleções de elementos filhos diretos.
Irmãos
3 nextSibling, previousSibling, nextElementSibling
Acessa elementos adjacentes no mesmo nível.
Primeiro/Último
4 firstChild, lastChild, firstElementChild
Acessa o primeiro ou último filho de um elemento.
Criando e Removendo
Elementos
Criar
const novoElemento = [Link]("div");
Cria um novo elemento na memória.
Configurar
[Link] = "Novo conteúdo";
Define propriedades, atributos e conteúdo.
Anexar
[Link](novoElemento);
Insere o elemento na árvore DOM.
Remover
[Link](elemento) ou [Link]();
Elimina elementos da árvore DOM.
Eventos do DOM
Escutar Disparar
[Link]("click",
1 Usuário interage ou evento é acionado
minhaFunção); 2 programaticamente.
Responder 4 Manipular
DOM é atualizado conforme a lógica 3 Função de callback processa o evento.
definida.
Eventos são a base da interatividade em aplicações web. Permitem reagir às ações do usuário em tempo real.
Projeto Prático: Todo List
Interface Código Interação
Uma lista simples com campo de Usamos addEventListener para capturar Utilizamos manipulação DOM para
entrada e botão para adicionar tarefas. cliques e criar novos itens na lista. adicionar, marcar e remover tarefas.
Melhores Práticas do DOM
Minimize manipulações do DOM Agrupe alterações para reduzir
reflows e repaints.
Use delegação de eventos Adicione listeners em elementos
pais, não em cada filho.
Prefira textContent sobre Quando possível, para melhor
innerHTML performance e segurança.
Cache referências DOM Guarde elementos
frequentemente acessados em
variáveis.
Use fragmentos [Link]
ment() para alterações em lote.
Seguir estas práticas melhora a performance e manutenção das suas
aplicações web. O DOM é poderoso, mas use-o com sabedoria.
