DEV Community

Fernando Junior
Fernando Junior

Posted on

3 3

DOM - Document Object Model

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)
Enter fullscreen mode Exit fullscreen mode

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", …}
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode

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.

Estrutura do DOM

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:

LinkedIn
GIthub
Twitter

Heroku

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More

Top comments (0)

Image of Stellar post

How a Hackathon Win Led to My Startup Getting Funded

In this episode, you'll see:

  • The hackathon wins that sparked the journey.
  • The moment José and Joseph decided to go all-in.
  • Building a working prototype on Stellar.
  • Using the PassKeys feature of Soroban.
  • Getting funded via the Stellar Community Fund.

Watch the video 🎥

👋 Kindness is contagious

Dive into this insightful write-up, celebrated within the collaborative DEV Community. Developers at any stage are invited to contribute and elevate our shared skills.

A simple "thank you" can boost someone’s spirits—leave your kudos in the comments!

On DEV, exchanging ideas fuels progress and deepens our connections. If this post helped you, a brief note of thanks goes a long way.

Okay