Manipulação de DOM com JavaScript, do zero, na prática | Masterclass #18

🎮 Menu 00:00:00 | Intro - O que é a DOM 00:05:25 | Apresentação do projeto: Piano Virtual 00:05:49 | Analisando o document 00:07:53 | console.dir(document) 00:11:06 | Buscando e selecionando elementos 00:11:20 | getElementById() 00:12:33 | getElementsByClassName() / getElementsByTagName() 00:15:41 | querySelector() 00:17:02 | querySelectorAll() 00:20:18 | Manipulando o conteúdo dos elementos 00:23:04 | Alterando Estilos 00:27:46 | Navegando entre os elementos 00:27:59 | children 00:28:53 | parentNode & parentElement 00:30:23 | childNodes 00:31:10 | childElementCount 00:31:46 | firstChild / lastChild 00:32:07 | remove() 00:33:01 | Siblings 00:35:24 | Criando elementos 00:38:44 | Inserindo elementos no HTML / append() 00:39:57 | prepend() 00:40:40 | desafio: usar insertBefore() / insertAfter() 00:43:39 | Trabalhando com atributos html 00:45:18 | Eventos 00:45:55 | Iniciando o projeto 00:46:53 | Planejando a lógica do projeto 00:50:10 | Codando o projeto 00:52:12 | Adicionando evento de teclas digitadas 00:53:31 | addEventListener() 00:58:17 | analisando o objeto event 01:00:23 | Planejando a lógica de tocar uma nota 01:03:17 | Evento de clique do mouse nas teclas do piano 01:06:41 | event.type 01:07:27 | event.target / element.dataset / event.keyCode 01:13:24 | Refatorando o código 01:14:49 | Pegando o elemento html da tecla desejada 01:17:23 | Corrigindo bug da refatoração 01:17:35 | Palavra chave return dentro da função 01:18:57 | E se na tecla digitada não houver nenhum som? 01:23:15 | Funcionalidade de tocar audio do piano 01:26:24 | Refatorando o código 01:27:33 | Adicionar o estilo (classe) playing 01:29:18 | Disparando evento ao finalizar uma transição CSS 01:30:20 | Removendo a classe playing 01:31:40 | Revisão 01:34:33 | Disparando evento ao terminar de carregar a window 01:36:06 | Despedida 🔗 Links apresentados no projeto https://www.notion.so/maykbrito/Maste... ----- Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: https://rseat.in/rocketseat_ Cadastre-se na nossa plataforma: https://rseat.in/rocketseat_ Junte-se a mais de 392mil devs em nossa comunidade no Discord:   / discord   Acompanhe a Rocketseat nas redes sociais: TikTok: @rocketseat Facebook: @rocketseat Instagram: @rocketseat