O mais básico do básico de DOM manipulation.
Todos os exemplos mencionados aqui podem ser testados no console do seu browser. Basta abrir o “Developer Tools” (geralmente a tecla F12 abre o DevTools).
document.querySelector() ou querySelectorAll()..setAttribute()/.getAttribute(), exceto para estilização..classList.add(), .classList.remove() e .classList.toggle()..style.propertyName = newValue (propertyName equivale a property-name no CSS).addEventListener().// métodos de document
getElementsByTagName()
getElementsByClassName()
getElementById()
querySelector()
querySelectorAll()
DICA: É preferível usar querySelector/querySelectorAll, pois a sintaxe é similar aos seletores CSS.
document.getElementsByTagName('li');
// vai retornar um HTMLCollection com todos os elementos 'li' que existirem
document.getElementsByTagName('li')[0];
// acessando o primeiro elemento individualmente
document.getElementById('idName');
// retorna o elemento com o 'id="idName"'
// OBS.: os ids são/deveriam ser únicos. Se houver duplicação
// apenas a primeira ocorrência é retornada.
// ----------
// ATENÇÃO! o uso de querySelector/querySelectorAll é bem mais cômodo!
// Pois funciona como um seletor CSS
// ----------
document.querySelector('ul.customList > li');
// retorna a primeira ocorrência de 'li' presente
// no 'ul' cuja classe é 'customList'
document.querySelectorAll('ul > li');
// retorna um NodeList (similar a um Array) com
// todos os 'li's filhos de 'ul's
Uma vez que obtemos um elemento, podemos manipular seus atributos:
// métodos de um element
getAttribute()
setAttribute()
Observação: resista a tentação de usar get/setAttribute para manipular a estilização. Veja Estilização mais abaixo e entenda o motivo.
let link = document.querySelector('a');
link.getAttribute('href');
link.setAttribute('https://meleu.sh/');
// NÃO FAÇA ESTILIZAÇÃO!:
link.setAttribute('style', 'background-color: yellow');
// para manipular estilização prefira o método explicado abaixo.
Uma vez que temos um elemento já devidamente selecionado, podemos manipular sua estilização usando as seguintes propriedades:
// manipulando a propriedade CSS diretamente
style.{propertyName}
// propertyName é uma versão camelCase de uma propriedade CSS.
// ex.: backgroundColor == background-color
// manipulando estilo através de classes é mais elegante...
className // string com as classes separadas por espaço
classList // "Array" onde cada item é uma classe
// (na verdade classList é um DOMTokenList, e não um Array)
// manipular estilização através dos métodos de classList é bem mais cômodo
classList.add()
classList.remove()
classList.toggle()
Apesar de podermos manipular a estilização de um elemento diretamente usando, por exemplo, element.style.backgroundColor, uma melhor prática é fazer a estilização através de classes e então adicionar/remover a classe através dos métodos de classList. Vejamos isso nos exemplos a seguir.
let link = document.querySelector('a');
// <a style="background: red">
link.style.backgroundColor = 'red';
// o mais organizado (e considerado boa prática)
// é fazer estilização através de classes
link.classList.add('className');
link.classList.remove('classToBeRemoved');
// e o legal é que dá pra ligar/desligar uma classe
link.classList.toggle('done');
Podemos disparar uma ação (executar uma função) através de eventos como click do mouse, pressionamento de uma tecla, scroll da tela, etc.
Boa referência para ver lista de eventos observáveis: https://developer.mozilla.org/en-US/docs/Web/Events
Para fazer com que um elemento do DOM fique monitorando por um determinado evento, usamos o método addEventListener(). O que este método faz é definir uma função que será executada quando um determinado evento ocorrer naquele elemento.
target.addEventListener(eventType, eventListenerCallback);
// obs 1: eventType é uma string (veja documentação linkada acima)
// obs 2: eventListenerCallback recebe o evento como primeiro argumento
Maiores detalhes sobre addEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
Vamos colocar um background vermelho quando clicarmos no primeiro <p> do documento.
const paragrafo = document.querySelector('p');
function handleClickParagrafo(event) {
this.style.backgroundColor = 'red';
// também poderia ser:
// event.currentTarget.style.backgroundColor = 'red';
}
paragrafo.addEventListener('click', handleClickParagrafo);