O Document Object Model, conhecido como DOM, é um conceito fundamental no desenvolvimento web. Ele representa a estrutura hierárquica e organizacional de um documento HTML ou XML, transformando-o em uma árvore de objetos que podem ser manipulados através de linguagens de programação, especialmente JavaScript.
Em outras palavras, o DOM seria como se fosse um programa usado para demonstrar a estrutura hierarquica de um sistema. Neste caso seria o html ou o XML.
Com ele, sendo possivel manipular toda e estrutura do documento HTML ou XML. Podendo mudar elementos do lugar, adicionar novos elementos e muito mais.
Explorando a Hierarquia da Árvore DOM
A Árvore DOM, ou Modelo de Objeto de Documento, serve como a espinha dorsal do desenvolvimento web, proporcionando uma estrutura organizada para os elementos de uma página.
Nesta imagem abaixo, eu tento explicar um documento simples de HTML de uma forma hierarquica. Onde (em amarelo) podemos ver que o elemento principal e o <html>.
Logo em seguida, a esquerda e em verde, podemos ver os elementos do <head> (ou o cabealho do documento). A direita podemos ver como principal o elemento <body>no qual sera adicionado todo o resto de outros elementos.
Um otimo exemplo seria, se o DOM fosse a representação de uma familia como avos, pais e filhos o <body> seria o que mais teria filhos e netos.
Entendendo Relacionamentos no DOM:
- Cada elemento HTML é representado como um “nó” na Árvore DOM, seja uma simples
<div>ou um elemento mais complexo. - A hierarquia é construída em relação pai-filho, onde um elemento pode conter outros (filhos) e, ao mesmo tempo, ser filho de outro (pai).
- Elementos no mesmo nível hierárquico são chamados de “irmãos”.
Profundidade e Raiz:
- A árvore reflete a profundidade dos elementos, indicando seu nível na hierarquia.
- O
<html>atua como o nó raiz, a origem da qual todos os outros elementos derivam.
Navegação e Modificação:
- A eficiência na manipulação de elementos envolve a habilidade de acessar e percorrer a árvore de forma ágil.
- Alterações na estrutura da árvore refletem dinamicamente na página, impactando diretamente a experiência do usuário.
Dominar a Árvore DOM é essencial para a manipulação eficaz de elementos em páginas web, permitindo a criação de aplicações dinâmicas e interativas. Nos próximos tópicos, exploraremos estratégias práticas para navegar e interagir com diferentes partes dessa árvore.
Caso voce queira seguir o passo-a-passo, clique aqui para ir direto ao CodePen
Seleção Estratégica de Elementos no DOM
A habilidade de selecionar elementos específicos no DOM é crucial ao manipular dinamicamente o conteúdo de uma página.
Vamos explorar métodos e técnicas para escolher alvos no DOM de maneira estratégica.
Seletores basicos:
// Selecionando por ID
const elementoPorId = document.getElementById('id-do-elemento');
// Selecionando por Classe
const elementosPorClasse = document.getElementsByClassName('nome-da-classe');
// Selecionando por Tag
const elementosPorTag = document.getElementsByTagName('tag-desejada');
Seletores Avançados:
// Selecionando pela primeira ocorrência de uma classe
const primeiroElementoPorClasse = document.querySelector('.nome-da-classe');
// Selecionando todos os elementos com determinada classe
const todosElementosPorClasse = document.querySelectorAll('.nome-da-classe');
Navegando na Hierarquia:
// Selecionando o elemento pai
const elementoPai = elementoFilho.parentElement;
// Selecionando os filhos de um elemento
const filhosDoElemento = elementoPai.children;
Filtrando Seleções:
// Filtrando elementos por critérios específicos
const elementosFiltrados = Array.from(document.querySelectorAll('.elemento'))
.filter(elemento => elemento.dataset.tipo === 'filtro-desejado');
Selecionar elementos com precisão no DOM é essencial para realizar manipulações específicas. Utilizando essas técnicas, você terá o poder de direcionar sua interação para os elementos desejados.
Tornando sua aplicação web mais dinâmica e responsiva.
Manipulação Avançada de Conteúdo no DOM
No contexto da manipulação dinâmica de páginas web, a habilidade de adicionar, remover e modificar elementos no DOM é essencial para proporcionar interatividade.
Adição de Elementos:
Ao criar um novo elemento com document.createElement(), você está preparando um novo nó no DOM. O método appendChild adiciona esse nó como um filho do elemento existente no DOM, proporcionando uma forma eficaz de inserir dinamicamente novos conteúdos.
Exemplo:
// Cria um novo elemento
const novoElemento = document.createElement('div');
novoElemento.textContent = 'Novo Conteúdo';
// Adicionando o elemento ao DOM
const container = document.getElementById('container');
container.appendChild(novoElemento);
Neste exemplo, um novo elemento div é criado e seu conteúdo de texto é definido. Em seguida, esse elemento é adicionado como um filho ao elemento com o ID ‘container’.
Em outras palavras, use aquele grafico acima como exemplo. Imagina que voce tem um elemento com o id=”container”. No caso do codigo acima, ele usa este id para adicionar este novo elemento a ele.
Remoção de Elementos no DOM:
A remoção de elementos pode ser feita através da identificação do elemento alvo e, em seguida, utilizando o método removeChild ou manipulando diretamente o innerHTML. A primeira abordagem remove um nó específico, enquanto a segunda remove todos os filhos de um elemento.
Essa abordagem e quase igual ao exemplo passado, porem neste caso você podera acessar o elemento que ira ser removido usando o metodo document.getElementById(). Trazendo uma remoção especifica. Ou removendo todos os filhos de um elemento especifico tambem porem usando nomeDaVariavel.innerHTML = “” que condiz em “apagar” os dados internos deste elemento.
Exemplo:
// Removendo um elemento específico
const elementoParaRemover = document.getElementById('elemento-a-remover');
elementoParaRemover.parentNode.removeChild(elementoParaRemover);
// Removendo todos os filhos de um elemento
const container = document.getElementById('container');
container.innerHTML = ''; // Remove todos os filhos
Modificação de Conteúdo no DOM:
Modificar o conteúdo de um elemento pode envolver a atualização do HTML interno ou a modificação de atributos existentes. Isso é útil para ajustar dinamicamente o conteúdo da página conforme necessário.
No exemplo abaixo tambem usamos o metodo document. getElementById() para especificar o elemento que necessitamos modificar. E ao acessa-lo usamos o innerHTML para modifica-lo. E tambem podemos adicionar novo atributos como id e classes usando o metodo setAttribute() logo depois de acessar o elemento.
Exemplo:
// Modificando o conteúdo de um elemento
const elementoParaModificar = document.getElementById('elemento-a-modificar');
elementoParaModificar.innerHTML = '<p>Novo conteúdo HTML</p>';
// Modificando atributos
elementoParaModificar.setAttribute('class', 'nova-classe');
Inserção Posicional:
A inserção posicional permite adicionar elementos em locais específicos dentro da hierarquia do DOM. O método insertBefore é usado para inserir um elemento antes ou após outro.
Exemplo:
// Inserindo um elemento antes de outro
const novoElemento = document.createElement('span');
const elementoAlvo = document.getElementById('alvo');
elementoAlvo.parentNode.insertBefore(novoElemento, elementoAlvo);
// Inserindo um elemento após outro
elementoAlvo.parentNode.insertBefore(novoElemento, elementoAlvo.nextSibling);
Essas técnicas fornecem controle preciso sobre a estrutura e conteúdo da sua página, permitindo a criação de experiências web dinâmicas. A manipulação avançada de conteúdo no DOM é essencial para o desenvolvimento de aplicações web interativas e reativas.
Exemplo Prático de manipulação do DOM: Interação HTML e JavaScript
Vamos explorar um exemplo prático para solidificar o entendimento da manipulação do DOM utilizando HTML e JavaScript. Suponha que temos um simples botão no HTML e queremos que, quando clicado, ele adicione um novo item a uma lista.
Você pode usar este exemplo para adicionar novas funcionalidades. Sendo assim, eu te convido a modificar este exemplo adicionando, por exemplo um outro botão para remover os items criados pelo primeiro botão. E ate modificar mais coisas no site usando puramente o JavaScript e o DOM para manipular o documento HTML.
Conclusão
Em resumo, compreender profundamente o Document Object Model (DOM) e suas nuances com JavaScript é crucial para desenvolvedores web.
Em suma, a maestria na manipulação eficiente do Document Object Model (DOM) usando JavaScript revela-se como um diferencial crucial para desenvolvedores web.
Ao compreender a estrutura hierárquica do DOM, dominar a seleção estratégica de elementos e explorar métodos dinâmicos de manipulação de conteúdo, você se capacitara em criar interfaces web interativas e responsivas.
Essa habilidade não apenas impulsiona a eficiência no desenvolvimento front-end, mas também eleva a experiência do usuário a novos patamares. A constante prática e aprofundamento nesses conceitos são essenciais para cultivar uma expertise sólida, proporcionando a capacidade de criar aplicações web robustas.
Sendo assim, mais uma vez, eu te convido a treinar, o quanto antes esses conhecimentos principalmente se você quer ser um desenvolvedor frontend.
