Prof. Leon Blog

Appearance

Exemplos: DOM, Eventos e Assincronismo ​

← Voltar para a aula

Seletores ao vivo ​

Escolha um seletor e o método: veja quais elementos da lista seriam retornados:

document.querySelectorAll('.item')
<ul id="lista">
<li id="primeiro" class="item">
<li class="item">
<li class="item destaque">
<li class="item">

4 elemento(s) retornado(s).

Manipulação de HTML ao vivo ​

Renderizar uma lista a partir de dados ​

Digite um item e clique em "Adicionar": isso simula o padrão createElement + textContent + appendChild visto na aula:

lista.innerHTML = '';
frutas.forEach((fruta) => {
  const li = document.createElement('li');
  li.textContent = fruta;
  lista.appendChild(li);
});
  • maçã
  • banana
  • uva

insertAdjacentHTML: escolha a posição ​

Clique nos botões para inserir um item em cada posição possível e veja onde ele aparece em relação ao conteúdo existente:

beforebegin
afterbegin
conteúdo existente
beforeend
afterend

Manipulação de CSS ao vivo ​

classList × style ​

Alterne a classe destaque ou defina cores diretamente via style; repare como o código muda junto:

caixa.style.backgroundColor / caixa.classList 
caixa.classList.toggle('destaque'); // → false
caixa.style.backgroundColor = '#6366f1';
caixa.style.color = '#ffffff';

Variável CSS compartilhada ​

Uma única variável aplicada a vários elementos ao mesmo tempo; mude a cor e observe todos atualizarem juntos:

document.documentElement.style.setProperty('--cor-destaque', '#f97316');
Badge

Alternador de tema (dark mode) ​

Combina classList.toggle com variáveis CSS, o mesmo padrão usado em sites reais:

document.documentElement.classList.toggle('dark'); // → false
Prévia do tema

--bg: #ffffff · --texto: #111111

Eventos ao vivo ​

Clique de verdade nos elementos abaixo; os eventos são reais (@click do Vue por baixo é a mesma API de addEventListener):

classList.toggle('ativo') → inativo

Nenhum evento ainda. Clique em algo acima.

preventDefault ao vivo ​

Ordem de execução assíncrona ​

Clique em "Rodar" e observe a ordem real em que as linhas aparecem, síncrono primeiro, depois microtasks (Promise), depois macrotasks (setTimeout):

console.log('1')
setTimeout(() => console.log('4'), 0)
Promise.resolve().then(() => console.log('3'))
console.log('2')
(aguardando execução)