Or we can go up and select any parent elements. So in this case from the head, we should be able to select the HTML element. So let's take a look at a few examples of properties we can make use of. Actually before we do that, let's take a look at the difference between a node and an element. I think the best way to illustrate this is to make use of a few properties here. So I have this simple HTML structure. I just have an unordered list with a few list items here, and you can see it in the browser here. And how about we grab all of the children of this unordered list? So let's say const allies. We can say document.querySelector, and let's select the ul.

So let's say const allies. We can say document.querySelector, and let's select the ul. And there's a property on elements or on nodes named children. And let's see what we get. Let's console.log that. Save that. And we get this HTMLCollection which has the three allies which are children of the ul. So if I expand this, hover over this, they are indeed each list item within the unordered list. So an element is basically any HTML tag. For example, if I had a comment within here, say I am a comment, and make it an HTML comment. If I save that, you'll see that we still get three elements.

For example, if I had a comment within here, say I am a comment, and make it an HTML comment. If I save that, you'll see that we still get three elements. So it doesn't count this comment as an element. However, if I change children to child nodes, which is another property, but now it gets all of the nodes. So let's save that. Now you see we get this node list, which is a collection of nodes. And you can see there's nine nodes within this unordered list here. So if I expand this, it still has the three elements. So you can see the three li elements here, one, two, and three.

And you can see it still highlights it within Chrome. So again, nodes can be things like text and comments, whereas elements are strictly HTML tags. And depending on what you need to work with, we have properties for both. So again, if you just need elements, make use of children. But if you need nodes, you can make use of child nodes. So that's when you're traversing downwards. So a few of the properties you can make use of is firstElementChild. Let me actually just change this variable name to something generic, say value. And let's change the property here.

Let me actually just change this variable name to something generic, say value. And let's change the property here. Let's say firstElementChild. So we're selecting the ul. We're getting the firstElementChild. So it doesn't care about the textNode or the commentNode, as the name implies. So it should be this one right here. So go to the store. So if I save that, and if you have a single element, it doesn't highlight it in Chrome. So if we just go into this, we should see that the text should be go to the store.

And since we're using querySelector, it will just select the first result. So if I save that, we do get this list item, which is the first one. So again, if I just go down here, it should be the first one, which is go to the store. Right here, cool. And if you want to grab the last child, again, you can use querySelector and do something like li:last-child. Or you can make use of properties like lastElementChild. So lastElementChild, this should work as well. Save that.

So last element child, this should work as well. Save that. We do get an li, but now it should be the last one. So take over world. So let me just double check here. And it is the correct one. And again, if you want the last node, that should be lastChild, which should be some sort of new line before the closing ul. And just to double check, it is a new line. Now let's take a look at selecting siblings or sibling nodes.

And just to double check, it is a new line. Now let's take a look at selecting siblings or sibling nodes. So let's first grab the first li. So we can use firstElementChild again. So that should be this first li here. And from here, say we wanted to grab the next sibling. So in this case, this element here. So we can make use of nextElementSibling.nextElementSibling. And that should be the second li again to confirm that. Let me just open this and scroll down to the text.

And that should be the second li again to confirm that. Let me just open this and scroll down to the text. And it is indeed the second one. And these are chainable. So if I did it twice, so nextElementSibling, we're on this one. But if I did it again, we should go to this one here. So let's do it one more time. nextElementSibling. Oops, sorry. Should be nextElementSibling.

And going backwards, we can use previousSibling. And that should work as well. Cool. And if we wanted to move up the tree, we can either use parentElement, parentNode, or closest. So right now we are on the first element here, after this first element child call. So if we just do value.parentElement, parentElement, then we should get this unordered list here.

And it does. Of course, these are chainable as well. So let me just change this back to parent element. And do it again. So the parent of ul should be body. And it is. The parent of body should be html. And it is. And that should be the last one, since html doesn't have a parent. So if I tried that, it should be null, I believe.

So I'll just select the anchor tag here. And there's only one, so a should be fine. And we don't need firstElementChild. And that should be the anchor tag. So from within here, say we wanted to find the closest parent given a certain selector. So again, it's basically the opposite of querySelector, and we're searching up the tree instead of down the tree with querySelector. So we can make use of the closest property or the closest method to do this. So we can say .closest.

So again, when working with a DOM and you already have a certain element selected, you can traverse the DOM downwards and search any children. You can traverse it sideways and select any sibling elements, or you can traverse it upwards and search for any parent elements. And we'll definitely make use of these properties and methods that I showed you here in a future video where we have a practical example and build a simple to-do list app.