Instructor: This lecture
is gonna be about Traversing the Dom.
So Dom traversing is basically walking through the Dom.
Which means that we can select an element
based on another element.
And this is very important
because sometimes we need to select elements
relative to a certain other element.
For example, a direct child or a direct parent element.
Or sometimes we don't even know the structure
of the Dom at runtime.
And in all these cases, we need Dom traversing.
And this video is gonna be
another very nice reference lecture for you.
And so let's now work with this h1 element here,
and from here we're gonna go downwards,
upwards and also sideways.
So let's quickly inspect this element.
All right.
So we see,
so here we have the h1 element
and in there we have some text, we have some comments,
then we have the span element, then some more texts
and even more elements.
And so this is gonna be a lot of fun,
exploring a couple of different methods
and properties to walk around this element.
So let's start by selecting it.
Maybe we already did that before somewhere,
but yeah, that doesn't really matter.
So let's start with 'going downwards.'
So basically selecting child elements.
So the first way of doing that is to use querySelector
because we already know that querySelector
also works on elements, not only on the document.
So let's simply log to the console h1.querySelector
and then let's again, see here what we could select.
So we have this class highlight and this class highlight.
So that's these two green ones,
and so let's select them here.
So that's actually querySelectorAll
because there were two of them, and so class highlight.
So let's take a look and indeed here they are.
So this here indeed selects all the elements
with the highlight class
that are children of the h1 element.
and that would work no matter how deep
these child elements would be inside of the h1 element.
Okay, and that's very important to notice.
All right, now, in this case these two elements here
are direct children of the h1
but as I said, it would go down as deep as necessary
into the Dom tree.
Okay, and also if there were other highlight elements
on the page, so elements with this class,
they would not get selected,
because they would not be children of the h1 element.
All right?
So these are two points that are important to note here
about querySelector and querySelectorAll.
Now, sometimes all we need are actually direct children.
And so for that, we can use h1.childNodes.
So let's take a look.
And so here we actually get all kinds of stuff.
So we get texts we get the comment,
and we get then these elements.
And that's because we already know
that nodes can be anything so they can be texts
or elements or even comments as we have here.
Okay?
So this really gives us, every single node
of every single type that there exists.
But many times we are simply interested
in the elements themselves.
Right?
So if we wanted to text
we could use .textContent or .innerHTML.
So childNodes is not that used
but instead we can use children just like this.
And this then gives us an HTMLCollection
which remembers is a live collection, so it's updated,
and so here we indeed only get the three elements
that are actually inside of the h1.
So that this break in and is span again.
All right, but this one works only for direct children.
So keep that in mind.
Okay?
Finally, there's also first and last element child.
So these names are a little bit confusing,
but one more time,
that's because of the messy nature of JavaScript
with all of these things being implemented
at different points in time.
And so therefore it was difficult
to keep consisting naming conventions.
But anyway, let's use firstElementChild,
and so here it already is, style.color
just so that I can show you
that we can actually also set these properties.
Or use them to set something like the style.
So for example, we can do this,
and then only the first child here
gets now this color set to white.
So basically this element here
which is the first element here of all the children.
That's why it's called firstElementChild.
And we can of course do also lastElementChild,
and let's say this one to black,
so it's a little bit different in how it used to be.
Let's say orange red, I really like this one.
And so now it looks a little bit more crazy.
Okay, but now let's go upwards.
So going upwards.
So basically selecting parents
and for direct parents, it's actually very straightforward.
So here we have h1.parentNode.
And so that one is similar to childNodes.
So let's see.
And so it's this header title.
So as we open this up, we see that indeed this h1 here,
is inside of header title.
And so this is the direct parent,
and so that's why we get this.
Then there's also the parentElement,
which is usually the one that we are interested in.
But in this case, it's simply the same.
All right?
Because this element is also a node in this case.
However, most of the time we actually need a parent element
which is not a direct parent.
Or in other words, we might need to find a parent element
no matter how far away it is and the Dom tree.
And for that, we have the closest method.
So that's h1.closest.
So let's say that on the page, we had multiple headers
so multiple elements with a class of header,
but for some reason
we only wanted to find the one
that is a parent element of h1.
So of all h1 element here.
And so for that, we can use closest.
And so the closest method receives a query string
just like querySelector and querySelectorAll.
All right?
so .header,
and then let's do something with it.
For example, change the background image
or just change the background.
And I will set it here now actually to a CSS variable.
So let me show that to you.
So here we have all of these CSS variables,
or as they are officially called 'custom properties'
and we used them in CSS by doing this.
So by writing variable
and then a color and so well, let's actually use a gradient.
So gradient.
Yeah so this one.
Okay?
Just so you can see that we can use
custom properties also in CSS.
So give it a save and beautiful,
well, it's not that beautiful I must say,
but indeed it worked.
So it selected the closest header to our h1 element,
So the closest parent element that has this class
and then it's simply applied all style to that element.
So this is a very important one
and we're gonna use it all the time
especially for event delegation.
So take a note of that, or just keep it in mind.
Now, if this selector here actually matches the element
on which we're calling closest,
then that's actually the element that's gonna be returned.
So let me also show that.
So, we are calling this on the h1 element.
And so if we're looking for the closest h1,
then that's gonna be exactly the element itself.
And so, as I just said,
then that's gonna be the one that will be returned.
Let's make this a bit more prominent here,
and so you'll see that indeed,
now this is the h1 element itself.
So we can think of closest here
as basically being the opposite of querySelector.
So both receive a query string as an input
but querySelector, finds children,
no matter how deep in the Dom tree,
while the closest method finds parents.
And also no matter how far up in the Dom tree.
All right, so very important method here to keep in mind,
and now let's go sideways.
So selecting siblings,
and for some reason in JavaScript,
we can only access direct siblings.
So basically only the previous and the next one.
So that's h1.previousElementSibling like this,
and then there's also the nextElementSibling.
All right,
so the previous element sibling is null.
And so if we take a look at that,
it makes sense because there is nothing there.
So this is the first child of this parent element,
and therefore it doesn't have a previous sibling
but it has a next sibling.
And so that's this h4 element, which comes after it.
And just like before, we also have the same methods
or actually the same properties for nodes.
So that's just previous sibling
and next sibling.
So let's see, and here the previous sibling
is now actually text,
so not sure what that is.
Well, that's not really important because again,
most of the time we're gonna be working
with the elements anyway.
Now, if we really need all the siblings
and not just the previous and the next one,
then we can use the trick of moving up to the parent element
and then read all the children from there.
So let's see,
so h1.parentElement,
so that's just like we learned before,
so the direct parent, and then from there,
we can get all the children.
So just like we learned here also before,
so .children,
and so now we get all of the siblings
and that of course is gonna include itself.
So that's all of these elements
and all of them are siblings.
And just for fun,
let's actually do something with them here.
So this is an HTMLCollection,
remember, so it's one more time not an array,
but it is still an iterable
that we can spread into an array.
So we can do this,
and it will then create an array from this.
And then we can loop over that array
and do something using the forEach method.
So let's say that we wanted to change
some style to all the siblings,
but accept the element itself.
And actually that's more straight forward
than you might imagine, so we can simply do this here,
so we can check if the element is different
or equal also works, then the h1.
Because h1 is or original element itself.
And so comparisons between elements actually work just fine.
Okay?
And so when the element is not the h1 itself,
then let's change the style,
and let's say we want the transform property,
just to scale them a little bit,
let's say 0.5.
So scaling them by 50%
and indeed all the other three siblings
are now like 50% smaller.
All right?
And so this is how we can work
with all the sibling elements of one element.
Great, and that's actually the fundamentals
of Dom traversing.
And we're gonna need them all the time, and especially,
when we're doing some more complex event delegation
likely will do throughout the rest of the section.