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 :)
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!!
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
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
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. 👏
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!
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.
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
One thing you can't easily do with Vanilla JS even in 2021 is search for siblings that match a selector. I use this on our website because we have togglers that affect sibling elements below them on the page and sometimes they have descriptions in between or images so we can't reasonably just use nextElementSibling since it may not be the very next one. You can do this easily with recursion. If you need full up/down capabilities: const findSibling = (element, selector, direction) => { if(!element) return null; direction = direction || "down"; let methods = { up: "previous", down: "next" }; let next = element[`${methods[direction]}ElementSibling`]; if (next?.matches?.(selector)) return next; return findSibling(next, selector); }; If you just want to search down the tree (and never up): const findNextSibling = (element, selector) => { if(!element) return null; let next = element.nextElementSibling; if (next?.matches?.(selector)) return next; return findSibling(next, selector); }; There's no real fear of infinite recursion since next/previous ElementSibling will eventually return null.
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!❣️🙏🏻
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.
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!
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
you could select the next child with document.querySelector("#child-one +") Remember that in a query selector you use CSS selectors, and with the new CSS stuff like :has, :is, :not And each CSS update, querySelector is more useful
I only watch your videos about website programming.This only says how good you are at explaining code and most importantly is easy to understand and also to memorize. 🤗
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.
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.
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().
It's amazing really. I've been a happy amateur in Javascript for many years. I'm by no means an expert, and you'd be hard-pressed to classify me as good, but still. I know my stuff. Every now and then though, something pops up that simply rocks my Javascript world. For years I've been mumbling select swearwords for having to build proper loops for looping element collections. And then you just go and point out something so ridiculously obvious it annoys me. Just make an effing array of them...
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
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.
At multiple points in the video you use the children selector sometimes prefixing with Array.from and sometimes without: I'm guessing the Array.from isn't necessary as you directly access the children using forEach without Aaray.from?
@@StephenHind No, there’s a difference between `HTMLCollection`s as returned by `getElementsByClassName` and `NodeList`s as returned by `querySelectorAll`: the latter has a `forEach` method, whereas the prior doesn’t.
...or you could just spread that HTML collection into an array, less clunky ;) Also: you could use firstChild instead of [0] (admittedly, a matter of preference really) Also also: fun fact: getElementsByClassName / getElementById is more performant than querySelector / querySelectorAll Great video though, two thumbs (and one pinkie) up!
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
Thank you
This is great for jQuery dinosaurs like myself who are moving to ES6.
Yes :)
Dinasaur lol
Damn, called me out :D
Haha same here!
Yep, almost same methods or notation
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 :)
Thank you so much for the support!
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!!
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!
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
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
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. 👏
I just realised that I've learnt soo much JavaScript / React from you, it's ridiculous. Thank you!
Why do you think it’s ridiculous ?
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!
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.
I always learn a new thing from you, no matter what. Greetings from México.
Epaaa otro Mexicano aprendiendo, muy buena. Saludos paisa
@@TheinfinityLight Saludos compa
@@alfredolino8203 hola
Que pedo....
@@cmnweb Qué pedo banda! ✌️
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
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?
One thing you can't easily do with Vanilla JS even in 2021 is search for siblings that match a selector. I use this on our website because we have togglers that affect sibling elements below them on the page and sometimes they have descriptions in between or images so we can't reasonably just use nextElementSibling since it may not be the very next one. You can do this easily with recursion.
If you need full up/down capabilities:
const findSibling = (element, selector, direction) => {
if(!element) return null;
direction = direction || "down";
let methods = {
up: "previous",
down: "next"
};
let next = element[`${methods[direction]}ElementSibling`];
if (next?.matches?.(selector)) return next;
return findSibling(next, selector);
};
If you just want to search down the tree (and never up):
const findNextSibling = (element, selector) => {
if(!element) return null;
let next = element.nextElementSibling;
if (next?.matches?.(selector)) return next;
return findSibling(next, selector);
};
There's no real fear of infinite recursion since next/previous ElementSibling will eventually return null.
The tutorial is super useful and easy to understand. And it solve the problem that bothered me for 2 days . Thank you so much
You are literally the best teacher with clear explanations .. totally awesome content .. thank u so so much ..
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.
Great video, Dom traversal has been pretty difficult for me to figure out, this helped a lot. Thank you
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!❣️🙏🏻
You're very good at explained things, it show us that it's not as difficult as we thought, actually it's really simple.
Thanks so much for explaining the most powerful DOM Traversal methods in such an easy way, Kyle!
Keep up the good work👍
too good with very simple examples. it cleared my concepts in 14 minutes sharp.... much appreciated
Havent used query selectors on anything other than document and first time seeing closest() method aswell. Good vid thanks dude :)
closest() is crucial, especially when dealing with events. (almost) never go up with a while loop
Thank you for simplifying JavaScript. I always learn new stuffs when I watch your videos
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.
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!
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
You’re a natural teacher, thanks for all the videos!
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
Very good video and I appreciate the timestamps as I knew some but I could skip to those which were new to me.
Thank you. Iv watched several videos of js and css in this channel. Very very useful.
just start learning web dep, absolutely love all your videos, thank you for making and sharing those ❤
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!
great guide, literally the best material online for learning DOM
you could select the next child with document.querySelector("#child-one +")
Remember that in a query selector you use CSS selectors, and with the new CSS stuff like :has, :is, :not
And each CSS update, querySelector is more useful
Hey Kyle, your videos literally blown my mind. So much knowledge with so ease. Thanks a Lot buddy!
It really did simplify the most important parts of the DOM traversal. Awesome job!
I only watch your videos about website programming.This only says how good you are at explaining code and most importantly is easy to understand and also to memorize. 🤗
Ja ga i ne gotivim bas, prica monotono previse, kao da slusam robota
Thank you... appreciate your efforts in making these videos. Keep it up my friend.
Bro it is best youtube channel for javascript tips and tricks....Please make tutorial on angular react and vue
I like the way you explain it so much! even gonna forgive you missed semicolons and different quotation marks
You Just made DOM easy for me ❤️. Thanks a lot .
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.
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.
Had to deal with these this week. This video would help a lot. Thank you Kyle! 👍🏼
9:50 is such a shocker I had no idea thanks yo!
A very fluent and comprehensive tutorial on DOM Traversal. Thank you very much.
{2016-06-25}
why 2016?
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().
Your explanation is pretty good, 👍🏻👍🏻👍🏻
Great ! I learned “closest”. Thank you
mannn, thanks a lot for showing this method Array from, i was struggling with HTML Collections
It's amazing really. I've been a happy amateur in Javascript for many years. I'm by no means an expert, and you'd be hard-pressed to classify me as good, but still. I know my stuff.
Every now and then though, something pops up that simply rocks my Javascript world.
For years I've been mumbling select swearwords for having to build proper loops for looping element collections.
And then you just go and point out something so ridiculously obvious it annoys me. Just make an effing array of them...
beautiful way of explanation
These explanations are so clean, congrats on that!
concise and easy to understand
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
wow your teaching skill is amazing
Thank you , Kyle . I learnt something today.
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.
This is amazing man. Thank you for making this video!
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?
Great tutorial. I have learnt so much from it. Thanks Kyle
I got a whole lotta love for this video.
This video is a treasure, thank you so much❤❤
It really helped me... Thank you very much !!!!
Your methods are fascinating thanks alot🎉
Note that closest() starts by checking itself, not its parent. This may (or may not) make a difference.
Subbed, watched full vid and clicked the bell icon. Thanks dude you are the G.O.A.T!
Bro you are the best teacher for JavaScript, CSS and HTML. And you are destroying all your competitors.
now i understand dom! thank you
Thank you so much !!!! One of the best videos!!!!
you are too good to describe for words!!!!!
I watch your videos even if I think I know them all, just in case I get something new. I didn't know about the "closest" selector.
The dopamine kick from this is crazy
simplified that's the word thanks from Africa Angola
Excellent explaining.
Nice video, but one mistake (9:31) - you can apply getElementById selector only for document element
Good catch!
At multiple points in the video you use the children selector sometimes prefixing with Array.from and sometimes without: I'm guessing the Array.from isn't necessary as you directly access the children using forEach without Aaray.from?
@@StephenHind No, there’s a difference between `HTMLCollection`s as returned by `getElementsByClassName` and `NodeList`s as returned by `querySelectorAll`: the latter has a `forEach` method, whereas the prior doesn’t.
querySelectorAll() returns a NodeList, which has a forEach() method, so you don't need to convert it to an array
Brilliant!) Explained many things for me)
thank you bro. love from Türkiye
Nice simple tutorial. Thanks.
Superb Brother, Thank you so much.
thank u so much bro,,lv from india,,tq tq so much ,,
Great revision. Thanks man!
Did i change playback speed or this guy speak this way... But nevermind got some new knowledge 😁😁😁😁🙏🙏🙏
very helpful. May the force be with you. 👍.
These selectors are pretty important to understand. Thank you, Kyle, greetings from Brazil
Thanks Thanks Thanks , Great Tutorial
Absolutly amazing video!
Node list does not need to be converted into array to use the ForEach method on it. Great tutorial though.
Excellent content as usual 🙏! How do you learn and find materials to master subjects in this depth!
Thanks for revision!!!
Great teacher, great job
Nice I used to use path method
...or you could just spread that HTML collection into an array, less clunky ;)
Also: you could use firstChild
instead of [0] (admittedly, a matter of preference really)
Also also: fun fact: getElementsByClassName / getElementById is more performant than querySelector / querySelectorAll
Great video though, two thumbs (and one pinkie) up!
Awesome!! Well explained & easy to follow!
Man watching 15min of ur video is like 1yr in class !
Thank you so much I wish you the best.
AMAZING! Thanks!
Led Zeppeling shirt! Props!