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:
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.
melhor explicação que eu já vi ! Parabéns!
ResponderExcluir