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