Objeto document: DOM em JavaScript (Modelo de Objeto de Documentos)

Neste tutorial de nosso Curso de JavaScript, vamos aprender um dos conceitos mais importantes da linguagem, o Modelo de Objetos de Documento, o famoso DOM (Document Object Model).

DOM - O que é? Para que serve?


DOM é a abreviação de Document Object Model, ou seja, Modelo de Objetos de Documento e nada mais é que uma convenção, uma representação de uma página de internet.

Basicamente, sempre que você entra em uma página, um documento é criado. Esse documento representa todos os elementos de uma página como um objeto.

E por qual motivo isso é bom? Simples, pois já aprendemos a usar objetos em JavaScript.

Assim, podemos fazer uma conexão entre a linguagem JS e uma página qualquer da Web.
Isso inclui: identificar, criar, modificar e até remover elementos de uma página.

Através da DOM, o JavaScript pode:
  • Mudar todos os elementos, atributos e até estilos CSS
  • Adicionar ou remover qualquer elemento do documento HTML
  • Tratar, reagir e criar eventos na página

Árvore DOM e seus Nós


A organização da DOM é através de uma hierarquia de elementos, veja:


O que é DOM em JavaScript
Toda essa estrutura, que representa uma página completa de web, é chamado de árvore DOM.
Note como ele tem algumas 'ramificações', são os nós da DOM.

Todo e qualquer elemento de uma página HTML5, é um nó, isso inclui texto, elementos, atributos etc, e todos esses nós constituem a árvore (node e tree).

Acesse uma página de internet qualquer, como a globo.com
Depois dê o comando: control + shift + i
E você irá ver a árvore DOM da página.

Ainda na hierarquia acima, nós que estão no mesmo nível são ditos sibling (irmãos), e nós aninhados são pais e filhos.

Objeto document



A parte mais legal do DOM, é percorrer seus elementos, seja para acessar, alterar, adicionar ou até excluir.

De fato, já vinhamos fazendo isso durante nosso curso de JavaScript...lembra do:
document.write( string ) ?

Usamos a propriedade write() do objeto document para escrever na página.
Também usamos o getElementById, para fazer uma ligação entre uma variável do JavaScript e alguma div do HTML.

O objeto document possui muitas e muitas propriedades e métodos, vejamos alguns:

  • documentElement - Pega a tag <html> de uma página
  • getElementById - Pega algum elemento de uma página, através do atributo id
  • getElementsByClassName - Busca elementos a partir da classe
  • createElement - Cria um elemento qualquer numa página
  • createAttribute - Cria um atributo
  • createTextNode - Cria um nó do tipo texto
  • getElementsByTagName - Pega um array de elementos com mesmo nome (tag)
  • appendChild - Insere abaixo (filho) um novo nó
  • removeChild - Remove um nó
  • parentNode - Retorna o pai de um nó

Para alterar elementos de um documento:
  • element.innerHTML =  novo conteúdo - altera o conteúdo de um elemento HTML
  • element.attribute = novo valor - altera o atributo de um elemento do documento HTML
  • element.setAttribute(atributo, valor) - muda o atributo de um elemento para outro valor
  • element.style.property = novo estilo - muda o estilo (CSS) de um elemento da página


Você pode ver mais em:
https://www.w3schools.com/jsref/dom_obj_document.asp
https://www.w3schools.com/js/js_htmldom_document.asp

Dá pra fazer praticamente de tudo em um documento HTML a partir do JavaScript, usando o document. Todo esse acesso, busca de informação, alteração e até possibilidade de excluir um elemento ou propriedade, se faz através da árvore DOM.

Nenhum comentário:

Postar um comentário