Chegamos a mais um post da minha saga de estudos em JavaScript.
No post de hoje irei falar sobre o DOM.
DOM
DOM é a abreviação de Document Object Model, é o coração de qualquer modificação em uma webpage.
O DOM é criado pelo browser, ele não faz parte do JavaScript em si.
Quando o HTML é carregado no browser, o próprio browser cria o DOM, para que a gente consiga interagir com o documento HTML através do nosso código JavaScript.
Através do DOM podemos por exemplo: criar, remover e editar elementos através do código em JavaScript.
Uma vez que o documento HTML é carregado no browser, o browser cria um objeto que modela este documento, este objeto se chama document.
Este objeto document possui diversas propriedades e métodos que podem ser usados para manipular o documento HTML.
Com isso, fica claro, que para fazer uma manipulação qualquer em uma página, tipo remover um elemento ou responder ao clique de um botão, isso é feito através do objeto document.
console.log(document)
No exemplo acima, o output desse console.log será uma representação do elemento HTML.
Alguns exemplos de propriedades e métodos
Como o document é um objeto, iremos utilizar a anotação de ponto . para acessar as propriedades e métodos.
Location
Irá retornar um objeto com informações sobre a URL do documento.
console.log(document.location)
// Output
Location {ancestorOrigins: DOMStringList, href: "http://127.0.0.1:5500/etapa-05-o-document-object-m…el-dom/aula-01/aula-01-06-o-que-eh-dom/index.html", origin: "http://127.0.0.1:5500", protocol: "http:", host: "127.0.0.1:5500", …}
URL
Irá retornar apenas a URL do documento.
console.log(document.URL)
// Output
http://127.0.0.1:5500/etapa-05-o-document-object-model-dom/aula-01/aula-01-06-o-que-eh-dom/index.html
Estrutura de Árvore
O DOM vê o nosso HTML como uma estrutura de árvore, em forma de nós (nodes em ingês), e cada um dos elementos é considerado um nó (node em inglês).
A tag raiz do documento é a tag HTML, chamada de root node.
Acima estrutura em forma de árvore, para exemplificar como o DOM enxerga o elemento HTML.
Vou deixar um link da MDN para mais detalhes sobre o Document Object Model
Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!
Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:
Top comments (0)