Quando uma página web é carregada, o navegador cria um Modelo desta página.
O modelo é chamado árvore DOM, e é armazenado na memória dos navegadores.
Exemplo:
<html>
<body>
<div id="page">
<h1 id="header">Lista</h1>
<h2>Minhas Compras</h2>
<ul>
<li id="one" class="element"><em>peixe</em> fresco</li>
<li id="two" class="element">verduras</li>
<li id="three" class="element">carnes</li>
<li id="four">legumes</li>
</ul>
<script src="js/script.js"></script>
</div>
</body>
</html>
💡
No topo da árvore está o nódocument. Ele representa toda a página ( e também corresponde ao objeto document ). Elementos HTML descrevem a estrutura de uma página HTML. Para acessar a árvore DOM, você começa procurando os elementos. Depois de encontrar o elemento desejado, você pode acessar os nós de texto e de atributo que quiser. Nós de atributo não são filhos do elemento que os contém; são parte deste elemento. Depois de acessar um elemento, há métodos e propriedades JavaScript específicos para ler ou modificar os atributos deste elemento. Nós de texto não podem ter filhos. Cada nó é um objeto com métodos e propriedades. Scripts acessam e atualizam essa árvore DOM (não o arquivo fonte HTML)
Como trabalhar com a árvore DOM?
Para acessar e atualizar a árvore DOM basta seguir dois passos:
Localizar o nó que representa o elemento com o qual você quer trabalhar.
Utilizar o conteúdo de texto, elementos filhos e atributos.
Passo 1 - Acessando os elementos.
Selecionar o nó de um elemento
Existem três maneiras de selecionar um elemento individual:
getElementById()
Utiliza o valor do atributo id de um elemento (que deve ser único dentro da página).
querySelector()
Utiliza um seletor CSS, e retorna o primeiro elemento correspondente.
💡
A outra forma é selecionar elementos individuais navegando de um elemento para o outro dentro da árvore DOM.
Selecionar múltiplos elementos (nodelists)
Existem três maneiras de selecionar múltiplos elementos.
getElementsByClassName()
Seleciona todos os elementos que têm um valor específico no atributo class.
getElementsByTagName()
Seleciona todos os elementos que têm o nome de tag especificado.
querySelectorAll()
Utiliza um seletor CSS para selecionar todos os elementos correspondentes.
Percorrer nós de elemento
Podemos navegar ou alternar um nó de um elemento para o nó de um outro elemento relacionado.
parentNode
Seleciona o pai do nó do elemento atual (o que retornará apenas um elemento).
previousSibling/nextSibling
Seleciona o irmão anterior ou seguinte a partir da árvore DOM.
firstChild/lastChild
Selecione o primeiro ou o último filho do elemento atual.
Passo 2 -Trabalhar com esses elementos.
Acessar/Atualizar nós de texto
O texto dentro de qualquer elemento é armazenado em um nó de texto.
Selecione o elemento
Utilize a propriedade firstChild para obter o nó de texto.
Utilize apenas a propriedade (nodeValue) do nó de texto para obter o texto a partir do elemento.
nodeValue
Essa propriedade permite acessar conteúdo ou atualizar um nó de texto. O nó de texto não inclui o texto de quaisquer elementos filho.
Trabalhando com conteúdo HMTL
innerHTML
Uma propriedade permite acessar elementos filho e conteúdo de texto.
createElement()
createTextNode()
appendChild()
removeChild()
Esses métodos permitem criar, adicionar e remover nós de uma árvore.
Isso é chamado de manipulação DOM.
Acessar/Atualizar valores de atributo
Algumas das propriedades e dos métodos que você pode utilizar para trabalhar com atributos:
className / id
Permite obter ou atualizar o valor dos atributos class e id.
hasAttribute()
Verifica se um atributo existe.
getAttribute()
Obtém o valor do atributo.
setAttribute()
Atualiza o valor do atributo.
removeAttribute()
Remove o atributo.
Conclusão
A manipulação da árvore DOM (Document Object Model) é essencial para a interação dinâmica com páginas web. Ao entender como acessar e modificar a DOM, você pode criar experiências de usuário mais interativas e responsivas. Começando com a localização de nós de elementos usando métodos como getElementById(), querySelector(), e getElementsByClassName(), você pode navegar entre os nós e trabalhar com múltiplos elementos. Através das propriedades e métodos como nodeValue, innerHTML, createElement(), appendChild(), e removeChild(), você pode acessar e atualizar tanto o conteúdo de texto quanto os elementos HTML e seus atributos.
O conhecimento dos métodos para manipulação de atributos, como className, id, hasAttribute(), getAttribute(), setAttribute(), e removeAttribute(), amplia ainda mais a capacidade de personalização e dinamização da página. Com estas ferramentas, você pode construir e modificar a estrutura de sua página web em tempo real, criando interfaces de usuário mais ricas e intuitivas.
Em resumo, a compreensão e o domínio da manipulação da árvore DOM são fundamentais para qualquer desenvolvedor web, permitindo a criação de páginas interativas e dinâmicas que respondem eficientemente às ações do usuário. Ao seguir as práticas descritas, você estará bem equipado para explorar as possibilidades ilimitadas da programação JavaScript em conjunto com o DOM.
