In the previous video, we encountered a few difficulties in traversing the nodes of the DOM because of the text nodes that were created. Remember, the entire HTML document is converted to nodes. A tag within a smell document is converted to a node that we can work with. But when there's a carriage return or a tab, characters that we don't see when we're looking at the HTML document, those get converted to nodes as well. And those can cause some difficulties as we're traversing. We used the node type, node name, etc.
We can use those to overcome those difficulties. But with modern browsers, there's some additional JavaScript commands that we can use to only select elements to only traverse to HTML elements when we're moving between nodes in the DOM. Now, as I said, these are only supported by modern browsers. So if you're targeting modern browsers, then you can go ahead and use these commands. Now let's take a look at what they are. We have instead of first child, which we talked about in the previous video, we have first element child.
We have last element child. Instead of child nodes, we have children. So this returns an array of children as well. But that array only consists of HTML elements that have been converted to nodes. We have previous element, sibling, and next element sibling as opposed to just previous sibling and next sibling. Alright, let's jump to the same page.
We've been using To try these different commands on, and let's now look at some of the same things we were doing in the previous video. But with these new commands that we've learned, so I'll open up the console. And one of the first things we did in the previous movie was we selected the node that had an ID of content. And if you remember, that is this div right here that contains the h1, another div and all the bullets. So let's press return. Now if you remember when we did no next sibling, we ran into this, we received a text node.
And we were really trying to get to the next sibling in our HTML document which would be the footer. Well Let's see what happens now. We can use next element sibling, instead of just next sibling, press return. Sure enough, it gives us the footer like we were expecting. So it goes to the next HTML elements, not just to the next node, which could be a text node. All right with this we also did first child.
And that also gave us a text node. But now we can do node dot, first element child. And that gives us the h1 which is the first child of that div tag. Now I'll see you remember in the previous video, we selected all of these Li tags, while we selected the parent of them actually, the ol tag, the ordered list tag, and then we use the for loop to go through each one of them. And change the color to green. But we had to use node type as a part of that for loop.
If you remember we had an if if conditional that check to see if the node type was equal to one, if it were equal to one, we knew that it was an HTML element. And therefore we were able to change the color. Well, we can skip that if conditional by using one of these new commands. So let's do that same exercise again. We're going to select document query selector. So I just want the first one.
I'm not doing query selector all. I'm just going to grab the first one because I happen to know that there is only one that meets this criteria and that's a class of bullets. With a child node of o L. And I press return. Now in the previous video, we then took the child nodes of this variable, and those are what we iterated through with the for loop. This time let's take the children whoops. Now remember, children will return an array as well, but it will only have HTML elements, it will only have nodes of HTML elements.
So I press return, let's just take a look at it really quick. Sure enough, there are no text nodes in there. So now our for loop is a little bit simpler. So for let i equals zero whoops. I is Less than bullets dot length, then i plus plus. Now we do not need the if conditional we can simply do bullets, i dot style dot color equals green.
And then our closing curly brace. move this over a bit. So you can see the bullets. When I press return, sure enough, they all turn green. And we were able to get an array of HTML element nodes without any text nodes because of the children command which we use in this case. So in newer browsers, you can use first element child last element child, children Previous element, sibling and next element sibling.
Now how do you know what browsers support those commands? Let me show you a website really quick that will give you that information. Here's the URL. We're going to. And here are the commands we've talked about. You can see up through ay ay ay ay ay.
There is no support, ie nine above support. Firefox three no support. You can see where Safari is you can see where Chrome is opera. So that will give you an idea which browsers you can target for these commands. Let's move on to the next topic.