JavaScript - DOM Document Object Model Introdução

DOM Document Object Model

Imagem Dom Titulo

O que é DOM?

Dom é uma modelo de objetos internos de um navegador e sua hierarquia, traduzindo literalmente, significa "Modelo de documento de objetos".

Dom é uma mapeamento dos elementos contidos internamente dentro de um navegador, e permite a nós termos acesso a cada elemento através do JavaScript.

É muito importante, quando você criar sua página Html, que você faça o mapeamento do Dom da sua página, assim facilita no seu acesso.

A hierarquia de elementos funciona na forma de pai e filho (Parent and Child).

Abaixo temos uma imagem explicando o Dom de uma forma simples:

Imagem modelo de Dom

Window(Janela), é a raíz do Dom, tudo se inicia por ela, seguida por:  

Location é a localização do seu site, a sua Url.

History é o histórico de navegação do seu site.

Document é o documento atual do seu site, ou seja, é o acesso para seu html.

Exemplo de caminho de acesso de um elemento dentro da tag <body>:

WindowDocumentFunção JavaScript + ID do elemento

Na verdade há várias formas de acessarmos os elementos:

  1. Pela tag do elemento;
  2. Pelo Id do elemento;
  3. Pelo nome;
  4. Pela classe;
  5. Por seleção.

Espero que tenham gostado do post, essa é a primeira parte, no próximo irei demonstrar como funciona o acesso dos elementos por cada forma listada acima.

Sigam, compartilhem e comentem. Abraços!!

Comentários