Learn JavaScript DOM Traversal In 15 Minutes

being able to select elements and traverse through the dom is one of the most important skills you can learn in javascript and in this video i'm going to share with you the nine techniques you need to understand in order to be a master traversing the dom let's get started now welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this also i just launched my javascript simplified course a few days ago so if you're interested in that make sure you check it out down in the description below covers everything you need to know about javascript beginner and advanced skills and it's only going to be available until the end of monday you only have a few more days to get that and if you're from the future and you missed this opportunity you can still go to the link enter your email and i'll let you know as soon as the course is live again so to get started with this we're going to be going over all the ways that you can traverse through the dom in javascript and to get started i have a really simple html file with a few different styles in it and essentially this is our structure of our html we have one grandparent element which is this red square that you see on the right side of the screen and we have two parent elements those are the green rectangles on the side of the screen and then we have children inside of them and these are these blue looking rectangles that you see on the side of the screen it's just a nice little hierarchy that we can use to reverse up down and sideways throughout the entire dom i also linked a javascript file here called script.js and i have that open here it's just a completely blank file what we're going to do is go over all the different ways we can traverse the dom and probably the most simple way that you can think of to traverse the dom is to select elements in the dom from the document for example if we wanted to select an element by id which is something you're very commonly going to do let's just add an id to this grandparent we can say grandparent id just make sure that's spelled correctly there we go and then if we go into the script we can just say const grandparent equals we want to select an element from the document so we'll say document.getelementbyid and we're going to pass in here our id which is grandparent oops grandparent id what we're going to do is we're just going to say grand parent dot style dot background oops background color we're going to set that to this grayish color so we can see it and when we save you can see that that red color has now turned into this grayish color on the right side of our screen because we've selected the grandparent element by id by using this getelementbyid method and then just change the background color to gray now i'm just going to create a single function here that says change color we're going to pass it an element and all this is going to do is just going to take our element and apply that color we can say element dot style and then we can just say change color of grandparent and that'll change the color of our grandparent everything works the same as before this is just make it easier for when we're selecting multiple elements we don't have to copy over this code all the time so now that we have that done we talked about how we can get elements by id the other most common way that you'll probably see element selections is with class name so we can select our elements that are the parent by the parent class and just say const parents equals document dot get elements by class name and here you just pass in a class name in our class parent is our class name and then what we can do is just take our parents dot four each and we want to just change the color now if we save that you'll notice that we get an error and if i just inspect our page real quick we can go to our console it says parents.foreign is not a function and that's just because when we call getelementsbyclassname it returns a collection but that collection doesn't have a for each method if we just convert this to an array though by calling array.from this will give us a array which has a for each method now you can see we've changed the color of both of these parents which we selected from the git elements by class name we'll get element by id we can only ever select one element because only one element can have an id that's the reason they're called an id but with class names since multiple elements can have class names this always returns to us a collection of elements in our case two different parents and we changed the color of both of them so now we understand to get element by id and get elements by class name next i want to talk about probably the most popular selector that i use which is query selector and query selector all so with query selector what we're going to do is replace this selector for our grandparent up here so i'm just going to come down and create a brand new selector for a grandparent variable and let's just comment this one out up here and now instead of using document.getelementbyid we're going to say document.queryselector and what this does is it says i want to select one element that's why it's just query selector and then what you pass to it is a selector like a normal css selector so if we wanted to get an element with the id grandparent id we would just put the pound symbol and then type in the id grandparent id and this is going to be the css selector to get an element with that id and now if we just comment this out and we want to change the color of our grandparent we can say change color of grandparent save this and you can see that now that grandparent has turned to that gray color as we used query selector to select one single element and we just passed it a css selector if you're not very familiar with css selectors i have an entire video that covers every css selector you need to know i'll link it down in the description below and the cards so i highly recommend you check that out if you're unfamiliar with css selectors now we understand how we can replace getelementbyid or really any selector where we want one element with a query selector we could also select an element by class so we could select this grandparent and we know that this has the class of grandparent so we can just come in here and say dot grandparent which is the css selector to get this class now if we save again it stays as that gray background color and even if we had multiple elements with this back or with this class it would still only select one because we used query selector we can see this by replacing our parents here so we can say const parent we just want to get one parent we're going to say equals document.queryselector we're passing in dot parent because we have that class of parent so now in order to see how this works let's just change the color of our parent here and i'm going to get rid of all this extra code that we don't need there we go all we're doing is selecting a single parent and changing its color and when i save you're going to notice it changes the color of just this first parent the way query selector works is it selects one single element and it just gets the first one it finds so in our case this div with the class parent is the first one it finds so the very first div turns gray and the second one while it still has the class parent is ignored because query selector just gets the first thing if we wanted to get all the elements that match the selector we would use query selector all and this will get us all the parents what we can do is just say parents.for each we want to change the color and now if we save this you can see both of the parents have their color changed because this is going to select everything that has this class of parent so these are probably the most common ways that you'll see selecting elements from the document you have getting it by id and getting my class name and then you have what i consider the most popular ways which is query selector and query selector all i use query selector and query selector all pretty much exclusively for all of my selection needs even if all i'm doing is selecting an id i still usually use query selector instead of get element by id just because it's consistent and easy to work with so now let's go back to where we select just the grandparent so we're going to say grandparent grandparent and here we have grandparent and we want to just change color of grandparent to make sure this is working and as you can see we have that grandparent being selected now what if i want to get the children of this grandparent in javascript this is very easy we can just say khan's parents equals grandparent dot children this is going to give us all the children element of the grandparent which in our case are these two divs that have the class of parent and now we can do is just convert this to an array so we can say array dot in order to use the for each method and we can just say parents.4 each change the color now if we save you can see both of the parents have their color changed and if you didn't want to use this array.from you could just do a normal for loop for example and that is going to work just fine or you could do a four of loop or whatever you want this just in my opinion is easy to work with so that's why i'm using it so now we have a way to select the children of an element and if we wanted we could say const parent one is equal to parents of zero that's going to get us our first parent and we can say children are going to be parents i'm sorry parent one dot children so now we have the children inside of this parent what we can do is just say that we want to change the color of children and we want to get the very first children so we're just going to get the first child and change its color so now you can see that this very first child here has been changed to gray and the way this worked is we got all the parents then we just got the first parent and from that first parent we got all the children and then we got the first child of that we're able to really easily navigate down the tree from the very top element to the very bottom element what happens if we want to skip all the way down to the child level we don't care about any of the parents or anything in between we just want to go straight from grandparent down to child you may think this is difficult because all we have is this children method but all the methods we've talked about so far get element by id get elements by class name query selector and query selector all work on every single element not just the document so i can say that if i want to get child 1 that's just the same as doing grand parent dot 3 selector oops selector of child and this is the class child now if i change the color of child one and save you'll notice i still have that same child being highlighted as gray that's because i'm able to select with query selector that first child if i wanted to get all the children i could just come in here and say children and then what i could do is just say children got 4 each i want to change the color now if i save you're going to notice every single child is selected because i'm able to just use a query selector on any element it could be the document be the grandparent it could be the children it does not matter we can use query selector query selector all get element by id and get element by class name on every single javascript element which is really useful when you want to navigate deeply inside of a single element for example navigating from grandparent to children now what happens when we want to go the opposite way though let's say that we start with a child and we want to go upwards to the grandparent so we'll just come in here and we're going to put an id on our child here id is going to be child 1 and what we're going to do is select our child 1 right here and we're going to select it with the id of child one so now if we just change the color of child one to make sure this works save that you can see that this is the element we currently have selected and what i want to do is i want to move up the tree so currently we've always been moving downwards i want to move up and select parents well we can get the parent of child 1 by just saying child 1 dot parent and you can see that there's a parent element and a parent node now honestly it really doesn't matter too much which one of these use but in our case we're going to use parent element because we want to make sure we're always selecting an element and node could sometimes select something that's not an actual element so just remember parent element is the one you probably want to use now if we change the color of that parent you can see we've changed the color of the parent of that child we selected we can do another one by getting the grand parent and that's just equal to our parent dot parent oops parent element and now we can take the grand parent and change its color you'll notice that this red now turns into this gray color so we're able to navigate upwards one parent at a time but you're probably wondering how do i skip parents what if i wanted to go straight from child one the grandparent well luckily this is very easy to do we have a method on child one which is called closest so we can say dot closest and closest works very similar to query selector except for it moves upwards instead of moving downwards so you pass it a selector in our case we know that our grandparent has the class of grandparent and what closest does is it selects the closest parent element that has this selector so now when we save you can see this grandparent is still highlighted in gray and that's because the way closest works is we're on our child it moves up one and it says does this match the selector we have in our case this class of grandparent it does not match this div so it says no then it moves to the next parent and says does this one match the selector in our case yes grandparent does match this selector because it has that class and then it just stops right there it returns this element and doesn't continue to go further so it always gives you the closest parent that matches the selector you pass in just like query selector gives you the closest child that matches the selector you pass in so at this point you understand how to move up the tree down the tree the only thing left to do is to figure out how to move side to side how do we select sibling elements let's just come here we have child one what if we want to select the sibling of child one because right now we just save this you can see that this child is the one that we currently have selected well if we wanted to get child two all we need to do is take child one and we can say next element sibling and this is going to give us the next element which is important next sibling could give us a node like i said we want to make sure that we're always getting the next actual element so next element sibling is perfect for us now if we take child 2 here and we save you can see that we have child 2 being highlighted in this gray which is exactly what we expect and what we want we can also move backwards though going from one child to the next if we said child 2 that previous element sibling this is going to move us backwards one element in the sibling hierarchy which is going to move us back to child one so if we say if we now have child one reselect it again the next element sibling gives you the next element in our case moving from this child this child and if we wanted to go previous element sibling that's going to move us from current element backwards one of these siblings these sibling selectors are ones i don't really use too often but all the other selectors i use in literally every single program that i write and they're crucial to your javascript learning experience and that's all there is to dom traversal inside of javascript if you enjoyed this video then you're going to love my full javascript course which is linked down in the description below i highly recommend you check that out thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 92,360

Rating: 4.9746156 out of 5

Keywords: webdevsimplified, js dom traversal, js dom manipulation, js dom, js dom tutorial, javascript dom, javascript dom tutorial, javascript dom traversal, javascript dom manipulation, javascript dom crash course, js dom crash course, js dom project, javascript dom project, js queryselector, js getelementbyid, js getelementsbyclassname, js closest, javascript parent, js parent, javascript closest, javascript queryselector, js queryselector tutorial, js, javascript, queryselector, wds

Id: v7rSSy8CaYE

Length: 14min 44sec (884 seconds)

Published: Sat Nov 21 2020