Nesse post você vai aprender com exemplos simples como manipular o DOM no JavaScript. Mas, antes de mais nada, precisamos entender o significado de DOM. DOM é uma abreviação para Document Object Model (Modelo de Objeto do Documento). Não resolveu nada essa explicação, eu sei, rs. O que fazemos com isso na prática? Com o DOM nós conseguimos acessar qualquer elemento HTML com o JavaScript e fazer o que quisermos com ele, e além disso, ainda conseguimos criar um novo elemento dentro do JS também.

Esse post faz parte de uma série de conteúdos sobre programação web com JS… quer ver mais? Clique aqui.

As “raízes” da árvore

É sempre interessante dar uma consultada na rede sobre como as coisas nasceram, mas vou resumir um pouquinho aqui só pra você entender o espírito da coisa. O conceito de DOM começou a ser discutido nos anos 90 durante a “guerra dos navegadores” que teve como principais concorrentes o Netscape e também nosso amado Internet Explorer.

A sua evolução passou por diversas fases, algumas mais simples onde o DOM era limitado há alguns elementos que poderiam ser acessados. Um pouco mais a frente nessa história, o DOM foi padronizado pela W3C que ajudou a desenvolver os famosos ECMAScript, que posteriormente serviram de base para implementação do JavaScript e JScript.

A partir daí a linguagem se desenvolveu bastante e implementou funções para pegar elementos do HTML e também um modelo de eventos. Depois disso, as versões passaram a suportar XPATH, serialização de documentos XML entre várias outras firulas técnicas.

Mas o importante é que o JavaScript meio que saiu de um “limbo” em que ele era considerado nocivo aos computadores. Quem é mais velho deve lembrar que códigos muitas vezes eram bloqueados por serem considerados ameaças. Atualmente, seu navegador consegue fazer MUITA coisa graças à evolução dessa linguagem e tornou a sua experiência de navegação muito melhor (ou não).

Esse texto foi adaptado da Wikipedia. (CC-BY-SA 3.0)

Primeiros passos

Para manipular o DOM vamos entender como isso funciona na prática!

Primeiro vamos deixar pronta uma div com uma classe no HTML, para posteriormente podermos acessá-la no JS:

<div class="contato"></div>

Além disso, vamos criar um botão para podermos interagir com a nossa interface:

<button id="fale">Fale comigo!</button>

Agora precisamos “pegar” esse botão usando o JS, através de um seletor chamado querySelector. E em seguida, vamos adicionar um evento a esse botão, quando o usuário clicar com o mouse.

// pegando o  botão usando o seletor de ID "fale"
const button = document.querySelector("#fale")

// adicionando um evento quando o usuário clica no botão e chama a função "faleComigo"
button.addEventListener("click", faleComigo);

Vamos agora implementar a função “fale comigo” que está atrelada ao botão:

function faleComigo(){
  // Selecionando a div "contato"
  const divContato =  document.querySelector(".contato");
  
  // Colocando o texto na div
   divContato.innerText = "Olá pessoa, deu certo!";
}

Então o resultado é o seguinte:

See the Pen [Como manipular o dom em Javascript] Exemplo básico de manipulação do DOM (fale comigo) by Computer Science Master (@ComputerScienceMaster) on CodePen.

Agora vamos ver outras opções de manipulação do DOM

• Acessando todos os elementos de uma lista, por exemplo

const lis = document.querySelectorAll("ul li")

• Mudando o conteúdo de um botão

button.innerText = "Pagar agora"

// É possível mudar o estilo também:
button.style.background = "red";
button.style.color = "white";

• Criando um novo botão (newButton) e pendurando-o dentro da tag body (necessariamente uma referência que já existe no HTML)

const body = document.querySelector("body")
const newButton = document.createElement("button")
newButton.innerText = "Pague aqui"
body.appendChild(newButton)

• Criando uma lista de nomes dentro da <ul class=”lista”> vazia do HTML

let filaAtendimento = ["Vanessa", "Vinicius", "Ligia", "Maria", "Pedro", "Gustavo", "Sueli", "Nelson"]

const lista = document.querySelector(".lista")
for(let i = 0; i < filaAtendimento.length; i++) {
       const liNome = document.createElement("li")
       liNome.innerText = filaAtendimento[i]
       lista.appendChild(liNome)
}

//OBS: a tag mãe sempre vem primeiro, e a tag filha que será pendurada, dentro dos parênteses.

See the Pen Untitled by Computer Science Master (@ComputerScienceMaster) on CodePen.

Exercícios sobre manipulação do DOM

Quer praticar? Temos uma lista de exercícios sobre isso aqui no nosso blog. Confira.