Manipulando o DOM

30/10/2018 - 1 min de leitura

O Document Object Model é uma representação em memória dos objetos HTML e pode ser manipulado com CSS ou JavaScript.

Criando um elemento

Vamos criar um elemento do tipo div e armazena-lo em uma variável para podermos manipulá-lo:

let aviso = document.createElement('div');

Adicionando um elemento no DOM

O elemento está criado, mas não está “anexado” a nenhum outro elemento. No exemplo a seguir vamos anexar o elemento criado ao body:

document.querySelector('body').appendChild(aviso);

Acessando as propriedades de um elemento

Para adicionar um conteúdo em forma de texto

aviso.textContent = 'Usuário cadastrado com sucesso!';

Em alguns casos será necessário manipular o HTML contido no elemento:

aviso.innerHTML = '<h1>Usuário cadastrado com sucesso!</h1>';

Ou remover o HTML contido no elemento:

aviso.innerHTML = '';

É possível alterar os atributos do elemento assim:

aviso.setAttribute('id', 'mensagem');

Definindo as classes CSS:

aviso.className = 'msg msg-alerta';

Adicionando uma única classe:

aviso.classList.add('bg-alerta');

Removendo uma única classe:

aviso.classList.remove('bg-alerta');

Para modificar diretamente o CSS de um elemento;

aviso.style.padding = '0.5em';
aviso.style.backgroundColor = '#2d89ef';

Observe que quando uma propriedade CSS contém dois nomes, como no caso de background-color, acessamos com a junção dos nomes, remoção do traço e com o segundo nome iniciando em maiúsculas: backgroundColor.

Excluir um elemento

Para excluir basta utilizar o método remove():

aviso.remove();