Manipular o DOM em JavaScript: selecionar e alterar a página

O DOM (Document Object Model) é um sistema de representação dos elementos de um documento HTML sob a forma de objetos, manipuláveis pela linguagem JavaScript. Ou seja, quando usas o JavaScript para trabalhar com o DOM, podes acrescentar, remover, alterar ou aceder aos elementos HTML da tua página web.

Neste exemplo vamos usar o código HTML seguinte para ilustrar as várias técnicas de manipulação do DOM:

<div id="container">
  <h1 class="title">Mon titre</h1>
  <p class="description">Ma description</p>
  <ul>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
  </ul>
</div>

Selecionar nós do DOM

Para manipular o DOM, começa por selecionar os nós que queres alterar. Há vários métodos para selecionar nós em JavaScript:

• O método document.getElementById seleciona um nó a partir do seu ID. Por exemplo, para selecionar a div com o ID «container», a sintaxe é esta:

const container = document.getElementById('container');

• O método document.getElementsByClassName seleciona uma lista de nós a partir da sua classe. Por exemplo, para selecionar todos os elementos li com a classe «item»:

const items = document.getElementsByClassName('item');

• O método document.querySelector seleciona o primeiro nó que corresponde a um seletor CSS. Por exemplo, para selecionar o primeiro elemento li da lista:

const firstItem = document.querySelector('li');

Este método devolve o primeiro elemento que corresponde ao seletor indicado. Se não encontrar nenhum, o valor devolvido é null.

• O método document.querySelectorAll é semelhante, mas devolve uma lista com todos os nós que correspondem ao seletor indicado. Por exemplo:

const items = document.querySelectorAll('li');

Este método seleciona vários elementos ao mesmo tempo. Podes percorrê-los com um ciclo, como vimos no capítulo sobre os ciclos.

Se seguiste esse capítulo, fica a saber que podes usar o método forEach do objeto Array com document.querySelectorAll('li'). Faz-se assim:

document.querySelectorAll('li').forEach(function(li) {
  // Código a executar para cada elemento li
});

Este código seleciona todos os elementos li da página e executa código para cada um deles. Por exemplo, para acrescentar um evento «click» a cada elemento li:

document.querySelectorAll('li').forEach(function(li) {
  li.addEventListener('click', function() {
    console.log("L'élément li a été cliqué !");
  });
});

Também podes usar uma arrow function em vez da função anónima:

document.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', () => {
    console.log("L'élément li a été cliqué !");
  });
});

• Também podes selecionar elementos pelos seus identificadores ou pelas suas classes, tal como se faz em CSS. Por exemplo:

const container = document.querySelector('#container');
const title = document.querySelector('.title');

Com esta sintaxe selecionas elementos a partir dos seus identificadores ou das suas classes. É útil quando queres manipular esses elementos em concreto em JavaScript.

Existem muitas outras formas de selecionar elementos no DOM em JavaScript, mas estes métodos são dos mais usados e são uma boa base para começar.

Alterar o DOM em JavaScript

Agora que já vimos vários métodos para ir buscar um elemento em concreto ao nosso código HTML, vamos ver como alterar o DOM acrescentando conteúdo ou mudando o texto e o CSS.

Acrescentar HTML em JavaScript

Podes acrescentar HTML a um elemento do DOM com a propriedade innerHTML. Por exemplo, para acrescentar um item no fim da lista:

const ul = document.querySelector('ul');
ul.innerHTML += '<li class="item">Item 4</li>';

Acrescentar um novo elemento em JavaScript

Também podes criar um novo elemento e acrescentá-lo a um elemento do DOM com o método appendChild. Por exemplo, para acrescentar um item no fim da lista:

const ul = document.querySelector('ul');
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = 'Item 4';
ul.appendChild(newItem);

Mudar o texto de um elemento em JavaScript

Podes mudar o texto de um elemento com a propriedade textContent. Por exemplo, para mudar o texto do título:

const title = document.querySelector('.title');
title.textContent = 'Nouveau titre';

Acrescentar CSS a um elemento em JavaScript

Podes acrescentar CSS a um elemento do DOM com a propriedade style. Por exemplo, para pôr o parágrafo a vermelho e a negrito:

const p = document.querySelector('p');
p.style.color = 'red';
p.style.fontWeight = 'bold';

Também podes usar o método setAttribute para acrescentar CSS a um elemento. Por exemplo:

const p = document.querySelector('p');
p.setAttribute('style', 'color: red; font-weight: bold;');

Conclusão

Existem muitas outras formas de manipular o CSS de um elemento do DOM em JavaScript, mas estes métodos são dos mais usados e são uma boa base para começar.

Além do CSS, podes manipular outros aspetos de um elemento do DOM, como o seu conteúdo HTML ou de texto, ou ligar-lhe eventos: um clique, a passagem do rato por cima do texto, etc.

No próximo capítulo vamos ver os eventos em JavaScript e como trabalhar com eles.