Guia básico de javascript sem jquery
Com o surgimento de cada vez mais frameworks de javascript como Jquery, Angular e Vue, o javascript ja faz parte da maioria esmagadora dos sites e sistemas online hoje em dia.
Só que alguns dos problemas que surgem com todas esses novos scripts, é o aumento do tempo de carregamento e quantidade de arquivos ao abrir um site, e nesse ponto o javascript puro (também conhecido como Vanilla javascript) é uma ótima opção para aqueles que precisam de scripts leves, que funcionem em qualquer navegador e, principalmente, sem depender de nenhum framework ou arquivo externo.
Conheça nesta páginas algumas das principais funções que o javascript puro tem a oferecer.
Observação: Todas as funções são compatíveis com todos os navegadores, independente da versão.
Uma das funções mais importantes e utilizadas no javascript, pode ser utilizada para selecionar um ou mais elementos através do Id, Classe ou Tag.
// Selecionar pelo ID// Retorna o primeiro item que encontrar com a ID informadadocument.getElementById('id');// Selecionar pela classe// Gera uma lista com todos os itens com a classe informada (veja NodeList no final)document.getElementsByClassName('classe');// Selecionar pela tagdocument.getElementsByTagName('tag (div, por exemplo)');// Esta função pode ser utilizada tanto para ID quanto classe (é necessário determinar qual// utilizando '#' para ID e '.' para classes) e retorna o // primeiro item que encontrar que bate com o elemento especificadodocument.querySelector("#id");// Igual a função acima, mas retorna uma lista com todos os elementos encontrados (veja NodeList no final)document.querySelectorAll(".classe");
Durante muito tempo o javascript não possuia funções que conseguissem reconhecer e muito menos manipular classes, mas com tempo perceberam a importância e a necessidade de se trabalhar utilizando estes seletores, e com isso foram criadas as seguintes funções.
// Adicionar classevar ele = document.querySelector('.bloco');ele.classList.add('nova-classe');// Remover uma classevar ele = document.querySelector('.bloco');ele.classList.remove('classe');// Alternar uma classe específicavar ele = document.querySelector('.bloco');ele.classList.toggle('classe');// Verifica se o elemento possui uma classe específicaif (document.querySelector(".bloco").classList.contains("classe")) {  // Chamar código aqui...}
Uma das maiores facilidades de se utilizar javascript é a possibilidade de alterar as configurações CSS de um elemento mesmo após o carregamento da página. Veja abaixo alguns exemplos de como utilizar.
// Alterar configurações específicas, como cor e brackgroundvar ele = document.querySelector(".bloco");ele.style.color = "#ff0000";ele.style.backgroundColor = "#ffffff";// Exemplo: mostrar ou esconder um elementovar ele = document.querySelector(".bloco");ele.style.display = "none";    // Esconderele.style.display = "block";   // Mostrar// Alterar todos os estilos de uma só vezvar ele = document.querySelector(".bloco");ele.style.cssText = "color: #000; background-color: red";
Criar Elementos
Se você precisa criar elementos dinamicamente em sua página, as funções abaixo permitem que você determine qual elemento será gerado sem a necessidade de códigos complexos.
// Criar uma div e adicionar uma classe e um texto dentro delavar ele = document.createElement("div");ele.classList.add("box");ele.textContent = "Text inside box";
Além de todas as funções citadas acima, uma das mais utilizadas são aquelas que permitem manipular os eventos de qualquer elemento da página, como por exemplo ao clicar em uma div ou escolher uma opção de um select.
// Mostra um alerta ao clicar em um elementodocument.querySelector(".bloco").addEventListener("click", (e) => {    alert('Você clicou neste bloco');});// Mostra um alerta com o valor da opção selecionada do selectdocument.querySelector("#select").addEventListener("change", (e) => {    alert('Opção selecionada: '+ this.value);});
Manipulando Listas (NodeList)
Algumas funções, como getElementsByClassName() e querySelectorAll() selecionam diversos items ao invés de um único, gerando uma lista conhecida como NodeList, e para poder modificar / selecionar todos os itens destas listas, é necessário um método diferente.
Veja abaixo como utilizar este método.
// Adiciona uma classe a todos os itens do NodeListvar someElem = document.querySelectorAll('.bloco');for ( var i = 0; i < someElem.length; i++ ) {    someElem[i].classList.add('classe');}