0

DOM - Document Object Model

#Estrutura de dados #JavaScript #HTML
Maicon Henrique
Maicon Henrique

O que é ?

A DOM (Document Object Model) é uma API que permite a manipulação do documento HTML por meio da conversão para um Objeto Javascript. A estrutura da DOM é em árvore:


2: Exemplo de uma estrutura DOM. Com a utilização da interface DOM é... |  Download Scientific Diagram


Estrutura da DOM (link da imagem abaixo)
https://www.researchgate.net/figure/Figura-22-Exemplo-de-uma-estrutura-DOM-Com-a-utilizacao-da-interface-DOM-e-possivel_fig2_299344970


Como utiliza-la?

Para utilizar a DOM você pode rapidamente fazer consultas no elemento que quiser no documento (ex: const h1 = document.querySelector('h1')) e fazer as manipulações (ex: h1.classList.add('ativo')).


Neste exemplo vimos a atribuição (=) ao h1, para buscar o primeiro elemento <h1> . Essa busca está sendo feita no documento, por meio do método querySelector, que faz a consulta no primeiro elemento. Em seguida usou-se a propriedade 'classList' e o método add() para inserir uma classe no elemento.

Há diversas propriedades e métodos que podemos utilizar. (referência abaixo)


MDN: DOM - https://developer.mozilla.org/pt-BR/docs/Web/API/Document_Object_Model
0
2

Comentários (0)

Carreira desenvolvida como Desenvolvedor Front end. Experiência em gerenciamento de conflitos, liderança de equipes, criação de páginas web. Amo a inovação e a força empreendedora.

Brasil