Truques de JavaScript DOM que você precisa conhecer

Saia do básico da programação com o Explorer Lab, evento online e gratuito: rseat.in/explorer-lab
Document Object Model (DOM) é a modelagem que guia um objeto JavaScript.
Pra facilitar a nossa vida de dev, Maykão reuniu cinco truques de JS DOM que você com certeza vai querer conhecer.
Link para VISUALIZAR o código da aula:
fronteditor.dev/gists/d75d7978...
Link para EDITAR o código da aula:
fronteditor.dev/gists/d75d7978...
-----
Conecte-se a 200mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com.br/
Cadastre-se na nossa plataforma: app.rocketseat.com.br/signup
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial

[@andrericardo6992]

Você é fera Mike, sou iniciante no JS e quase tudo foi novidade pra mim, vou assistir a Master Class de DOM. Grato por vocês da Rockseat compartilharem tanto conhecimento! Valeu!

[@LeandroSilva-mw5yl]

Maykao, você é um show de simpatia ja ganha a pessoa logo no início do vídeo até quem não programa provavelmente assiste muito obrigado pelos vídeos mano ..abraço

[@brunohuguenin9284]

Que didática incrível! Muito obrigado pelo conteúdo, irmão.

[@duronne3951]

Ah que material estupidamente perfeito. Tenho muita dificuldade na manipulação da DOM enquanto faço o curso Explorer e nesse video descobri que posso pegar atralhos com o currentTarget, contains e cloneNode. 🤩

[@maikemanoel597]

Que vídeo sensacional!! Como pode tanto conteúdo em tão poucos minutos?

[@geoatuais]

é difícil acha um vídeo sobre dom em português no you tube melhor que esse até agora.

[@cleuvissoaresdasilva4725]

O cara e bom na didatica viu.Parabéns!!

[@TresEfes]

muito muito muito bom... a didática é top de mais

[@alexsoares9468]

Ajudou muito, obrigado cara!

[@lembranaodesistaissonaoimp5762]

Maykãoooo te amoooo ❤️

[@breakbosscrewoficial4249]

Obrigado pelo conteúdo Vcs são de mais 🤝

[@MariusHKz]

Só por falar query corretamente já ganhou meu like. Além disso, parabéns pelo ótimo conteúdo.

[@xaveko]

Mestre em ensinar!!!

[@renan-ferreira]

Muito bommmmmmmmmm, valeu manow!

[@edimilsonbrazZ]

Show demais esse conteúdo... Eu confeço que não conhecia cloneNode(). Economiza bastante linhas de código com ele... um verdadeiro clean Code hehe... show Maikão

[@lucaskennari8246]

Conteúdo brabo!

[@joaocuriosidades2331]

a parte do remove, foi a melhor

[@tvcetacapoeira7533]

It's working thanks my friend

[@victorbusolin9469]

Parabéns pela didática Maykão. Depois de alguns meses trabalhando com frameworks chega até ser meio estranho ver js vanilla. Parabéns pelo vídeo!!

[@maykbrito]

Néah? hehehe Obrigado mano!

[@mygrocerystore960]

Valeu!

[@moisesximenes9363]

Top demais!!! Dessas formas de adicionar qual tem um melhor processamento (pensando em uma grande lista)?

[@rafamuguet]

Fala Dev beleeeza?

[@henriquefreitas1224]

espero um dia chegar a 50% do seu conhecimento maikao, vc é fera!!

[@rodrigomoura2108]

Quando esse dia chagar ainda vai falaram uns 95% pra fazer qualquer coisa no mundo real.

[@rodrigomoura2108]

Na verdade quase nada disso se usa no mundo real. Tire isso do para efeito de conhecimento, só pra saber que isso existe.

[@WoWGuirelle]

Esta parte do cloneNode eu não sabia, teria me poupado algumas horas em alguns projetos no passado... heheheheh

[@spiielberg]

🚀

[@minhatrilhajpb]

🎉🎉🎉🎉🇦🇴🇦🇴🇦🇴 Só bala🔥🔥🔥

[@luizcdocarmo]

Me lembro que a pesquisa do Google tinha esse problema de "remoção eterna"

[@Matheus_1582]

Mayke, você usa algum Framework pra construir suas paginas Web ou você usa só o HTML CSS JS mesmo.

[@alexjunior3469]

Oi Mayk sou iniciante e não sei oq fazer para entender front end e estou com dificuldade em entender DOM tenho que fazer Freelas e não sei por onde começar!?

[@viniciusvirtuoso7459]

Fala dev blz? Eu tenho uma duvida, trabalho com react, e a pouco tempo fiz um projeto que precisava de funcionalidade de drag and drop, usei uma lib para resolver isto. Ai fiquei pensado "cara eu não tenho ideia de como faria essa funcionalidade na mão". Eu queria saber se isso é normal?

[@maiconpereiradesouza5533]

cloneNode esse eu não conhecia

[@am-castro]

Mayk, não encontro onde faz aquele card de aviso que tem na rocketseat, com aquele timer bonitinho à esquerda. Tendo 2 avisos, o primeiro desce e o mais recente fica em primeiro. Aquilo é JS?

[@alefreis6778]

Mayk, depois você poderia postar uma solução ao desafio proposto, to fritando a mente aqui mas não consegui criar um item sem estar com o clodeNode...

[@cesardamasceno6645]

Você poderia deixar um li já feito em memória: dentro de uma const e quando fosse dá o cloneNode seria dele.

[@youngdll7]

@@cesardamasceno6645 poderia explicar melhor ? rsrs

[@leleparanormal1579]

Maikão, pq vc ta usando o Microsoft Edge, ta sendo melhor que o Chrome?

[@maykbrito]

Tenho gostado muito mais.. Acho mais leve e tem algumas coisas, como agrupador de tabs, que acho simples e essencial.

[@arthurpeixotomelo373]

​@@maykbrito Além de ser mais leve, tem tabs na lateral, muito útil se você tirar a barra superior também, pois amplia o espaço útil (os comandos de minimizar, fechar janela se espremem no lado direito......isso no windows fica muito parecido como funciona no MAC)

[@player35_]

Cheguei muito perto da solução, aí ele tava criando varios span e button dentro da li, resolvi mas agora surgiu um problema que o span pode ir vazio. Desisto

[@asdasd54564]

Tem uma coisa nos vídeos de aula de programação que me irrita muito. Nitidamente não selecionam o publico alvo, tentam trazer um pouco de tudo. Se você vai explicar truques do DOM, não precisa explicar o que é DOM, quem veio pro vídeo já sabe o que é!!!

[@marcossacramento5957]

Amigão, é só vc pesquisar um pouquinho mais kkkk programador tem que ter essa autonomia

[@asdasd54564]

@@marcossacramento5957 Pesquisar mais o que? Você entendeu meu comentário mesmo?

[@arturvalentim7120]

chegou a hora do elementos e comecei entender nada

[@rodrigomoura2108]

A DOM?! Document object model tanto em inglês quanto em português são masculinos então porque a DOM?! Desculpa mas não dá pra dar moral pra vocês se não sabem nem como as coisas se chamam.

[@mashirolvsky]

A DOM deve se chamar assim por conta de ser ligada analogamente a uma arvore. se eu estiver errado me corrija, mas já vi em algumas explicações usarem uma forma para explicar a DOM como uma Arvore... deve ser por isso que o termo que se usa é a DOM.

[@rodrigomoura2108]

@@mashirolvsky A arvore. O DOM. Pergunta pra sua prof.

[@rodrigomoura2108]

@@mashirolvsky Ex a arvore tem um tronco e nem por isso se chama a tronco.

[@rodrigomoura2108]

@@mashirolvsky uma dica muito boa. Aprenda inglês, só assim pra ir para o próximo nível. Não existe programador bom mesmo que não saiba inglês. Tudo de mais novo sai primeiro em inglês. Essa semana por exemplo teve um evento em Londres chamando advanced react que quem não sabe inglês perdeu. Nem sei se vão traduzir. Acredito que não pq só o primeiro dia foram mais de seis horas.

[@mashirolvsky]

ok então...