There are times that once you've retrieved a node from the DOM that you need to be able to traverse the DOM from that node. In other words, move to a different node, a parent node, a child node. In this video, we're going to look at the JavaScript commands that allow you to do that. So first, let's introduce those commands. First we have parent node. So if you want to get the parent of the current node you have parent node will allow you to do that child nodes that will return an array of all the child nodes of the current node you have.

First child will return the first child, last child will return the last child. Then you have next sibling and previous sibling. So those two commands allow you to traverse on the same level. So for example, if I jump out To the HTML page, one that we've been using as an example, for the last several videos, these Li tags are on the same level. Therefore, these are siblings of each other. So if I had this node, next sibling would go to this node, and so on.

Now let's take a look at how we would use these. So to do that, I'm going to move to our selecting exercise that we've been using. I'm then going to open up the console. And first, let me show you the structure again. So I've come into the console got gone to the elements tab, and inside the body, we have a div tag with an ID of content. If I open up that div tag, there's an h1 tag, there's another div tag for the bullets, and then the bullets are inside of that.

Okay, so that's our structure. We can see that same thing in the HTML file. Here's that div tag with the ID have content. Inside Out, we have an h1 and then another div tag, and then the bullets are inside of that. So I'm going to select this first div tag, and we'll move it around the DOM using that div tag. So to do that, I simply enter var node equal to document dot query selector.

And then since I'm using query selector, I indicate that I want the ID of content. The hash symbol indicates that I'm looking for an ID press return. Now if I display node, we can see that we have that div tag. If we open it up, we can see everything that's inside it. Alright, now let's find out what the parent node of that is. So if I type notes A parent node, it returns the body tag.

And that makes sense. If we look at the HTML file, here's that div tag. Well, its parent would be body. This is a sibling. And the footer is a sibling as well. So let's try to find it sibling.

Let's do next sibling. Oh, no, what's this? What do we get here? That does not look like the footer tag that we were looking at. We have some sort of text node. So what why are we getting that as the next sibling?

Well, to illustrate that, let me display all the child nodes of this. Remember, that returns an array Sure enough, I have the h1 now I also have the div of bullets that contain all the bullets, but I have some other text nodes as well. What are these text nodes? Well, that's an important thing to understand is you're trying to traverse the DOM. So everything in an HTML document is converted to a node. And that includes text.

So as it's going through and converting stuff as it as it finds a tag, it converts that entire tag to a node. But there is a carriage return that follows that tag, or there may be a tab that follows that tag that is converted to a text node. And that's what we're seeing here. For example, if I open this up in the data, it looks like it's telling me that that's probably a carriage return that it has encountered there. So all of those text pieces that exist within an HTML file, become nodes as well. Not only that, HTML elements, but the text pieces.

So that makes it a little bit tricky for us to traverse the DOM. See if I were to use node dot first child. Well, that's great, except it doesn't give me what I want. I was hoping to get the h1 where I get the text element. So how do we deal with that? Well, let me jump back.

And we're going to introduce node type, node name, node value and attributes. Those help us work with this issue. So let me introduce those quickly. So if we check the node type of a node, it will return a numeric type it will return a number which indicates what type of node that is. That can help us separate between nodes that are elements of the HTML document and text nodes. For example, the common node types you can get is one as an element.

So if you if it returns the number one, you know that is an element. If it returns a two, it's an attribute of that node. If it returns a three, it is a text element. So no type can be very helpful. Node name can also be helpful because no name will return an upper case tag name for that particular nodes. So if it's a node that was created from a tag, it would display a tag when we tested the node name.

Now node value also can be used and we'll look at that in a lot more detail when we start looking at changing values, but basically node value will return no for a regular element. Or it can return the text from a text node. Then finally, attributes returns an array of attributes So the attributes that are assigned to that particular node. So let's take a look at how that can help us. I'm going to select the first bullet on this HTML page. I'll use get element by ID this time.

And the ID for that is B one. We go ahead and press return. All right, let's take a look at B one. Just make sure we got what we're after. And yes, that looks like that's the first bullet. Let me dock this so it'll be a little bit easier to see.

And we can see that the contents of that using different slack methods. Alright, let's check the node name for that. Be one dot node name and that comes back With the tag in uppercase, let's see what the node type is. It is a one. This is an HTML element and therefore the node type is one. Now, does this have child nodes?

Well, let's check. So it returns an array and look what's in the array. It looks like there is one element and it happens to be the contents of this. Now this is an important concept. When you have a node that is derived from an HTML element, its child node is a text node that contains the contents of that tag. So to illustrate that, let me type be one child node And then I'm going to get the first element in that array, because there is only one.

And then let's check the node type of that. Ah, it's a three. That means it's a text node. Now also, let's take a look at one node value. What does that return that returns a no. So node value will return a no whenever it is an HTML element.

But what if we go child nodes? Get the first one again. And now do node value. Ah, look at that. That's the actual text. Now this is how we would go about changing the text of that.

No code is we have to get the child nodes of it to get that text node. And then we can get the node value and we can change the node value or display the node value. So let me execute that again. But this time, I'm going to set the node value equal to something else. Sure enough, when I press return, that first bullet changes to the new text which I assigned to it. All right, one more quick exercise to show how this can be helpful.

The node type, node name, etc. How it can be helpful when you're traversing nodes and trying to work with the DOM. Let's say I wanted to select all of these Li tags, the nodes created for all of these Li tags, and I wanted to change go through each one and change the color to green. How would I go about doing that? Well, I could select each one individually. And then change it because we have an idea attached to it.

What if we did not have an ID attached to it? What would we do them? Well, here's one example. First, I'm going to gather those up. Using this statement here, create a variable nodes and set it equal to document query selector. I just want to find the first one.

And then inside the query selector, I have dot bullets, which is the class bullets. And then the descendant of that is the oil tag. So that will get all of them because it will get the oil tag and they are all children of that tag. I press return. We can take a look at that. Sure enough, that's the ol tag.

Now, I'm going to create an other variable really quick. I want to get the child nodes of that press return. What does it give me? See, I've got all of the individual Li, Li tags, but notice I have some text nodes as well. So I have the nodes associated with the Li tag, but I have text nodes as well. And so I need to be able to traverse through this making a change to the style, but not getting these text nodes.

So let's create a for loop that would do that. Now so you don't have to see me type all this in. I've got this already set up and let's just walk through it. So in the for loop, I let i equals zero, and then we want to run the loop while I is less than the length, the length of this array because you all remember child nodes returns an array. And so it is an array of nodes. And so we're going to go through that accessing each node within that array, and then I increment it.

Now I check, if you LS i. So if the first time through this loop, if the first node has a node type of one, then we're going to change the style. We do that right here dot style dot color equals green. Remember, no type of one is an HTML element. No type of two are attributes. No type of three is a text node.

All right, let's see how that works. So I press return. Sure enough, it changes them all to green. I didn't get any error messages because we have this if conditional which checks to make sure that is the right type of node before I actually try to change the style. If I had tried to change the style on a text node, I would get an error because a text node does not have a style property. So we've covered multiple things.

Here we've covered JavaScript commands that allow us to traverse the node, parent node, child nodes, which returns an array of children nodes, first child, last child, previous sibling, next sibling. Then we also discussed no type, node name, node value, and attribute and how those can help us as we're working with node. Now with newer browsers, there is an easier way to make sure you're only selecting HTML elements when you're working with nodes. We'll take a look at In the next video