Trabalhando com o DOM · Portal Micilini

O que é DOM?

DOM é uma sigla para Document Object Model, cuja tradução é Modelo de Documento de Objeto.

Ele representa a estrutura de um documento HTML, de modo a organizar o relacionamento entre esses elementos (tags), para que posteriormente possamos seleciona-los separadamente.

De acordo com a ilustração acima, pense no DOM como uma grande arvore, onde temos em primeiro lugar, o pai de todos os elementos que é representado pela tag <html>, seguido das outras tags que compõe o documento inteiro (<body>, <div>, <p>, <h1>...).

É por meio da DOM que o seu código Javascript conseguirá trabalhar com cada um dos elementos existentes no corpo do seu arquivo HTML, e isso incluí:

Adicionar novos botões,
Recuperar valores de um campo de texto,
Remover ou esconder certos elementos do HTML,
Saber quando um usuário clicou em um determinado botão,
E tudo o que você possa imaginar.

É importante ressaltar que quando o arquivo HTML é renderizado (lido) pelo seu navegador, por de baixo dos panos ele cria toda essa estrutura em arvore de maneira organizada.

De modo que você como desenvolvedor, consiga manipular essa grande arvore de forma mais rápida e tranquila.

Sem a DOM, precisaríamos fazer um PARSE do arquivo .html (pois ele não deixa de ser um texto), de modo a fazer uma nova renderização com as modificações que queremos.

Aviso Importante: Para continuar é necessário que você já tenha um conhecimento prévio sobre algumas tecnologias como HTML e CSS.

Trabalhando com Document

No JS, nós temos acesso a um objeto global chamado document.

Servindo como um ponto de entrada para o conteúdo da página da Web, que é a árvore DOM.

Como vimos, a árvore DOM pode incluir muitos elementos como <body>, <table>, <div> e afins.

Ela fornece acesso global ao documento em si, permitindo realizar qualquer tipo de alteração sobre ele.

Em outras palavras... sabe aquele campo de texto, aquela div, aquele input, aquele select, aquela tag do html, aquele heading... todos esses elementos são manipulaveis!

E quando digo manipuláveis, digo isso no sentido literal da palavra, de modo que você consiga fazer a manipulação completa deles, e isso incluí criar novos elementos, modificar os já existentes, ou até removê-los e escondê-los.

Você pode consultar toda a documentação referente ao document neste link.

Selecionando Elementos (Padrão)

Como você já deve saber, as tags do HTML como divs, sections, footer... costumam ter seus próprios atributos, como é o caso dos atributos class, id e afins.

São por meio desses atributos que o CSS consegue estilizar aquele elemento HTML.

Já com o JS, é possível selecionar um ou mais elementos específicos, seja passando o nome da class, o id, um atributo ou a tag que você deseja selecionar.

Antes de continuar tenha em mente que iremos trabalhar em cima da seguinte estrutura HTML:

<html lang="pt-br">
<head>
<title>Selecionando Elementos com JS</title>
</head>
<style>
#corVermelha{ color: red }
</style>
<body>
<p id="meuID">Olá Mundo!!!</p>
<div class="minhaClasse">1, 2, 3</div>
<input type="text" name="campo_nome" />
</body>
</html>

getElementById()

O método getElementById() da interface document retorna um objeto do tipo Element, que representa o elemento cuja propriedade id corresponde à string especificada.

const elemento = document.getElementById("meuID");

O comando acima irá selecionar o elemento <p> que contém o texto "Olá Mundo", para que mais tarde possamos fazer alterações nele.

getElementsByClassName()

O método getElementsByClassName da interface document retorna um objeto semelhante a uma matriz de todos os elementos filhos que possuem todos os nomes de classe fornecidos.

const elemento = document.getElementsByClassName("minhaClasse");

Perceba que ele usa o S no final de Elements, pois esse comando consegue selecionar mais um elemento, uma vez que é possível ter diversos elementos com o mesmo nome da classe.

No caso do comando acima irá selecionar o elemento <div> que contém o texto "1, 2, 3", para que mais tarde possamos fazer alterações nele.

getElementsByName()

O método getElementsByName() da interface document retorna uma Coleção NodeList de elementos com um determinado atributo de nome no documento.

const elemento = document.getElementsByName("campo_nome");

Perceba que ele usa o S no final de Elements, pois esse comando consegue selecionar mais um elemento, uma vez que é possível ter diversos elementos com o mesmo atributo nome.

No caso do comando acima, ele irá selecionar o elemento input do tipo texto, para que mais tarde possamos fazer alterações nele.

getElementsByTagName()

O método getElementsByTagName() da interface document retorna um HTMLCollection de elementos com o nome da tag fornecida.

const elemento = document.getElementsByTagName("p");

Perceba que ele usa o S no final de Elements, pois esse comando consegue selecionar mais um elemento, uma vez que é possível ter diversos elementos com o mesmo atributo nome.

No caso do comando acima, ele irá selecionar todos os elementos do tipo <p>.

Iterando com múltiplos elementos

Anteriormente, nós vimos que alguns métodos do document possuem um S, o que significa que eles podem retornar mais de um elemento caso houver.

Nesse caso, métodos como:

getElementsByTagName()
getElementsByName()
getElementsByClassName()

Com exceção do getElementById() que só irá retornar o primeiro elemento da arvore que encontrar, todos os outros podem retornar mais um um único elemento.

Pois bem, quando é retornado múltiplos elementos por um dos três métodos acima, você pode fazer o uso laços forEach ou For da seguinte forma:

const elementos = document.getElementsByTagName("p");//Poderia ser qualquer um dos 3 métodos que contém o 'Sem 'Elements'.

Array.from(elementos).forEach(elemento => /* LÓGICA AQUI... */);

for(let element of elementos){
/* LÓGICA AQUI... */
}

Caso desejar, você pode converter os elementos selecionados em um array por meio do operador spread.

const elementos = document.getElementsByTagName("p");//Poderia ser qualquer um dos 3 métodos que contém o 'Sem 'Elements'.

const elementosArray = [...elementos];

elementosArray.forEach(elemento => /* LÓGICA AQUI... */);

Selecionando Elementos (QuerySelector)

Uma das formas modernas de fazer seleção de elementos no HTML é usando o QuerySelector.

Com ele podemos trabalhar de forma mais livre, e menos engessada do que os padrões que vimos anteriormente.

No caso do QuerySelector, passamos diretamente por parâmetro o ponto (.), caso queiramos selecionar uma classe, ou o cerquilha (#), caso queiramos selecionar um id.

No caso de um atributo, podemos encapsula-lo usando os colchetes [].

Também é possível selecionar elementos da mesma forma que selecionamos com o CSS, usando inputs, fazendo verificações e validações (:has, :nth-class, :not...).

Ou seja, com o QuerySelector, nós podemos trabalhar com os elementos do HTML da mesma forma que trabalhamos com eles no CSS.

const elementoUM = document.querySelector(".minhaClasse");

const elementoDois = document.querySelector("#meuID");

const elementoPorAtributo = document.querySelector("[meu-atributo]");

const elementoTres = document.querySelector("input[name=campo_nome]");

//Outros exemplos
const el = document.querySelector(
"div.user-panel:not(.main) input[name='login']",
);

const el = document.querySelector("div.user-panel.main input[name='login']");

É importante ressaltar que o QuerySelector irá selecionar o primeiro elemento que encontrar, mesmo que existam mais de um elemento com o mesmo critério.

Já com o QuerySelectorAll, conseguimos selecionar todos os elementos que atendem a um determinado critério.

É importante ressaltar que cada elemento será retornado em um formato de lista.

const elementoUM = document.querySelectorAll(".minhaClasse");

const matches = document.querySelectorAll("div.note, div.alert");

const matches2 = document.querySelectorAll("iframe[data-src]");

const matches3 = container.querySelectorAll("li[data-active='1']");

E para interagir sobre todos os elementos selecionados, podemos fazer o uso do forEach:

const highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach((item) => {
/* O elemento é representado pela variável temporária chamada 'item*/
});

Caso desejar, você pode criar uma função anônima em conjunto com os seletores:

const selecionar = seletor => document.querySelectorAll(seletor);

selecionar('p');
selecionar('#meuID');
selecionar('.minhaClasse').forEach((item) => {
/* O elemento é representado pela variável temporária chamada 'item*/
});

Alterando classes de elementos

O elemento ClassList é uma propriedade somente leitura que retorna uma coleção DOMTokenList ativa dos atributos de classe do elemento. Isso pode então ser usado para manipular a lista de classes.

Com ela podemos remover uma determinada classe de um elemento, adicionar novas classes, verificar se contém uma determinada classe, selecionar todo o texto existente dentro desse elemento e entre outras possibilidades.

Veremos esse elemento em ação:

const elemento = document.getElementById("meuID");//Seleciona o Elemento cujo ID é "meuID"
const elementos = document.getElementsByClassName("minhaClasse");//Seleciona o Elemento cuja class é "minhaClasse".

console.log(elementos[0].className);//Retorna o nome da classe daquele elemento

elementos[0].classList.add("anotherclass");//Adiciona o nome de uma classe para aquele elemento
elementos[0].classList.remove("minhaClasse-2");//Remove o nome de uma classe para aquele elemento

console.log(elemento.outerHTML);//Retorna o HTML existente fora daquele elemento.

console.log(elemento.innerHTML);//Retorna o HTML existente dentro daquele elemento. 

console.log(elemento.classList.contains("fooger"));//Verifica se o elemento tem uma classe chamada 'fogger', retorna true ou false.

//Adiciona ou remove múltiplas classes
elementos[0].classList.add("foo", "bar", "baz");
elementos[0].classList.remove("foo", "bar", "baz");

//Adicionar ou remover várias classes usando a sintaxe de propagação
const cls = ["foo", "bar"];
elementos[0].classList.add(...cls);
elementos[0].classList.remove(...cls);

//Substitui a classe "foo" pela classe "bar"
elementos[0].classList.replace("foo", "bar");

elementos[0].classList.toggle("bar");//se visível estiver definido, remova-o, caso contrário, adicione-o. 'visibleé nome de uma classe, mas poderia ser qualquer outra.

elementos[0].classList.toggle("foo", 1 < 10);//adiciona/remove visível, dependendo da condicional do teste, i menor que 10. 'visibleé nome de uma classe, mas poderia ser qualquer outra.

elementos[0].className = "minhaClasse-2";//Define o nome da classe daquele elemento, removendo todas as outras.

Trabalhando com Formulários

Com o document podemos retornar todos os valores de um determinado formulário.

Supondo que você tenha esse formulário na sua estrutura HTML:

<form name="pesquisa" action="https://meusite.com/pesquisar">
<input type="text" name="q" placeholder="Digite a palavra-chave">
<select name="hl">
<option value="produtos">Produtos</option>
<option value="usuarios">Usuarios</option>
</select>
</form>

Você pode usar um dos comandos abaixo para retornar todos os valores dos elementos existente naquele <form>:

const form1 = document.forms;

const form2 = document.forms[0];//Caso existir mais de um formulário na aplicação

const form3 = document.getElementsByName('pesquisa');//Podemos selecionar pelo ID ou nome da Classe caso desejar

const form4 = document.pesquisa;

const form5 = document.pesquisa.q;//Para selecionar somente o input cujo name é q.

document.pesquisa.q.value = "Micilini Roll";//Aqui estamos alterando o valor daquele input

document.pesquisa.hl.value = "usuarios";//Aqui estamos modificando a opção do select

Como recuperar os elementos de um formulário e enviar usando o XMLHttpRequest?

Para isso podemos trabalhar em conjunto com o FormData:

const form = document.querySelector('form');
const params = new FormData(form);
const request = new XMLHttpRequest();
request.send(params);

Também é possível fazer isto, por meio da API URLSearchParams:

const form = document.querySelector('form');
const formParams = new URLSearchParams(new FormData(form)).toString();

Selecionando Elementos (NodeElements)

Com o document, podemos navegar dentro da DOM de modo a selecionar e trabalhar com outros elementos, que muitas das vezes, existem dentro de outros.

Fazendo também, a seleção dos filhos de um determinado elemento, do primeiro, segundo, terceiro filho em diante.

Para isso vamos trabalhar em cima da seguinte estrutura HTML:

<div>
<p>Título<p>
</div>
<div id="id_um">
<ul>
<li>Micilini</li>
<li>João</li>
<li>Gabriela</li>
</ul>
</div>
<div>
<p>Rodapé<p>
</div>

Selecionando o elemento pai:

const lista = document.querySelector('div ul');
console.log(lista.parentNode);//O resultado será a <div> cujo ID é "id_um"

Selecionando os elementos filho:


const lista = document.querySelector('div ul');
console.log(lista.childNode);//O resultado um NodeList, onde conterá 3 elementos do tipo <li> e 3 textos

O childNode pode trazer três textos diferentes, durante a sua seleção.

Você precisa entender que isso só aconteceu, porque há espaços e quebras de linhas no corpo do seu HTML.

Se você remover esses espaços de modo que fique dessa forma:

<div id="id_um">
<ul><li>Micilini</li><li>João</li><li>Gabriela</li></ul>
</div>

O retorno será somente de três elementos do tipo <li>.

Selecionando o primeiro elemento da lista:

const lista = document.querySelector('div ul');
const primeiro = lista.firstChild;
console.log(primeiro);//Retorna o primeiro elemento daquela lista

Seleciona o último elemento da lista:

const lista = document.querySelector('div ul');
const primeiro = lista.lastChild;
console.log(primeiro);//Retorna o último elemento daquela lista

Seleciona o próximo elemento da lista:

const lista = document.querySelector('div ul');
const primeiro = lista.nextSibling;
console.log(primeiro);//Retorna o segundo elemento

Seleciona o elemento anterior da lista:

const lista = document.querySelector('div ul');
const primeiro = lista.previousSibling;
console.log(primeiro);//Retorna o elemento anterior

Seleciona o elemento filho da lista:

const lista = document.querySelector('div ul');
const primeiro = lista.children;
console.log(primeiro);//Retorna o elemento anterior

Selecionando o primeiro e o último elemento filho:

const lista = document.querySelector('div ul');
const primeiro = lista.firstElementChild;
const ultimo = lista.lastElementChild;

Selecionando os elementos próximos e anteriores na lista de filhos:

const lista = document.querySelector('div ul');
const anterior = lista.parentNode.previousElementSibling;
const proximo = lista.parentNode.nextElementSibling;

Selecionando somente o texto de um determinado elemento:

console.log(lista.innerText);

Acessando Atributos

Cada elemento do HTML possuí seus próprios atributos. O ID e CLASS são exemplos de atributos. Assim como VALUE e SRC também são considerados atributos.

Considerando que temos a seguinte estrutura em HTML:

<img src="./foto.png" alt="Minha Foto" />

Podemos recuperar esses atributos da seguinte forma:

const img = document.querySelector('img');

const atributo = img.getAttribute('src');//Recupera o atributo onde tem o caminho da imagem
const atributo2 = img.src;//Mesma lógica do anterior
const atributo3 = img['src'];//Mesma lógica do anterior
const atributo4 = img.getAttributeNode('src');//Pega o atributo pelo Node
const atributoAlt = img.alt;//Recupera o atributo Alt

const nodeTypeIMG = img.nodeType;//Recupera o NodeType
const nodeNameIMG = img.nodeName;//Recupera o NodeName
const nodeValueIMG = img.nodeValue;

Considerando agora que nós temos o seguinte link:

<a href="https://micilini.com" target="">Abrir Link</a>

Podemos recuperar esses atributos da seguinte forma:

const link = document.querySelector('a');
const href = link.href;

Da mesma forma que podemos recuperar seus atributos, também podemos alterar o seu valor:

const link = document.querySelector('a');
link.href = "https://google.com.br";

Vamos imaginar agora que temos o seguinte elemento HTML com 3 atributos personalizados:

<div id="produtos" sony="avilson" data-id="78"></div>

Podemos trabalhar com esses atributos da seguinte forma:

const elemento = document.querySelector('div[sony=avilson]');//Seleciona o elemento DIV cuno atributo sony é igual a avilson

const childNodesDIV = elemento.childNodes;//Seleciona todos os nodes filhos
const atributo = elemento.data-id;//Seleciona o atributo 'data-id'

const atributo2 = elemento.getAttribute('data-id');//Pega o atributo chamado 'data-id'
const booleanValue = elemento.hasAttribute('id');//Verifica se um atributo existe, se existir retorna true, se não retorna false.

elemento.setAttribute('data-id', 'loops');//Altera um atributo existente
elemento.setAttribute('status', 'open');//Define um atributo que não existe

elemento.removeAttribute('id');//Remove o atributo 'id'

Podemos também fazer o uso da propriedade attributes da seguinte forma:

const elemento = document.querySelector('#produtos');

const atributo = elemento.attributes;//Retorna a lista de todos os atributos daquele elemento
const atributoUm = elemento.attributes[0];//Retorna o primeiro atributo definido
const atributoDois = elemento.attributes.datar;//Seleciona o atributo chamado 'datar'
const atributoTres = elemento.attributes['datar'];//Outra forma de selecionar o atributo chamado 'datar'

elemento.attributes.datar = "Nonerst";//Altera o valor de um atributo

Trabalhando com Classes

Com o document, temos acesso ao ClassList, que nos permite trabalhar com o atributo class, seja adicionando, removendo ou fazendo validações com o mesmo.

Para testar, vamos partir do pressuposto de que temos a seguinte estrutura em HTML:

<div>Micilini</div>

Vejamos agora algumas das possibilidades do ClassList:

const minhaDiv = document.querySelector('div').classList;//Seleciona a ClassList da primeira div que encontrar

minhaDiv.add('minhaClasse');//Adiciona uma classe chamada 'minhaClasse'
minhaDiv.remove('minhaClasse');//Remove a classe chamada 'minhaClasse'
minhaDiv.toggle('minhaClasse');//Realiza o Toggle, ou seja, uma alternancia, se não existir uma classe chamada 'minhaClasseele adiciona, caso contrário ele remove.

console.log(minhaDiv.contains('sony'));//Checa se existe a classe chamada 'sony', retorna true ou false
console.log(minhaDiv.Length);//Retorna o tamanho

Criando Elementos

Também é possível criar elementos com o JS, por meio do CreateElement.

Supondo que temos a seguinte estrutura HTML:

<html lang="pt-br">
<head>
<title>Criando Elementos com JS</title>
</head>
<body id="conteudo">
</body>
</html>

Por meio do CreateElement, temos algumas possibilidades, vejamos:

const body = document.querySelector('body');

const elementoDiv = document.createElement('div');//Será criado um novo elemento temporário dentro da variável do tipo <div>

elementoDiv.classList.add('site');//Criamos uma classe para essa div
elementoDiv.innerHTML = 'http://micilini.com/';//Criamos um conteúdo textual que existirá dentro dessa div
elementoDiv.setAttribute('data-id', 12);//Criamos um novo atributo

body.appendChild(elementoDiv);//Esse comando coloca nossa div como um último elemento dentro do <body>

Inserindo elementos entre outros:

const texto = document.createTextNode('Antes...');
elementoDiv.insertBefore(texto, elementoDiv.childNode[0]);//Define em qual posição esse elemento será adicionado

Inserindo clones:

const elementoDivDois = elementoDiv.cloneNode(true);//Se setado como true, ele copia todo o elemento atual e seus filhos, se passar false ele não copia os filhos

body.appendChild(elementoDivDois);

Removendo elementos:

body.removeChild(elementoDivDois);

Inserindo HTML de forma adjacente:

//Com ele conseguimos inserir elementos antes de um determinado elemento pai
//"Antes de começar tal elemento, coloque um determinado elemento..."

const div document.querySelector('div');
div.insertAdjacentHTML('beforeBegin', '<p>Parágrafo...</p>');

//'beforeBegin' significa para ser adicionado antes.
//'afterBegin' coloca o elemento depois do início.
//'beforeEnd' coloca antes do fim.
//'afterEnd' coloca depois do fim.

Trabalhando com Eventos

Com o JS, podemos fazer com que ele escute certos eventos, como o clique de um botão, o ato do usuário sublinhar algum texto, o envio de um formulário, ou qualquer outro tipo de evento que seja possível de ser captado.

Podemos fazer isso usando um padrão de projeto chamado observer, cujo significado é observador.

No caso da linguagem Javascript, é importante que você entenda que ele é fortemente baseada nesse tipo de padrão.

Segue abaixo a estrutura HTML que foi usada:

<html lang="pt-br">
<head>
<title>Criando Elementos com JS</title>
</head>
<body id="conteudo">
<div>
<a href="https://micilini.com" target="__blank">Abrir Página</a>
</div>
</body>
</html>

Interceptando o clique no link:

<a href="https://micilini.com" target="__blank" onclick="esperar10Segundos(event)">Abrir Página</a>

<!-- O atributo onclick esta delegando para a função do JS todo o controle daquele link -->
<!-- O parâmetro precisa ser chamado de 'event-->

function esperar10Segundos(e){//O elemento estará dentro da variável temporária 'e'
e.preventDefault();//Aqui estamos parando o comportamento padrão do link, evitando que o usuário seja direcionado
console.log('Saindo em 10 segundos...');
setTimeout(() => {
window.locatiom.href = e.target.href;//Aqui estamos direcionando o navegador para o link
}, 10000);
}

Existem outras possibilidades de chamar a função esperar10Segundos sem a necessidade do onclick?

Sim, o ponto bom, é que fica explícito que aquele link está chamando uma determinada função do JS.

O ponto negativo é que você precisa modificar seus arquivos HTML, em vez de trabalhar puramente com o JS.

Sendo assim, uma outra alternativa seria selecionar o elemento com o QuerySelector, atribuindo a ele a função onclick diretamente pelo JS, veja como é fácil:

<a href="https://micilini.com" target="__blank">Abrir Página</a>

const link = document.querySelector('a');
link.onclick = esperar10Segundos;

No exemplo anterior, não ficou tão claro que aquele link irá ser interceptado por uma função JS, visto que removemos o atributo onclick.

Dica importante: Evite usar nome de classes no elemento HTML de modo a interceptá-los com o JS, por exemplo:

<a class="espera-10-s" href="https://micilini.com" target="__blank">Abrir Página</a>

const link = document.querySelector('.espera-10-s');
link.onClick = esperar10Segundos;

Uma grande estratégia utilizada por desenvolvedores, é você criar no link um novo atributo de modo a interceptá-lo pelo JS:

<a espera-10-s href="https://micilini.com" target="__blank">Abrir Página</a>

const link = document.querySelector('[espera-10-s]');
link.onClick = esperar10Segundos;

Até porque, um atributo personalizado ele é totalmente ignorado pelo navegador, e subentende-se que se um elemento possuí um atributo personalizado, o mesmo será utilizado pelo JS em algum momento.

Funções de Eventos

Acima nos vimos que podemos adicionar observadores que são capazes de chamar certas funções no JS.

Vimos também que podemos passar uma variável específica chamada event, que contém toda a informação daquele evento, desde quem clicou, quem disparou, a posição do clique do mouse, se o clique do mouse foi dado pelo botão direito ou esquerdo, e entre outras.

Anteriormente você conheceu o evento chamado onclick, que é chamado sempre quando o usuário clica em algum elemento HTML.

Conheça abaixo alguns eventos relacionados com o mouse, que você pode usar durante a sua jornada:

Manipulador de Eventos	Descrição
onclick	Quando o mouse clica em um elemento
onmouseover	Quando o cursor do mouse passa sobre o elemento
onmouseout	Quando o cursor do mouse sai de um elemento
onmousedown	Quando o botão do mouse é pressionado sobre o elemento
onmouseup	Quando o botão do mouse é liberado sobre o elemento
onmousemove	Quando o movimento do mouse ocorre.

Veja abaixo, a lista dos elementos relacionados com o teclado:

Manipulador de Eventos	Descrição
onkeydown	Quando o usuário pressiona a tecla
onkeyup	Quando o usuário solta a tecla

Veja abaixo, a lista de elementos relacionados com o formulário:

Manipulador de Eventos	Descrição
onfocus	Quando o usuário foca em um elemento do formulário
onsubmit	Quando o usuário envia o formulário
onblur	Quando o foco está longe de um elemento de formulário
onchange	Quando o usuário modifica ou altera o valor de um elemento de formulário

Veja abaixo, a lista de elementos relacionados com a janela do document:

Manipulador de Eventos	Descrição
onload	Quando o navegador terminar o carregamento da página
onunload	Quando o visitante sai da página da Web atual, o navegador a descarrega
onresize	Quando o visitante redimensiona a janela do navegador

Alterando Estilos

Também temos como possibilidade, realizar alterações no estilo CSS de um determinado elemento selecionado, e isso pode ser feito usando o objeto style.

Vejamos como ele funciona abaixo:

const elemento = document.querySelector('.minhaDiv');

elemento.style.position = "absolute";//Modifica a posição da div para absolute

elemento.style.backgroundColor = "#8e44ad";//Modifica o plano de fundo para a cor roxa

elemento.style.border = "2px dashed black";//Modifica a borda para 2px, dashed da cor preta

Existem muitos atributos que podem ser alterados por meio do objeto style, você pode ver a lista completa deles clicando aqui.

Manipulando o Navegador com Window

Com o objeto window, nós podemos manipular algumas respostas do navegador.

Abrindo uma nova janela:

window.open("https://micilini.com");

Fechando uma nova janela:

window.close();

Voltando uma janela anterior:

history.back();

history.back(-2);//Volta duas janelas anteriores

Atualizando a janela atual:

location.reload();

Requisitando que o usuário digite algo no console:

let valor = prompt("Qual é o seu nome?");//Quando o usuário digitar algo no console e der [ENTER] o valor será salvo dentro da variável 'valor'

Para saber mais sobre os inúmeros métodos e propriedades do objeto window, não deixe de acessar a documentação clicando aqui

Conclusão

Neste conteúdo você aprendeu um dos passos mais importantes da linguagem Javascript, que é a manipulação dos elementos HTML e CSS de uma determinada página.

Costumo dizer que é a partir do DOM que o Javascript ganha vida, deixando de ser apenas uma linguagem que interage por de baixo dos panos no console do navegador, passando a interagir visualmente com o usuário.

Para saber mais sobre os diversos métodos e propriedades do objeto Document, não deixe de acessar a documentação clicando aqui.

Até o próximo conteúdo 😁