# Document Object Model - DOM %[https://www.youtube.com/watch?v=W0pqaSMdGIU&list=PLcQQun5wwBt6UHHlRv6wcFVgahOHPAhWb&index=6] [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1768417689084/0d93df31-1868-4e62-b3e8-25df344bb4a8.jpeg align="center")](https://www.udemy.com/course/logica-de-programacao-com-pascalzim/?referralCode=E547897C16AD4FF23AED) 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:** ```xml

Lista

Minhas Compras

``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717892247452/ef46bbaa-3ea5-45c5-84d3-eb0e61e7f889.jpeg align="center")
💡
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: 1. Localizar o nó que representa o elemento com o qual você quer trabalhar. 2. Utilizar o conteúdo de texto, elementos filhos e atributos. **Passo 1 - Acessando os elementos.** Selecionar o nó de um elemento ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717892501142/9a926b24-6809-4103-a33d-6b5d24c4fbde.jpeg align="center") 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)** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717892678891/96086bf1-fe3c-4f4b-a842-31e0e5e530c6.jpeg align="center") 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** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717893259443/31d759ff-e8d4-4b98-a75c-8aabeb61d759.jpeg align="center") 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717893459977/bfbd9b17-21d0-435d-95cf-0490d837b604.jpeg align="center") O texto dentro de qualquer elemento é armazenado em um nó de texto. 1. Selecione o elemento 2. Utilize a propriedade **firstChild** para obter o nó de texto. 3. 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717893618165/d02c1136-2640-4b0f-b024-64dabcd56c76.jpeg align="center")
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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717893732123/45b4660c-2ad8-4ae2-b818-bfafeda69629.jpeg align="center") 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.
--- [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1768417750677/45b1a5d4-75cd-4b1c-9b4f-555f4d7392a5.jpeg align="center")](https://www.udemy.com/course/logica-de-programacao-com-pascalzim/?referralCode=E547897C16AD4FF23AED) ### 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.