Ilustração de um computador. Work illustrations by Storyset.

Estudos em Javascript

DOM: Document Object Model

O que é DOM?

É a interface entre os objetos do HTML e a linguagem Javascript.

Ele fornece uma representação estruturada do documento como uma árvore. O DOM define métodos que permitem acesso à árvore, para que eles possam alterar a estrutura, estilo e conteúdo do documento. Fonte: MDN Web Docs.

Alguns tipos de objetos são:

Árvore DOM

É um organograma que representa a estrutura de um documento.

Árvore DOM

O objeto imediatamente acima de outro, se chama Parent desse objeto. Na imagem o <html> é parent do <body>.

Já o objeto imediatamente abaixo de outro, é chamado de Child. Na árvore DOM acima, a <div> é child do <body>.

Acessando Objetos

É possível acessar esses objetos com javascript das seguintes formas:

.getElementsByTagName

Acessa o objeto através da TAG.

const primeiroParagrafo = window.document.
getElementsByTagName("p")[0];

Sendo ("p") a tag que será acessada e [n] o número (na ordem) de qual das tags p está sendo acessada (começando por zero).

.getElementById

Acessa o objeto através do ID definido.

<p id="texto"> Parágrafo </p>  
  const textoI = window.document.
getElementById("texto");

.getElementsByClassName

Acessa o objeto através da CLASSE definida.

<p class="texto"> Parágrafo </p>  
  const textoCN = window.document.
getElementsByClassName("texto");

.getElementsByName

Acessa o objeto através do NOME definido.

<p name="texto"> Parágrafo </p>  
  const textoN = window.document.
getElementsByName("texto");

.querySelector

Acessa o primeiro objeto encontrado com o seletor CSS definido. É uma tecnologia mais recente, por isso pode não ser aceita por todos os navegadores.

<p id="texto"> Parágrafo </p>  
  const textoQS = window.document.
querySelector("p#texto");

Executando Comandos

window.document.
getElementById("texto").style.color = "#D94C1A";

Esse texto vai mudar de cor!

Eventos DOM

Os eventos são notificações de código que adicionam interatividade a interface.

Tipos de Eventos

Lista de Eventos da MDN Web Docs