Learn JavaScript DOM Traversal In 15 Minutes

🚨 IMPORTANT:

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:

🧠 Concepts Covered:

- How to traverse up the DOM
- How to navigate down the DOM
- All the methods for DOM traversal

🌎 Find Me Here:

⏱️ 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

[Ayomikun]

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

[revizion]

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

[SocksWithSandals]

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

[mznunaya]

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. 👏

[Gerry]

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!

[roey]

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 :)

[xenialxerous]

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!!

[Soap_js]

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

[mateonavarrette]

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

[ohhellothere]

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

[alfredolino]

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

[Adam-iqzn]

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

[amiraalabeedi]

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

[Guii]

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

[neelamchaubey]

Thanks so much for explaining the most powerful DOM Traversal methods in such an easy way, Kyle!

Keep up the good work👍

[Dameworth]

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

[lingtravis]

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

[pkorneev]

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.

[NecquiTeja]

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

[coolcha]

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