So that's children and child nodes,
now I'll reload this page to clear all of that
and now, let's actually go in the opposite direction.
Let's say we already selected a list item, let's say the first one so that we can use a query method
without any issues
and now we want to reach out to the unordered list,
so to the parent.
Now needless to say, you can of course get access to the unordered list for example with query selector
ul,
right?
But it's about understanding how you can traverse the document so that in a scenario where you have
a more complex document, you are able to easily reach out to the parent for example. So here I get my
list item now and I don't select the unordered list but instead, the first matching list item here,
here we need an equals sign,
yes
li is of course already defined here in our script,
right,
this already gets access to the last list item here actually,
so I'll use a different constant name,
Ii first document query selector li, of course we could have also worked with that last one.
So now to get the parent, we can use li first parent element or parent node.
Now this is not parents or parents nodes or parent nodes simply because each element, each node
can only have one parent, that's how HTML works and how it's rendered.
You can have multiple child elements or multiple child nodes,
you can't have more than one parent element or parent node. So here, parent node gives us access to the
nearest parents node, parent element to the nearest parent element node
and in this case, this is actually the same
and to be honest, in almost all cases it's the same,
why?
Because only element nodes can have child nodes and therefore of course if you're on a child node so
to say and you want to know all about the parent, it's an element node, text nodes can't have child nodes,
you can't nest other content into text nodes for example,
they can only hold text, no other nested content. So you might wonder, why do we have parent node and parent
element then?
Well there is only one exception to that rule and that is document document element. There if you reach
out to parent element,
you see we get null but if I repeat this and use parent node instead, we get the entire document object
as a parent node and I will be very honest,
this might be nice to know it is something which will probably never really matter in the code you write,
in your projects because if you want to get access to the document, you can just select it with the
document object. Traversing to it from some child node might just be a lot of work for something which
is already available on this document object, right?
So I don't really see a great use case for this,
I just wanted to let you know why both exists, in reality
as I said for all other elements, parent element and parent node always refers to the nearest parent element
and that always is guaranteed to be an element node and therefore you can use either of the two depending
on what you prefer.
Now let's get back to the other example here
I have my li first element and I reloaded the page, so I'll reselect it and now let's say from that
first list item, I want to get access to the body here.
Now this is kind of a redundant example because you can always easily get access to the body with document.body
but I'm just picking this as an example since I have no other ancestor in between the unordered
list and the body and I want to show you that of course selecting the unordered list is easy with parent
node or parent element
but if we want to reach out to another ancestor and header for example wouldn't be an ancestor because
it's not wrapped around the unordered list,
so if you want to get access to another ancestor, parent node and parent element don't help us because with
those, we only get access to the nearest direct parent, not to any other ancestor. To get access to another
ancestor like body which is an ancestor, we can use the closest method and the closest method takes a
CSS selector just like query selector and here for example, I can enter body and if I hit enter,
you see now the body element is selected and just to prove that this wouldn't work with header which
isn't an ancestor, if we try that, we get null. So closest is a nice method for selecting any ancestor
anywhere up in the element tree
as long as it indirectly wraps the unordered list in this case here or this list item in the end, that's
what matters here
and then closest just takes a CSS selector to allow us to conveniently pick the nearest ancestor
element.
Now if you want to pick the nearest descendant element, then of course that would be done with query
selector and so on, right,
that's for diving into nested elements of the selected element.