Seleção, manipulação e criação de elementos.
Cada elemento tem pais, filhos e irmãos.
// Seleciona O PRIMEIRO elemento
const titulo = document
.querySelector('h1');
const btn = document
.querySelector('.meu-botao');
const form = document
.querySelector('#formulario');
// Aceita qualquer seletor CSS!
const item = document
.querySelector('nav a.active');
// Seleciona TODOS os elementos
const paragrafos = document
.querySelectorAll('p');
// Retorna um NodeList
console.log(paragrafos.length);
// Percorrer com forEach:
paragrafos.forEach((p) => {
console.log(p.textContent);
});
document.getElementById('titulo'); // por ID
document.getElementsByClassName('card'); // por classe (HTMLCollection)
document.getElementsByTagName('p'); // por tag (HTMLCollection)
Prefira querySelector e querySelectorAll por serem mais flexíveis e consistentes.
const titulo = document.querySelector('h1');
// Texto puro
titulo.textContent = 'Novo título';
// HTML (interpreta tags)
titulo.innerHTML =
'Texto <strong>negrito</strong>';
// Ler o conteúdo atual
console.log(titulo.textContent);
const link = document.querySelector('a');
const img = document.querySelector('img');
// Ler atributo
console.log(link.getAttribute('href'));
// Alterar atributo
link.setAttribute('href', '#novo');
img.src = 'foto.jpg';
img.alt = 'Minha foto';
// Atalho para data attributes
console.log(link.dataset.id);
const box = document.querySelector('.box');
// Alterar estilo diretamente
box.style.backgroundColor = '#6366f1';
box.style.padding = '20px';
box.style.borderRadius = '12px';
// camelCase no JS!
// background-color -> backgroundColor
// border-radius -> borderRadius
const el = document.querySelector('.menu');
// Adicionar classe
el.classList.add('aberto');
// Remover classe
el.classList.remove('aberto');
// Alternar (toggle)
el.classList.toggle('aberto');
// Verificar se tem
el.classList.contains('aberto');
// true ou false
classList ao invés de style. Mantém a
separação entre JS e CSS.
// 1. Criar o elemento
const card = document.createElement('div');
// 2. Configurar
card.className = 'card';
card.textContent = 'Novo card!';
// 3. Adicionar ao DOM
const container = document
.querySelector('.container');
container.appendChild(card);
// Remover um elemento
const item = document
.querySelector('.item');
item.remove();
// Remover todos os filhos
const lista = document
.querySelector('ul');
lista.innerHTML = '';
<ul id="lista"></ul>
<input id="input" placeholder="Nova tarefa">
<button id="btn">Adicionar</button>
const lista = document.querySelector('#lista');
const input = document.querySelector('#input');
const btn = document.querySelector('#btn');
function adicionarTarefa() {
const texto = input.value.trim();
if (!texto) return;
const li = document.createElement('li');
li.textContent = texto;
lista.appendChild(li);
input.value = '';
}
btn.addEventListener('click',
adicionarTarefa);
querySelector
.value
<li> com createElement
textContent
appendChild
const item = document.querySelector('li');
// Pai
item.parentElement
// Filhos
item.children
item.firstElementChild
item.lastElementChild
// Irmãos
item.nextElementSibling
item.previousElementSibling
const pai = document.querySelector('.pai');
const novo = document.createElement('div');
// No final (padrão)
pai.appendChild(novo);
// No início
pai.prepend(novo);
// Antes de um elemento específico
const ref = pai.children[1];
pai.insertBefore(novo, ref);
const produtos = [
{ nome: 'Notebook', preco: 4500 },
{ nome: 'Mouse', preco: 89 },
{ nome: 'Teclado', preco: 250 },
];
const container = document
.querySelector('#produtos');
produtos.forEach((prod) => {
const card = document
.createElement('div');
card.className = 'card';
card.innerHTML = `
<h3>${prod.nome}</h3>
<p>R$ ${prod.preco}</p>
`;
container.appendChild(card);
});
forEach ou map
innerHTML quando os dados vêm do usuário (risco de XSS). Prefira
textContent para texto puro.
div#container vazioforEach para criar um card para cada produto e inserir no containerclassList.toggleEventos: click, submit, input e delegação.