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!!
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. 👏
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
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
Trying to learn and follow along but I am stuck. Kyle's example has the wonderful colored boxes but when I tried using the HTML that I can see on the video, all I get is a blank page. Can any help? What am I missing?
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
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
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
...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!
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.
Thanks! 11:30 - I think that (by mistake, because it "appears" on the menu) - It is the first time that you mention the word "Node" in the DOM concept. What are the use/purpose/best practice for all of thsoe DOM manipulations with using those Nodes? It looks quite important... Do you have any video about this subject?
Hi, just curious with this part ---> children.forEach(changeColor) does the changeColor function automatically take in each iteration without declaring it like this? ---> children.forEach(changeColor(child))
Pretty weird, why does getelementbyid have a foreach method but get elementbyclassname doesn't?! (The HTML standard limits the existence of Id to exactly 1 per document, while the number of classes is not limited.) I will probably never understand, why they decided to do so. Luckily there is the queryselector/all.
Hi, thank's for your content, it's valuable. I am trying to write a browser extension using ReactJS. I did not understand how access any website DOM with my code. Untill now I only got access to the code inserted in my browser extension and not to a third website. Could you help?
Hi, how could you put the tag inside the it still works? I have to put the inside the body to make it works. I did exactly what you did but I got an error TypeError: Cannot read property 'style' of null
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.
Hey man, good effort, but you need to link the full HTML/CSS or at least show it in the video, otherwise those who are actually trying to learn are heavily impaired.
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.
Queryselector seems to be the choice most people use but isn't getelementbyid better choice in terms of performance? Since it seems like Queryselector needs to search the whole dom for the given query but since id is unique, there is no search at all?
Is it typical to build objects in javascript and use them to populate html elements or when would you actually go through the trouble of creating a class to make objects that can affect your website?
How to select based not on class or id, but based on value for example select all h3 elements if the value or content is specific like "hello world"? Then hide the sibling
So the parents have decided to split the children...what a shame. I wonder what happened. I think the grandparent has something to do with it. I mean...is read and evil...also changing the color to grey. Pretending to be dead.
Does anyone have the answer as to why he had to convert the class parents into an Array but a few minutes later he was working with a class and did NOT convert that class into an array?
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. 🤗
document.getElementByID document.getElementsByClassName document.querySelector - cssSelector Pattern document.querySelectorAll - cssSelector Pattern domElement.children - to get children of a node childNode.parentElement - to get parent of a child childNode.closet('#id') - css selector - it works upward instead of downward childNode.nextElementSibling - to get the next sibling of a child childNode.previousElementSibling - to get the next sibling of a child Thank me later
dear, you have good knowledge/understanding of JS but my advice is please go a little slow so that we get things in our head and not from over the head.
Great video, but one nitpick, as it's something I see in production code somewhat frequently. After 3:55 you say, "only one element can have an ID." Even assuming you meant "only one element can have _the same_ ID", that's not technically true. If you run *document.querySelectorAll("**#content**")* on a TH-cam video after loading the comments, you'll find that they reuse the ID "content" multiple times. This isn't to spec, but browsers do permit this. If there's more than one element with the same ID & you use `getElementById` the behaviour is the same as `querySelector` in that it just grabs the first one. Definitely don't recommend repeating IDs, as it's non-standard & confusing. However, HTML specifies that it's the job of browsers to "correct" invalid HTML; this is unlike most "programming languages" which would cease to run in the face of an error.
![[Live] ศึกมหึมันส์มวยไทยสังเวียนเดือด เวทีมวยชั่วคราวสวนสยาม | จันทร์ 30 กันยายน 2567](http://i.ytimg.com/vi/pM1k6f7JXUc/mqdefault.jpg)
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!
Every want to watch full code...
Its confusing 😭 i.e html and css full code...please
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!!
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
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 ?
Your explanation is pretty good, 👍🏻👍🏻👍🏻
Well people like these vidz more and more but for me his way of teaching is not simplified.
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... appreciate your efforts in making these videos. Keep it up my friend.
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
Thanks so much for explaining the most powerful DOM Traversal methods in such an easy way, Kyle!
Keep up the good work👍
Note that closest() starts by checking itself, not its parent. This may (or may not) make a difference.
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?
Trying to learn and follow along but I am stuck. Kyle's example has the wonderful colored boxes but when I tried using the HTML that I can see on the video, all I get is a blank page. Can any help? What am I missing?
Did you copied CSS ? (or it's not visible on a video)
@@SirusStarTV I tried to copy everything I saw including the CSS for grandparents/parents/child. I wish I could see the entire page.
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
Node list does not need to be converted into array to use the ForEach method on it. Great tutorial though.
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
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.
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
Very good video and I appreciate the timestamps as I knew some but I could skip to those which were new to me.
how do you center the divs ? I don't see that in the CSS
Led Zeppeling shirt! Props!
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!
...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!
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.
Thanks!
11:30 - I think that (by mistake, because it "appears" on the menu) -
It is the first time that you mention the word "Node" in the DOM concept.
What are the use/purpose/best practice for all of thsoe DOM manipulations with using those Nodes?
It looks quite important...
Do you have any video about this subject?
Hi, just curious with this part --->
children.forEach(changeColor)
does the changeColor function automatically take in each iteration without declaring it like this? --->
children.forEach(changeColor(child))
Bro you are the best teacher for JavaScript, CSS and HTML. And you are destroying all your competitors.
Pretty weird, why does getelementbyid have a foreach method but get elementbyclassname doesn't?!
(The HTML standard limits the existence of Id to exactly 1 per document, while the number of classes is not limited.)
I will probably never understand, why they decided to do so. Luckily there is the queryselector/all.
is it possible for future examples, you provide a link to the code you will be working with? so that we can code along with you?
11:32 The var binding is called “parent”. The childOne method is called “parent”. Should I feel confused? So keywords are not like methods.
Hi, thank's for your content, it's valuable. I am trying to write a browser extension using ReactJS. I did not understand how access any website DOM with my code. Untill now I only got access to the code inserted in my browser extension and not to a third website. Could you help?
Hi, how could you put the tag inside the it still works? I have to put the inside the body to make it works. I did exactly what you did but I got an error TypeError: Cannot read property 'style' of null
Step One: Led Zeppelin shirt.
Step Two: Stairway To Heaven tutorial.
When I'm using querySelectorAll with parent it doesn't work, what should I do?)
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.
Great video, Dom traversal has been pretty difficult for me to figure out, this helped a lot. Thank you
Hey man, good effort, but you need to link the full HTML/CSS or at least show it in the video, otherwise those who are actually trying to learn are heavily impaired.
He goes really fast. Didn't realize .children was a built in DOM property and was mixing them up with his html .child class
mannn, thanks a lot for showing this method Array from, i was struggling with HTML Collections
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.
Queryselector seems to be the choice most people use but isn't getelementbyid better choice in terms of performance? Since it seems like Queryselector needs to search the whole dom for the given query but since id is unique, there is no search at all?
Another 15 minutes having fun. Ta Kyle.
Bro it is best youtube channel for javascript tips and tricks....Please make tutorial on angular react and vue
Thank you. Iv watched several videos of js and css in this channel. Very very useful.
learn javascript travesing .... in 7.5 mins video 2x
Amazing thanks!
What if I would like to know if the lastChild contains the class?
Is it typical to build objects in javascript and use them to populate html elements or when would you actually go through the trouble of creating a class to make objects that can affect your website?
Hey Kyle, your videos literally blown my mind. So much knowledge with so ease. Thanks a Lot buddy!
İ always hated JQuery :D. Thank you for this excellent guide. Greetings from Azerbaijan.
Thanks for revision!!!
How to select based not on class or id, but based on value for example select all h3 elements if the value or content is specific like "hello world"?
Then hide the sibling
This is amazing man. Thank you for making this video!
Brilliant!) Explained many things for me)
So the parents have decided to split the children...what a shame. I wonder what happened. I think the grandparent has something to do with it. I mean...is read and evil...also changing the color to grey. Pretending to be dead.
Hey.. why javascript course is not available???
You're very good at explained things, it show us that it's not as difficult as we thought, actually it's really simple.
simplified that's the word thanks from Africa Angola
This video is a treasure, thank you so much❤❤
please make a video light/dark mode in one button type by javascript
Why would you collapse the changeColoe function the whole tutorial?
Does anyone have the answer as to why he had to convert the class parents into an Array but a few minutes later he was working with a class and did NOT convert that class into an array?
how did you make the preview page live change when ever you save the file it change automatically there? please share the trick
Man watching 15min of ur video is like 1yr in class !
For some reason every time I use "getElementsByClassName" it NEVER works for me, even though I reference it correctly
should be paying you instead of my bootcamp. cause if it wasnt for your videos id be lost
Thanks Kyle. Goodbye jQuery
the black screen makes it harder to follow and clearly see the symbols....
yea I'm not ready for this just yet. Back to HTML and CSS for now
Your methods are fascinating thanks alot🎉
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
Absolutly amazing video!
It really helped me... Thank you very much !!!!
thank u so much bro,,lv from india,,tq tq so much ,,
document.getElementByID
document.getElementsByClassName
document.querySelector - cssSelector Pattern
document.querySelectorAll - cssSelector Pattern
domElement.children - to get children of a node
childNode.parentElement - to get parent of a child
childNode.closet('#id') - css selector - it works upward instead of downward
childNode.nextElementSibling - to get the next sibling of a child
childNode.previousElementSibling - to get the next sibling of a child
Thank me later
Great ! I learned “closest”. Thank you
Thank you so much !!!! One of the best videos!!!!
why aren't you using a semi colon at end of a statement?
These explanations are so clean, congrats on that!
The dopamine kick from this is crazy
W-what are you doing step element?
you can use arrays with the siblings too, right??
You’re a natural teacher, thanks for all the videos!
It really did simplify the most important parts of the DOM traversal. Awesome job!
dear, you have good knowledge/understanding of JS but my advice is please go a little slow so that we get things in our head and not from over the head.
Thank you so much I wish you the best.
13:34 what's the difference between the node and the element?
why is the script in the head tag. Won't that cause an error, because the script will be loaded before the DOM
He added defer attribute to the script tag which causes the script to load after html content
now i understand dom! thank you
Did i change playback speed or this guy speak this way... But nevermind got some new knowledge 😁😁😁😁🙏🙏🙏
Great Vid. Thank You!!
Subbed, watched full vid and clicked the bell icon. Thanks dude you are the G.O.A.T!
Great video, but one nitpick, as it's something I see in production code somewhat frequently. After 3:55 you say, "only one element can have an ID." Even assuming you meant "only one element can have _the same_ ID", that's not technically true.
If you run *document.querySelectorAll("**#content**")* on a TH-cam video after loading the comments, you'll find that they reuse the ID "content" multiple times. This isn't to spec, but browsers do permit this. If there's more than one element with the same ID & you use `getElementById` the behaviour is the same as `querySelector` in that it just grabs the first one.
Definitely don't recommend repeating IDs, as it's non-standard & confusing. However, HTML specifies that it's the job of browsers to "correct" invalid HTML; this is unlike most "programming languages" which would cease to run in the face of an error.
Thank you for simplifying JavaScript. I always learn new stuffs when I watch your videos
Thanks Thanks Thanks , Great Tutorial
Thanks ! You are helped me too !! :)
how do we know when to use Array.from and when not