Learn JavaScript DOM Traversal In 15 Minutes

🚨 IMPORTANT:
JavaScript Simplified Course: javascriptsimplified.com
Traversing the DOM in JavaScript is crucial to building projects on your own. In this video I break down all the ways you can traverse the DOM in JavaScript so that you can more easily build projects on your own.
📚 Materials/References:
CSS Selector Video: • Learn Every CSS Select...
🧠 Concepts Covered:
- How to traverse up the DOM
- How to navigate down the DOM
- All the methods for DOM traversal
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:34 - getElementById
03:04 - getElementsByClassName
04:16 - QuerySelector
06:48 - querySelectorAll
07:50 - Selecting Children
09:19 - Selecting Descendants
10:39 - Selecting Parents
12:00 - Selecting Ancestors
13:15 - nextElementSibling
13:51 - previousElementSibling
#DOMTraversal #WDS #JavaScript

Пікірлер: 293

  • @SocksWithSandals
    @SocksWithSandals3 жыл бұрын

    This is great for jQuery dinosaurs like myself who are moving to ES6.

  • @souvikkundu

    @souvikkundu

    3 жыл бұрын

    Yes :)

  • @jeanmuyuela8112

    @jeanmuyuela8112

    3 жыл бұрын

    Dinasaur lol

  • @alejandrocrespo7633

    @alejandrocrespo7633

    3 жыл бұрын

    Damn, called me out :D

  • @martinpenev6750

    @martinpenev6750

    3 жыл бұрын

    Haha same here!

  • @ericeveleens4418

    @ericeveleens4418

    3 жыл бұрын

    Yep, almost same methods or notation

  • @mznunaya
    @mznunaya3 жыл бұрын

    I JUST got done telling my bootcamp instructor how I need to review the DOM. And then I open my phone and see a notification for this video. Got dammit Kyle you've done it again. 👏

  • @mateonavarrette4864
    @mateonavarrette48643 жыл бұрын

    Great rundown! I never really solidified my DOM traversal skills in my coding bootcamp, we just touched on a bit of vanilla js then jumped into react. Thanks for clearing some of my confusion up

  • @xenialxerous2441
    @xenialxerous24413 жыл бұрын

    Hi!! I just wanted to say, that your channel and your videos are true to their perfection. As the name goes so as the content 🤗 Love you bro, your efforts are forever appreciated!!

  • @neelamchaubey28
    @neelamchaubey283 жыл бұрын

    Thanks so much for explaining the most powerful DOM Traversal methods in such an easy way, Kyle! Keep up the good work👍

  • @cacup7
    @cacup73 жыл бұрын

    The best traversal class. You rock on teaching and you are proving for each video that you are simplifying the web for everybody. Congratulations, man

  • @roey6541
    @roey65413 жыл бұрын

    Such a pleasure watching you explain! These concepts can be tough but you're very assuring and confident. I rightaway went to check out your js course, and purchased it immediately. Looking forward on starting! Feels like the first day of school :)

  • @WebDevSimplified

    @WebDevSimplified

    3 жыл бұрын

    Thank you so much for the support!

  • @tdematos
    @tdematos Жыл бұрын

    One of the best videos that I have seen for traversing the DOM. It's extremely easy to understand to the point, and very clear on what each action does!

  • @Ayomikun
    @Ayomikun3 жыл бұрын

    I just realised that I've learnt soo much JavaScript / React from you, it's ridiculous. Thank you!

  • @nabilhaouam8497

    @nabilhaouam8497

    3 жыл бұрын

    Why do you think it’s ridiculous ?

  • @ThiagoVieira91
    @ThiagoVieira913 жыл бұрын

    Had to deal with these this week. This video would help a lot. Thank you Kyle! 👍🏼

  • @alinademi
    @alinademi3 жыл бұрын

    It really did simplify the most important parts of the DOM traversal. Awesome job!

  • @devt.9712
    @devt.97122 жыл бұрын

    Dude you are amazing.Thanks for making that Frontend/Backend guide, it's so easy to follow and makes my learning process a lot easier. Love you!

  • @NecquiTeja
    @NecquiTeja3 жыл бұрын

    Thank you... appreciate your efforts in making these videos. Keep it up my friend.

  • @mustafeezahmed9536
    @mustafeezahmed95362 жыл бұрын

    Hey Kyle, your videos literally blown my mind. So much knowledge with so ease. Thanks a Lot buddy!

  • @Dameworth
    @Dameworth3 жыл бұрын

    You’re a natural teacher, thanks for all the videos!

  • @human3015
    @human3015 Жыл бұрын

    These explanations are so clean, congrats on that!

  • @Gerry090
    @Gerry0903 жыл бұрын

    For those who are on the fence about his JS course, I suggest you buy it. I'm following his course and I can tell you that Kyle is a great teacher!

  • @coolcha
    @coolcha3 жыл бұрын

    Very good video and I appreciate the timestamps as I knew some but I could skip to those which were new to me.

  • @pabhay235
    @pabhay2353 жыл бұрын

    too good with very simple examples. it cleared my concepts in 14 minutes sharp.... much appreciated

  • @Guii0
    @Guii0 Жыл бұрын

    You're very good at explained things, it show us that it's not as difficult as we thought, actually it's really simple.

  • @makiaboabida
    @makiaboabida2 жыл бұрын

    This is amazing man. Thank you for making this video!

  • @jomesias
    @jomesias3 жыл бұрын

    Cool tutorial! This is exactly what moustache binding replaces, so no more direct DOM calls (of course react ref can always be used for specific scenarios ). Though dom tree navigation is still needed for certain applications, js frameworks are phasing this out. For better or worse👍👍👍 Btw THAT IS A KILLER LOOKING JACKSON GUITAR IN THE BACK! Loving it 🎸 🎸 rock on. 0:01

  • @fawwazhosein
    @fawwazhosein3 жыл бұрын

    Great revision. Thanks man!

  • @joanclarke2724
    @joanclarke27243 жыл бұрын

    Great tutorial. I have learnt so much from it. Thanks Kyle

  • @TheCodingOdyssey
    @TheCodingOdyssey3 жыл бұрын

    This was interesting to me. I am a self-taught developer, but mostly worked pretty extensively with React in my job so not much vanilla javascript dom manipulation which I am looking to learn more.

  • @ntnurobert218
    @ntnurobert2183 жыл бұрын

    Great ! I learned “closest”. Thank you

  • @digigoliath
    @digigoliath3 жыл бұрын

    Awesome!! Well explained & easy to follow!

  • @Rohan-bg8ci
    @Rohan-bg8ci3 жыл бұрын

    Thanks for revision!!!

  • @sacrajah
    @sacrajah3 жыл бұрын

    Thank you , Kyle . I learnt something today.

  • @lingtravis6325
    @lingtravis63256 ай бұрын

    The tutorial is super useful and easy to understand. And it solve the problem that bothered me for 2 days . Thank you so much

  • @pedrohenriqueduartebueno6873
    @pedrohenriqueduartebueno68733 жыл бұрын

    Your explanation is pretty good, 👍🏻👍🏻👍🏻

  • @HolisticPython
    @HolisticPython3 жыл бұрын

    Thanks for all the free tutorials. Wondering if you could do a video on just general coding fatigue and any tips on how to remedy it?

  • @francisugorji5639
    @francisugorji56392 жыл бұрын

    Thank you for simplifying JavaScript. I always learn new stuffs when I watch your videos

  • @user-zd8nu5sl2j
    @user-zd8nu5sl2j Жыл бұрын

    just start learning web dep, absolutely love all your videos, thank you for making and sharing those ❤

  • @skaywalker20
    @skaywalker203 жыл бұрын

    Very helpful stuff, thank you so much!

  • @guchierrez
    @guchierrez Жыл бұрын

    great guide, literally the best material online for learning DOM

  • @ohhellothere1111
    @ohhellothere11113 жыл бұрын

    Havent used query selectors on anything other than document and first time seeing closest() method aswell. Good vid thanks dude :)

  • @bentoth4324

    @bentoth4324

    3 жыл бұрын

    closest() is crucial, especially when dealing with events. (almost) never go up with a while loop

  • @russellabraham9208
    @russellabraham92083 жыл бұрын

    Happy to see this video. I think you could have mentioned a few more details for a more rounded look at scope with querySelector. Also you can traverse in a chain with closest().querySelector().closest().querySelector().closest().

  • @LanguageSkillz
    @LanguageSkillz2 жыл бұрын

    9:09 makes me have to clarify traversing along parent children across parent siblings. It comes up a lot with some layouts. Kudos with distinguishing closest for ancestors, and I appreciate how you go about familiarizing usage of techniques like detailing .children properties on a variable and converting with Array.from to establish an array simple to handle with .forEach. Built-in properties of ES6.

  • @alfredolino8203
    @alfredolino82033 жыл бұрын

    I always learn a new thing from you, no matter what. Greetings from México.

  • @TheinfinityLight

    @TheinfinityLight

    3 жыл бұрын

    Epaaa otro Mexicano aprendiendo, muy buena. Saludos paisa

  • @alfredolino8203

    @alfredolino8203

    3 жыл бұрын

    @@TheinfinityLight Saludos compa

  • @bk._550

    @bk._550

    3 жыл бұрын

    @@alfredolino8203 hola

  • @cmnweb

    @cmnweb

    3 жыл бұрын

    Que pedo....

  • @TheinfinityLight

    @TheinfinityLight

    3 жыл бұрын

    @@cmnweb Qué pedo banda! ✌️

  • @AlThePal78
    @AlThePal78 Жыл бұрын

    I am so glad I am in your discord. Someone just saved my life lol or helped me with this. I also love your CSS Battles. You should do that with JS to see how you both differ in your writing functions, that would be awesome to see.

  • @skylerjknight
    @skylerjknight3 жыл бұрын

    Nice simple tutorial. Thanks.

  • @IELTSMANTRA-wy1rl
    @IELTSMANTRA-wy1rl6 ай бұрын

    You are literally the best teacher with clear explanations .. totally awesome content .. thank u so so much ..

  • @amiraalabeedi541
    @amiraalabeedi5413 ай бұрын

    Thank you. Iv watched several videos of js and css in this channel. Very very useful.

  • @natalisulcer974
    @natalisulcer974 Жыл бұрын

    Thank you so much !!!! One of the best videos!!!!

  • @webartem
    @webartem3 жыл бұрын

    I like the way you explain it so much! even gonna forgive you missed semicolons and different quotation marks

  • @sashatv138
    @sashatv1383 жыл бұрын

    Super! Thank you, Kyle!

  • @pedrocxbx
    @pedrocxbx3 жыл бұрын

    Amazing, thanks Kyle!

  • @espiritualidadedesvendada
    @espiritualidadedesvendada2 жыл бұрын

    It really helped me... Thank you very much !!!!

  • @shahidshafi1227
    @shahidshafi12272 жыл бұрын

    You Just made DOM easy for me ❤️. Thanks a lot .

  • @danielbark
    @danielbark3 жыл бұрын

    Thanks Kyle! Great stuff in this one!

  • @carltongordon
    @carltongordon3 жыл бұрын

    9:50 is such a shocker I had no idea thanks yo!

  • @pkorneev5226
    @pkorneev5226 Жыл бұрын

    super super useful. Noone actualy talk much about dom traversal, but this is the most important thing when you learning JS. I had soooo much problems with that cos i know some programming in other languages and have ideas how to do smth in js, but i cannot simply connect my code to my html+css page, now it looks super easy.

  • @DeepSpaceX
    @DeepSpaceX3 жыл бұрын

    Great tutorial, man!

  • @rinkeshgokulchandani4181
    @rinkeshgokulchandani41813 жыл бұрын

    Good Content, learned some new things!

  • @naveen7513
    @naveen75132 жыл бұрын

    I am following your front end development road map as the stepping stone for my career bro. Seriously they way u explain is great and i think by following ur tutorial i can be placed in MNC or other web development firm sooner. But few things I can’t understand quickly it doesn’t mean ur teachings are not good it’s just me who is slow at the moment. But i am trying to push my limit to the end to grab the knowledge of how programming works. Thanks man!❣️🙏🏻

  • @dipbhowmik5076
    @dipbhowmik5076 Жыл бұрын

    I just want to say Thanks man :) from the bottom of my heart.

  • @_Jordo
    @_Jordo3 жыл бұрын

    I thought I knew all this but watched just in case. You taught me that closest goes upward. Thanks! PS. I am curious to see how you look without your hair styled haha

  • @MbahmukongDestiny-up3tv
    @MbahmukongDestiny-up3tvАй бұрын

    Your methods are fascinating thanks alot🎉

  • @Adam-iq6zn
    @Adam-iq6zn3 жыл бұрын

    I work as Front-end Dev for 2 years now (small and medium software companies), and I didn't know about closest, nextElementSibling and previousElementSibling methods at all 😲 Usually I write my own functions to find specific parent or sibling. Thanks for enlighten me about this xD

  • @Soap_js
    @Soap_js3 жыл бұрын

    00:00​ - Intro 01:34​ - getElementById 03:04​ - getElementsByClassName 04:16​ - QuerySelector 06:48​ - querySelectorAll 07:50​ - Selecting Children 09:19​ - Selecting Descendants 10:39​ - Selecting Parents 12:00​ - Selecting Ancestors 13:15​ - nextElementSibling 13:51​ - previousElementSibling

  • @VishnuVardhanS

    @VishnuVardhanS

    Жыл бұрын

    Thank you

  • @AcheiversOfficial
    @AcheiversOfficial2 жыл бұрын

    very helpful. May the force be with you. 👍.

  • @funkykong9001
    @funkykong90013 жыл бұрын

    AMAZING! Thanks!

  • @RemnantOfYahweh
    @RemnantOfYahweh2 жыл бұрын

    Subbed, watched full vid and clicked the bell icon. Thanks dude you are the G.O.A.T!

  • @hellyski
    @hellyski3 жыл бұрын

    Great video! Thank you.

  • @chickendev5759
    @chickendev57592 жыл бұрын

    concise and easy to understand

  • @guptarishav50
    @guptarishav503 жыл бұрын

    Great Vid. Thank You!!

  • @codeandcurious
    @codeandcurious3 жыл бұрын

    Thank you so much for the video

  • @ashse4424
    @ashse44243 жыл бұрын

    Superb Brother, Thank you so much.

  • @karthikhs2530
    @karthikhs2530 Жыл бұрын

    beautiful way of explanation

  • @aresfrt
    @aresfrt3 жыл бұрын

    Great teacher, great job

  • @dariusz8005
    @dariusz8005 Жыл бұрын

    Thanks ! You are helped me too !! :)

  • @alexzhang9031
    @alexzhang90312 жыл бұрын

    Absolutly amazing video!

  • @mitch1668
    @mitch16682 жыл бұрын

    Excellent explaining.

  • @saidibrahim5931
    @saidibrahim59313 жыл бұрын

    wow your teaching skill is amazing

  • @mehniyarif2
    @mehniyarif23 жыл бұрын

    thank you bro. love from Türkiye

  • @rgablejr
    @rgablejr3 жыл бұрын

    Great examples!

  • @focusme-tv3650
    @focusme-tv36503 жыл бұрын

    Hi ! Just wanted to check if I knew everything about traversing, so classic check up. I do, but god your video was just extremly clear and pleasant to listen to. I subscribed ! =D By the way, for the beginners, the main difference between "parentElement" and "parentNode" methods is that the first one returns an HTML collection, which is kind of an array storing ONLY elements, while the second returns a nodeList, which returns all the parent nodes. Nodes can contain elements but also text / comment etc. ... So it's not a weird behavior but more a very specific method that we, as web developers, need to take in consideration.

  • @curiosabouttech
    @curiosabouttech2 жыл бұрын

    Thank you so much I wish you the best.

  • @Anju_2014_
    @Anju_2014_3 жыл бұрын

    Great content..bro..thanks

  • @anubhavrauniyar3192
    @anubhavrauniyar3192 Жыл бұрын

    Thanks Thanks Thanks , Great Tutorial

  • @shubhamrathod9249
    @shubhamrathod9249Ай бұрын

    now i understand dom! thank you

  • @jasonschwarz2997
    @jasonschwarz29973 жыл бұрын

    Another great video!!

  • @MrDflego
    @MrDflego3 жыл бұрын

    I got a whole lotta love for this video.

  • @revizion9101
    @revizion91015 ай бұрын

    Great video ive been struggling so much with this concept as ive been using the odin project and in their js course they keep linking to articles that provide examples for all the basics of js but they use these damn selectors and DOM manipulation in their examples which has made learning js 100x harder than its needed to be so this video is a huge help

  • @toluwanimiayodele1858

    @toluwanimiayodele1858

    3 ай бұрын

    Brooo, I’m in the same situation, I love the Odin project but Mann these damn dom manipulation. How is it going now for you?

  • @kidgamer4787
    @kidgamer47872 жыл бұрын

    you are too good to describe for words!!!!!

  • @zhumabayevorymbek2548
    @zhumabayevorymbek25484 күн бұрын

    Brilliant!) Explained many things for me)

  • @swoorp
    @swoorp3 жыл бұрын

    Love it!❤❤

  • @DioneMohammed
    @DioneMohammed3 жыл бұрын

    Thanks man ✌

  • @thelostvorg7805
    @thelostvorg78052 жыл бұрын

    I checked the Timestamps and I was like meh I know all of these but I watched the video anyway because you never know what you will find and then you mentiond the closest() function which I never knew existed ! I'm glad I stayed till the end of the video!

  • @ShinAkuma
    @ShinAkuma3 жыл бұрын

    The only time I ever touch jQuery is when I need to traverse the DOM and now I don't need it at all. Thanks a lot.

  • @arzumamedova1422
    @arzumamedova14222 ай бұрын

    Thank you very much.

  • @Rasta07
    @Rasta072 жыл бұрын

    mannn, thanks a lot for showing this method Array from, i was struggling with HTML Collections

  • @Noobinski
    @Noobinski Жыл бұрын

    Thank you!

  • @augischadiegils.5109
    @augischadiegils.51093 жыл бұрын

    Thanks man :)

  • @michelaveline
    @michelaveline3 жыл бұрын

    Thanks, again!

  • @natanaelbnb
    @natanaelbnb Жыл бұрын

    I love you, thanks a lot !

  • @mahfoudh_arous
    @mahfoudh_arous Жыл бұрын

    Excellent content as usual 🙏! How do you learn and find materials to master subjects in this depth!

  • @bilal-zr6uy
    @bilal-zr6uy6 ай бұрын

    The dopamine kick from this is crazy

  • @DevsLikeUs
    @DevsLikeUs3 жыл бұрын

    Great list