O Que é DOM?

A Árvore de Documentos

A árvore de documentos DOM (Modelo de Objeto de Documento) é um tipo de estrutura em forma de árvore que é usada para representar documentos HTML e XML. Ela é a base para o desenvolvimento web moderno, formando a base para todas as linguagens de estilização e script como JavaScript e CSS.

Em um nível básico, é importante entender que a árvore de documentos DOM contém uma hierarquia de elementos e nós: cada elemento ou nó contém pedaços individuais de dados, sejam eles texto, imagens, links, etc., que podem todos ser manipulados com código. Cada pedaço de código escrito em um ambiente web moderno interage com elementos na árvore de documentos DOM; portanto, aprender os conceitos básicos dessa estrutura é essencial para qualquer desenvolvedor web iniciante.

Nós de Elemento

Os Nós de Elemento são os elementos individuais dentro da árvore de documentos DOM. Estes são organizados em uma estrutura hierárquica, com vários nós representando diferentes tipos de dados. O tipo mais comum de Nós de Elemento são as tags HTML, como div ou p, que representam seções ou blocos de código separados em uma página web.

Os Nós Elemento também podem conter atributos adicionais, como ID e class, que permitem aos desenvolvedores direcionar peças específicas de conteúdo em seu código. Os Atributos dos Nós também podem ser usados para fornecer contexto extra para os elementos, ajudando os desenvolvedores a entender como eles estão sendo estilizados e manipulados pelo código.

Em última análise, todo o desenvolvimento web gira em torno da manipulação desses Nós de Elemento; portanto, é importante para iniciantes entenderem os conceitos básicos desses nós para projetar sites e aplicativos mais complexos.

Nós de Atributo

Os Nós de Atributo são nós dentro do DOM que contêm informações específicas sobre um elemento. Cada Nó de Atributo contém um par chave-valor, sendo a chave o nome do atributo e o valor os dados associados a ele. Exemplos desses pares chave-valor incluem o ID de um Nó de Elemento (chave=id, valor=ID específico do elemento) ou um nome de classe (chave=class, valor=o nome de uma classe). Esses atributos fornecem contexto adicional para desenvolvedores na identificação de elementos em páginas web e na manipulação dos mesmos com código. Compreender como usar esses atributos é essencial para criar sites e aplicações complexas.

Nós de Texto

Os Nós de Texto são os nós folha do DOM, significando que contêm todo o conteúdo de texto dentro de um elemento. Isso inclui tanto texto simples quanto tags HTML, como tags de parágrafo ou tags de cabeçalho. Os Nós de Texto também podem ser usados para adicionar contexto e estrutura adicionais a uma página da web, como adicionar títulos e cabeçalhos, uma vez que contêm o texto que aparecerá na tela.

Além disso, ao manipular elementos por meio de código JavaScript, os elementos devem ser direcionados percorrendo os nós filhos do nó pai – incluindo Nós de Texto – o que pode ajudar a identificar o elemento apropriado em uma página para manipulação.

Ouvintes de Eventos

Os Event Listeners permitem especificar quais ações devem ser tomadas quando certos eventos ocorrem dentro do DOM, como clicar em um link ou passar o cursor do mouse sobre um elemento.  Ao usar Event Listeners, estamos adicionando interatividade a um site.  Nós anexamos um Event Listener a um elemento usando o método “addEventListener” e especificando qual tipo de evento deve ser ouvido, bem como qual função deve ser executada quando esse evento for detectado.

Blocos de Construção da Web

O conhecimento do DOM permite que os desenvolvedores criem experiências dinâmicas em um site, permitindo que os usuários interajam com os elementos de maneiras intuitivas. Ao entender os fundamentos do DOM, os desenvolvedores poderão fazer sites mais interativos e envolventes do que nunca.