Original subtitles

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.