Fazedor de Site » O que é HTML DOM?

Essa é uma tradução adaptada e não literal que fiz do texto da W3C Schools que define o DOM.

HTML DOM, é a abreviatura do termo em inglês HTML Document Object Model, mas o que faz esse DOM?

DOM define formas padrão de acessar e manipular o HTML e seus elementos.

O DOM representa o documento como uma estrutura em árvore, ou seja, toda ramificada, com nós representando os elementos do HTML, seus atributos e o texto.

Como uma imagem vale mil palavras vejam um exemplo abaixo:

árvore DOM

A partir daqui o texto não é mais tradução, e sim escrito por mim.

A árvore inicia com document, que representa todo documento HTML, o segundo nó é representado pela tag HTML, logo abaixo no mesmo nível temos as tags HEAD e BODY.

A tag HEAD tem apenas um nó que depende dela, que chamamos de filho, que é a tag TITLE, que por sua vez também possui seu nó filho, que é o texto a ser inserido nela.

A tag BODY pode ter como nós filhos todos os demais elementos do HTML, estes que serão responsáveis por exibir a informação, representados na imagem pelas tags H1 e A, mas podemos incluir ai muito mais tags, como por exemplo, DIV, P, SPAN, entre muitas outras.

Esses filhos do BODY, também possuem seus filhos, a familia é grande e os filhos desses elementos podem ser seus atributos como na tag A o href, ou ainda o texto contido nelas por exemplo: <a href="exemplo.html">aqui é filho o link também</a>.

Basicamente essa é forma que os navegadores entendem e interpretam a estrutura HTML a árvore DOM, é muito importante a compreensão, para poder entender mais para frente as formas de acessar esses elementos respeitando sua hierarquia.

Como sempre estou aberto a dúvidas e sugestões.