JAVASCRIPT | Manipulando a Dom

Gabriel Cerqueira
Jul 11 · 4 min read

Olá, a seguir vamos aprender como manipular a DOM dos nossos elementos, sem que “sujemos” a parte do algoritmo em HTML. Isto faz com que eu possa automatizar tarefas, realizar operações ou minificar o nosso código, as opções são amplas dentro de JAVASCRIPT!

Sem mais “pernilongas” já vamos criar uma função que crie um alerta ao clicar em um botão DENTRO DO AMBIENTE DE JS.

Primeiramente iremos criar nossa estrutura básica de desenvolvimento, e ao final do BODY introduzimos a parte em que será executada nossas funções em JS.

Agora vamos criar um botão com CLASS = btn, e em seguida nomeá-lo como “Criar Alerta”

Feito isto, já pensando na parte lógica do nosso programa, necessitamos referenciar a posição do nosso botão dentro do JAVASCRIPT, para então, posteriormente estar criando a função.

Seguiremos criando uma variável chamada de BtnElement, que irá guardar a posição do nosso btn usando o document.querySelector seguido de um “.” + o nome da nossa classe. O ponto diz ao nosso código que eu estou buscando por classes!

Feito, agora é só criar uma função, que quando eu clico no botão ele crie um alerta, como? Usando um “onclick” dentro da variável que contém o botão. Segue código:

Enfim eis nossa saída:

Agora vamos “aumentar o nível”, iremos criar um input e exibir o valor do input dentro do nosso alerta, e após exibir no alerta apagar o valor do input.

Primeiro vamos criar o input, obviamente! Em seguida vamos referenciar da mesma forma que fizemos com o botão:

Feito, iremos criar uma variável dentro da nossa função que irá guardar o que foi digitado dentro do nosso input, em seguida exibi-lo no alerta e por fim fazer o input receber o elemento vazio para limpar o mesmo!

Eis nossa saída:

Agora vamos para um novo exercício: para cada vez que o botão for clicado, vamos criar um novo quadrado vermelho com tamanho 50px x 50px. Pra isto precisamos utilizar duas ferramentas, createElement que irá criar uma novo elemento que será nosso quadrado e a nossa querida AppendChild, que irá levar nossa variável BOX criada para dentro da estrutura HTML.

Primeiro, como já visto, vamos guardar a posição do nosso botão e da nossa DIV.

Agora vamos criar a nossa função que será invocada ao clicar no botão

Em seguida, criamos nosso elemento com o document.createElement dentro de uma variável chamada BoxElement, jogamos essa variável dentro da nossa DIV usando nosso queridíssimo appendChild.

Antes de exibir o código, vou deixar mais claro a sintaxe da appendChild pra vocês não se atrapalharem: VARdaDIV.appendChild(ElementoQvamosTransferir). Basicamente guardamos a posição da div que vamos “jogar” nossa box, chamamos a appendChild e dentro dos seus parênteses colocamos a VAR da box que vamos transferir.

Agora é só alterar o visual dos seus elementos:

e chegamos ao final xD

Caso esteja com dificuldades, basta prestar bastante atenção no nome da variável dos elementos e como/quando eles são usados. Enfim espero que você tenham entendido e aproveitado ao máximo :D.