O que é DOM (Document Object Model)? Trabalhando com DOM em JavaScript

Introdu��o ao DOM - Document Object Model

O Document Object Model ou simplesmente DOM � utilizado pelo navegador Web para representar a sua p�gina Web. Quando altera-se esse modelo com o uso do Javascript altera-se tamb�m a p�gina Web. � muito mais f�cil trabalhar com DOM do que diretamente com c�digo HTML ou CSS.

Um dos grandes respons�veis por isso tudo � o objeto document que � respons�vel por conceder ao c�digo Javascript todo o acesso a �rvore DOM do navegador Web. Portanto, qualquer coisa criado pelo navegador Web no modelo da p�gina Web poder� ser acessado atrav�s do objeto Javascript document.

Usa-se o DOM principalmente para atualizar uma p�gina Web (DOM � bastante utilizado com Ajax) ou quando se quer construir uma interface de usu�rio avan�ada. Com o DOM pode-se mover itens dentro de uma p�gina ou criar efeitos CSS bastante interessantes sem precisar nem mesmo recarregar a p�gina.

Objeto Document

Atrav�s do objeto document pode-se ter acesso a um grande n�mero de propriedades. Segue abaixo algumas propriedades que podem ser utilizadas com o objeto document:

Propriedade	Descri��o
documentElement	Captura o elemento raiz <html> de um documento HTML.
getElementById	Busca um elemento da p�gina Web com o uso do atributo id do elemento.
createElement	Cria um nodo elemento na p�gina.
createAttribute	Cria um nodo atributo na p�gina.
createTextNode	Cria um nodo texto na p�gina.
getElementsByTagName	Retorna um array dos elementos com o mesmo nome.
appendChild	Insere um novo elemento filho.
removeChild	Remove um elemento filho.
parentNode	Retorna o nodo pai de um nodo.

Segue abaixo um exemplo de uma �rvore DOM de uma p�gina Web. Pode-se notar que todos os elementos da p�gina Web est�o dispon�veis para serem manipulados.

Todas as p�ginas Web s�o de alguma forma uma �rvore. Isso se deve ao fato de podermos ver uma p�gina Web como uma �rvore, com uma raiz como o elemento HTML e os seus filhos como o HEAD e o BODY que por sua tamb�m possuem elementos filhos e assim sucessivamente. Os elementos que n�o possuem filhos s�o chamados de n�s folhas, como por exemplo os elementos TITLE, STYLE, SCRIPT, LI, H1, P, TD demonstrados acima. Note que Text � um texto que est� dentro de um elemento. O n� <TD> por exemplo tamb�m � considerado um n�, mas um n� de tipo diferente (tipo texto).

Essa estrutura de �rvore � a forma que o navegador organiza as marca��es do HTML, � dessa forma que o navegador Web enxerga um documento HTML. A leitura da �rvore se d� sempre da esquerda para a direita, assim teremos a p�gina Web original.

Uma boa pr�tica para evitar que os navegadores apresentem a pagina Web de formas diferentes � sempre escrever HTML padr�o, se poss�vel sempre validando a p�gina HTML. Fechar os elementos corretamente, utilizar tags atuais evitando as tags desatualizadas ajudam os navegadores a exibirem uma p�gina Web de maneira correta.

As especifica��es do Object Document Model s�o publicadas pela World Wide Web Consortium (W3C). Portanto, o DOM � um padr�o de fato.

Percorrendo �rvores DOM

Como visto anteriormente tem-se uma �rvore na qual podemos percorrer-la utilizando a vari�vel document no c�digo Javascript. Como cada n� tem um pai e a maioria tem um n� filho, pode-se percorrer essa �rvores DOM subindo e descendo nela usando essas conex�es. Lembrando que tudo que h� na �rvore DOM � um n� e nisso inclu�mos tamb�m os textos, elementos, atributos e inclusive os coment�rios. Todos eles s�o agrupados pelo DOM em um objeto Node. Elementos e textos s�o tipos especiais de n�s mas tamb�m s�o n�s. Quando tivermos um n� podemos capturar seu nome com nodeName e seu valor com nodeValue. Por�m, precisa-se tomar cuidado pois eles podem retornar um valor nulo como, por exemplo, no caso de acessarmos um n� de Elemento como o div que possui um nome mas n�o possui valor. Um n� de Texto por sua vez possui um valor mas n�o possui um nome.

� importante diferenciar o que � um n� de Texto e um n� de Elemento. Por exemplo, toma-se o HTML abaixo:


<html>
  <head>
    <title>
      Teste de �rvore DOM
    </title>
  </head>

<body>
  <p>Voc� conhece sobre �rvores DOM? Se n�o 
  conhece aprenda em 
  <a href=�www.devmedia.com.br�>www.devmedia.com.br</a> 
  e seja o mais novo entendido sobre o assunto.</p>
</body>
</html>

Listagem 1. Percorrendo �rvores

Nesse exemplo tem-se como exemplo de tipo de n�s Elemento o div, p e o a. Seus nodeName seriam div, p e a respectivamente. Esses n�s de Elemento teriam como nodeValue null/undefined. Os elementos de Texto ter�amos por exemplo o �Voc� conhece sobre �rvores DOM? Se n�o conhece aprenda em� com o nodeName nulo e o seu nodeValue �Voc� conhece sobre �rvores DOM? Se n�o conhece aprenda em�. No exemplo anterior existem outros elementos de Texto tamb�m como o filho de a.

Cada tipo diferente desses n�s tem suas pr�prias propriedades exclusivas. Como exemplo o n� de Elemento tem um m�todo getAttribute() e um setAttribute(), isso porque somente n�s Elementos podem ter atributos. No entanto, os n�s capturam funcionalidades que s�o compartilhadas por todos os n�s, tantos n�s Elementos quanto os n�s Texto, como as propriedades parent e childNodes.

Para saber com que tipo de n� estamos lidando pode-se usar a propriedade do n� nodeType que retorna um n�mero e esse n�mero � mapeado para um valor armazenado na classe Node. H� um valor para cada tipo de n�.

Por exemplo, para verificar se um n� � do tipo Elemento ou do tipo Texto poderia-se usar o Java script abaixo:


if (algumNodo.nodeType == Node.ELEMENT_NODE) {
  //c�digo aqui
} else {
  if (algumNodo.nodeType == Node.TEXT_NODE) {
    //c�digo aqui
  }
}

Listagem 2. Verificando o tipo do n�

Cuidado com este c�digo, pois alguns browsers podem n�o suportar o Node. No entanto, para saber tem-se que a constante 1 � o n� Elemento e a constante 3 � o n� Texto.

Vamos brincar um pouco com o acesso aos n�s de Texto e n�s de Elementos imprimindo seus valores e nomes al�m de acessar os seus filhos.


<html>
  <head>
    <script language="javascript">
      function testandoArvoreDOM() {
        var element = document.documentElement.lastChild;
        alert("Eu sou o nodo" + element.nodeName);

        var outroElemento = document.getElementsByTagName('h1')[0];
        alert("Eu sou o nodo " + outroElemento.nodeValue);

        var filho = outroElemento.firstChild;
        alert("Eu sou o nodo " + filho.nodeValue);
      }
    </script>

    <title>
      Teste de �rvore DOM
    </title>
  </head>

<body>
  <h1>Teste de T�tulo</h1>
  <p>
    Voc� conhece sobre �rvores DOM? Se n�o conhece aprenda em 
    <a href=�www.devmedia.com.br�>www.devmedia.com.br</a> 
    e seja o mais novo entendido sobre o assunto.
  </p>
  <span onclick="testandoArvoreDOM();">Clique aqui para Testar o Acesso a �rvore DOM</span>
  </body>

</html>

Listagem 3. Imprimindo valores

Clique no texto ao final da p�gina e veja a execu��o desse exemplo. Note que quando tentamos acessar o nodeValue do elemento <h1> que � um n� do tipo Elemento recebemos um null na tela, isso se deve pelo fato de <h1> n�o ter um valor para esta propriedade. Seu filho na �rvore � um n� de Texto que possui um valor que � impresso na tela. O primeiro comando do Javascript �document.documentElement.lastChild� busca o �ltimo n� filho do <HTML>, o primeiro � o <HEAD> e o �ltimo � o <BODY>.

Outros Exemplos

Abaixo iremos ver alguns exemplos de uso de DOM com uma outra vis�o. O exemplo abaixo ir� mostrar uma notifica��o no navegador do usu�rio ap�s cinco segundos.



<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
  <title>Notifier</title>
  <script>

  function notify(text){
    document.getElementById('msg').innerHTML+='<p>'+text+'</p>'
    titleFlick()
  }

  function titleFlick(){
    if(document.hasFocus()){
      document.title='Notifier'
      return
    }
    document.title=document.title=='Notifier'?'* Notifier':'Notifier'
    setTimeout('titleFlick()',500)
  }

  </script>
</head>

<body>
  <input type="button" id="notify" value="Notify in 5 seconds" 
  onclick="notify('Will notify in 5 seconds...');setTimeout('notify(\'Event shoot!\')',5000)" />
  <div id="msg"></div>
</body>

</html>

Listagem 4. Enviando notifica��o para o navegador do usu�rio

Caso voc� queira criar um exemplo de tabelas zebradas usando DOM, voc� pode fazer facilmente usando o c�digo abaixo.



<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Zebra</title>
<style>
  .zebraon{background:silver}
</style>
<script>
window.onload=function(){
  var zebrar=document.querySelectorAll('.zebra tbody tr')
  for(var i=0;i<zebrar.length;i+=2)
    zebrar[i].className='zebraon'
}
</script>
</head>

<body>
<table class="zebra">
  <thead><tr>
      <th>Vendedor</th> <th>Total</th>
    </tr></thead>
  <tbody><tr>
      <td>Manoel</td>   <td>12.300,00</td>
    </tr><tr>
      <td>Joaquim</td>  <td>21.300,00</td>
    </tr><tr>
      <td>Maria</td>    <td>13.200,00</td>
    </tr><tr>
      <td>Marta</td>    <td>32.100,00</td>
    </tr><tr>
      <td>Antonio</td>  <td>23.100,00</td>
    </tr><tr>
      <td>Pedro</td>    <td>31.200,00</td>
    </tr></tbody>
</table>
</body>
</html>

Listagem 5. Criando tabela zebrada com DOM

Conclus�es

Neste artigo vimos o que � o DOM, por que o DOM � utilizado pelos navegadores e como ele � utilizado. Tamb�m vimos como o navegador enxerga um documento HTML criando uma �rvore DOM para organizar as marca��es HTML e como podemos percorrer essa �rvore.

Pode-se ver a import�ncia de entendermos esse importante elemento que � muito utilizado para criar p�ginas complexas e din�micas para a Web. Utilizando o DOM suas p�ginas ficar�o mais ricas, din�micas e inteligentes.

Bibliografia:

Brett McLaughlin. Head Rush Ajax. O�Reilly, 2006. DOM, W3C.

Confira tamb�m

Guias para Front-end e JavaScript

Guia

Curso de Python

Curso

Curso de HTML B�sico

Curso

Tecnologias:

Confira outros conte�dos:

O que s�o arrays e como utiliz�-los no...

Fundamentos b�sicos de JavaScript...

JavaScript setInterval: executando...

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Higor Em 2013

Coment�rios nesta publica��o Escrever um coment�rio sobre conte�do

Fabricio Landim

N�vel 13

Na listagem 4 n�o entedi exatamente o o que faz cada linha do c�digo a partir da linha 08

há +1 ano

Rafael Souza

N�vel 0

Ol� Fabricio, tudo bem ?

Deixa eu te explicar como isso se comporta, Temos um bot�o que quando clicado chama duas fun��es, a primeira � notify, passando um texto como par�metro e em seguida chama uma fun��o de setTimeOut que e executada em 5 segundos, chamando a fun��o notify.

A fun��o notify recebe um texto como par�metro e concatena com o elemento que ela pega do DOM que � a tag div com id msg, e em seguida chama a fun��o titleFlick, recomendo voc� estar dando uma lida em hasFocus para compreender melhor a fun��o.

há +1 ano

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

Trabalhando com DOM em JavaScript

Veja neste artigo o que � DOM, quais s�o suas caracter�sticas e propriedades e, al�m disso, veremos exemplos pr�ticos de como utilizar o DOM em JavaScript.