Javascript - Algumas dicas e funções para javascript puro

Esse artigo venho compartilhar algumas funções e dicas para serem usadas em javascript puro.

Selecionando elementos com javascript puro

Exemplo: 

oObjeto = document.querySelector('#id')
oObjetos = document.querySelectorAll('p')

Como adicionar text/elemento no documento - InnerHTML vs insertAdjacentHTML

Para adicionar elementos/html no documento é possível utilizar o innerHTML / insertAdjacentHTML / appendChild.

Quando utilizado o innerHTML é substítuido todo o conteúdo do elemento.

Exemplo: 

document.querySelector('#id').innerHTML = '<div></div>';

Quando utilizado o insertAdjacentHTML é adicionado o HTML na posição indicada no parâmetro.

Exemplo: 

document.querySelector('#id').insertAdjacentHTML('beforebegin', cHTML);

document.querySelector('#id').insertAdjacentHTML('afterbegin', cHTML);

document.querySelector('#id').insertAdjacentHTML('beforeend', cHTML);

document.querySelector('#id').insertAdjacentHTML('afterend', cHTML);

Quando utilizado o appendChild é adicionado o ELEMENTO como filho do nó. Se o mesmo já existir no documento, o elemento é movido entre o nó, da origem para o destino.

É removido 

Exemplo: 

let oDiv = document.createElement("div");
document.querySelector('#id').appendChild(oDiv);

let oItem = document.querySelector('.items.item');
document.querySelector('#id').appendChild(oItem);

Selecionar o option do combo

Como selecionar o option selecionado do comboBox.

Exemplo: 

let nIndex = document.querySelector('oClient').selectedIndex;
console.log( document.querySelectorAll('oClient option')[nIndex].value );

Obter o valor do input / field

Como selecionar o option selecionado do comboBox.

Exemplo: 

console.log( document.querySelector('#cDescription').value );

Manipulação de Classe CSS

Como adicionar e remover classes do CSS do elemento.

Exemplo: 

document.querySelector('#banner').classList.add('hover');
document.querySelector('#banner').classList.remove('hover');

Manipulação de Estilos / style

Exemplo: 

document.querySelector('#banner').style.display = 'block';
document.querySelector('#banner').style.display = 'none';

Como completar o tempo com "0" na frente?

No javascript é utilizado a classe Date() para manipulação de Data.

Os metódos getHours, getMinutes e getSeconds retornam as informações sem completar com o "0" na frente.

Solução:

let now = new Date();
let hour = ("0"+now.getHours()).slice(-2);
let minute = ("0"+now.getMinutes()).slice(-2);
let second = ("0"+now.getSeconds()).slice(-2); 

Outra solução, é utilizar o If ternario para validar se o tempo é menor que 10. Segue exemplo:

second < 10 ? `0${second}` : second;

Parâmetro para função. This e Event

Geralmente utilizo o event.

Exemplo: 

const oClick1 = (universoDesenv) => {
console.log(universoDesenv.target);
console.log(universoDesenv.currentTarget);
}

const oClick2 = (universoDesenv) => {
console.log(universoDesenv);
}

<a onclick="oClick1(event)"> CLICK com EVENT </a>
<a onclick="oClick1(this)"> CLICK com THIS </a>

Subir arvoré

Geralmente utilizo o event.

Exemplo: 

parent()
parentNode()

Gostou? Compartilhe com seus amigos e deixe um comentário! 😎

Um abraço, e até a próxima