Introdução ao D.O.M – Domain Object Model

Olá meus amigos. DOM significa DOCUMENT OBJECT MODEL e em termos gerais o DOM é uma API que serve para interagirmos com documentos HTML e XML. Provavelmente só esta explicação é um pouco confusa. Mas estamos aqui para explicar isso para você  meu caro leitor. Vamos aprender como o DOM é estruturado e como usar os métodos corretos em Javascript para manipulá-lo.

A melhor maneira de pensarmos a respeito do DOM, é que ele é uma árvore de objetos aninhados. Uma analogia seria: Pense no DOM como uma árvore genealógica.

genealogy-tree

Cada parte de um documento HTML é representado por um objeto dentro do DOM.

O DOM possui objetos para representar Elementos HTML (tags), Texto (conteúdo das tags), Estilos (como este texto é apresentado para o usuário), assim como objetos mais alto nível, como interação com o usuário através de “eventos”.

O DOM é organizado hierarquicamente, o que significa que um objeto DOM para o elemento HEAD, está embaixo do elemento HTML, que por sua vez está embaixo do objeto Document.

A melhor maneira de observarmos o DOM é ver como ele imita uma estrutura HTML.

No HTML as tags estão aninhadas umas nas outras. Ex:

No exemplo acima a tag p está aninhada dentro da tag div que por sua vez está aninhada dentro da tag body, que por sua vez está aninhada dentro da tag html.

Lembra da analogia do DOM com uma árvore genealógica? No DOM nós identificamos estas relações (aninhamentos), justamente como uma árvore genealógica. Uma tag que está aninhada à outra é chamada de “filha” desta outra tag que se torna o seu“pai”.

Ex:

O objeto Document, representa o conteúdo de um documento HTML. Só que o objeto Document não é o nível mais superior do DOM. O nível mais superior do DOM é o objeto Window.

Por conta disso, o objeto Window, é o escopo global do DOM – ou seja, qualquer objeto no DOM pertence, ou está contido no objeto Window. Este objeto Window, representa uma janela aberta do seu browser (navegador), por exemplo.

objectDocument_objectWindow
Azul = objeto Window (browser)      Laranja = documento HTML (objeto Document)

 

Como já observamos, o DOM não é uma linguagem. O DOM foi desenvolvido para ser independente de qualquer linguagem de programação. Para manipular o DOM usamos uma linguagem de programação. Geralmente em se tratando de programação WEB nós usamos Javascript. Assim nós temos acesso à estrutura, estilo e conteúdo de um documento através do DOM e com o JavaScript poderemos manipulá-los.

Existem muito mais coisas a se falar sobre o nosso prezado DOM. Mas isso fica para outro post. Abs,

See ya!