Welcome back, my friends, to another electric day, we're going to continue working with Adam, are
you going to learn how to traverse the DOM?
You're going to go from one one element to another element you're going to find with the what parent
means, what sibling means what?
I don't know.
Everything we have, we will do a lot of things.
So don't get frustrated.
This lecture is going to be a little bit longer.
But we want to explain as much as possible things as you can.
And yeah, if you learn this, then you will not have problems in future right now.
First things first.
You need to do one thing.
You need to create three.
Yes.
I'm just going to zoom in and I just need to link it here.
That's it.
Done the video.
Do it.
Come on.
So what we're going to do now is actually we I would like to access the entire you out list.
So I just want to access this list.
So if I go inspect here, you can see this you out here to do list.
So how we can do this.
Remember, we did Quarrie Selecter, so I'm going to see you.
You list you can put more meaningful names if you want and put them in here and let's document dot gov
query selector and inside.
So I'm not going to get all of them, but I'm going to say you and Dad come on to do list.
So let's see if I just nail this one down.
Now here, I'm just going to cancel the printing the U.S. list.
So this is what what I'm going to do.
I'm not going to put it comments anymore.
I'm just going to do it like this.
I'm just going to copy this.
And inside I'm going to put it like here, let's save it.
Let's refresh.
Let's go to the console in here is printing the others.
And if I go here.
Yeah, that's what you're going to have write the entire list is there.
So why is this happening, Lewis?
No idea.
Just probably delete something by mistake here.
Yeah, fix it.
Before when I was doing an app 3gs and just kill something here, I just remove this one.
That's why it wasn't working.
Now I do have the entire to do list.
That's not important what I did.
So what we can do here, what we can grab is actually we can achieve the same thing if we did like this,
because I assure you that we can do it with the query selector or so I'm going to show it to you that
it's still possible.
But you need to change this to apply to do list element.
And basically she produce the same result just to refresh.
But he's going to give me a Notley's, but it's actually the same one.
I see all four of them.
That's pretty much it.
We don't.
So I just show you that you can do it with a selector.
But in this case, we need to do it with query, select or not with query, select or select selector
all Jesus.
I can't even pronounce this one.
Now, what we can do is actually we will able to access their children.
Right.
So how we can do this, we can.
There is two ways we can access the children is a Notley's as you see this one was Notley's here.
I haven't refreshed.
That's why it's still there in the Second Way's A.T.M. collection.
You already know this too, but I'm going to do it anyway here.
So I'm going to say var upl list Telemann notes
in here.
So I'm going to say no and I'm going to say I need to pass this one here and to grab the child notes.
It's not child, it's not children, it's a child notes like that.
Now I'm just going to copy this one again.
I'm going to print it out here.
So printing the USO list
with child notes and I need to change this one here, there to look what will happen here.
Now, I'm going to have these notes here and I have text.
I have to do list.
I have text again.
And there are a lot of different notat properties that you're going to see here, but the text is actually
going to show you.
So if I hear just cut this one and put it here attached to the second one.
The first one, actually.
So I hope that this text will disappear.
It will be the list will be right.
Because the space.
Consider it as a tax and stuff like that, so you don't need to worry about all of these things because
I'm going to show you what different no type properties there are.
And we have 12 different types which may have children of various of various types.
Right.
And also they have the returned values.
But you don't need to worry about this because that is not today's lecture.
So this is how you can return to Notley's.
And so let's return only the how to say this is not list.
I'm just going to put it here.
No lists.
And each time a collection is very similar and we will see each HTML collection list and we will see
here saying you list element, any set of notes, I'm going to say children here.
And instead of passing the child notes, we're going to say, children know what this will do?
Just going to copy this one.
So I'm just going to do this letter is going to be too many copying and pasting things like page this
one here and I say, OK, children, this will return me the HTML collection, right?
So I have one zero position.
I have this ally, the second ally, and I have three.
The length is four right now.
What we can do, we can access.
The first and last element of these doesn't have to be this collection.
We can access the first and last element from this list.
See how powerful this is coming through.
So I'm just going to copy it here.
I'm going to say first and last and last child children, OK?
So I'm going to use this one.
You see you list because that holds the entire thing, the entire ALLAI lock right now.
So I'm going to how are we going to do it?
So I'm going to say variable first child and I'm going to put it here, the other list.
And I'm going to say first element child.
No, you can always when I use element you can always use without this element is going to be like this,
but that will return this text here.
So I'm not going to deal with that in this lecture.
So in 99 percent of the cases you need first element child, you need real elements.
I'm just going to cancel my first child.
Oops, this happened.
OK, let's let's see.
The first child will be printed here.
It is the first child.
So we have the first child from the list, but we can also access even the last child of that list.
So how we can do that.
So same as this.
Even I can use the same variable but I'm not I'm just going to say, oh, child, just to have a little
bit differently.
And this will be the last element to child.
Right?
So let's bring this out again.
It put this one variable.
So I expect this element to be returned here after this one.
Yeah, so we have first child of the list in the second child of this list, when I say list, I'm thinking
about you list an order list and the line is actually there, right in the no lists.
No.
So I've just briefly mentioned about Notley's and we haven't done anything with that.
So we can just do a for loop in because the Notley's doesn't only return elements inside, it returns
even this text.
So what we can do, we can do a for loop here.
And I'm going to say, OK, console what?
I just want to show you that what we are going to do.
So printing printing out the element, child node element, child with for loop so we can access a lot
of things here.
That's why you can go to type properties and you can read a lot of things here.
And what I can access a couple of the properties so we can access actually the name and no title.
And so how we can do this, we can use this list here.
I'm going to copy it and I'm going to use it in the for loop, not for data.
I'm going to use it for a loop.
So I'm going to say where I equals zero.
What's happening?
I smaller than the length of this one pi plus.
Plus we need to incriminate in all of this by now.
So inside what we can do, we can come to like two things.
We are mostly concerned to find out.
Sometimes we need to find out, you know, list element nodes ie the note name.
And I'm going to concatenate this with the space and I just want to access this.
I'm just going to copy the entire thing and I will say X is the node type.
Right.
What type we are talking about here.
So I hope it's going to work this one.
And let's refresh it.
Here it is.
So it's going text is going list element number one again, text list element number one, text and
stuff like that.
Oh, if you can see here, we have a lot of things, this node type.
So I'm showing you the numbers first.
I'm showing you the numbers with the node name and no type.
Right, because the text is three here.
If you go three, there is a text represent textual constant content in element or attribute.
Number one is element.
Actually, Elai is the element.
That's why it's number one.
That's why the node that is number one.
But what we can do is also if we add let's see first let's show you the number eight is a comma, represent
a comment.
So if we put somewhere somewhere in our ally here, I'm just going to put it in the middle.
So I'm just going to create an HTML element.
This is a common now, this comment, I expect it to be in this note list and it should be ten here.
Actually, it comes to eleven.
But here is the common is there is a number in the note.
I mean, the node type is giving.
You mean number eight.
So, yeah, you should go through all this when you have chance.
But don't worry about it because we're going to do it like when we have.
So no name returns this one.
So we are using this one and note that we're using that one.
So don't worry about it.
But just I just want to show you how we can access things from the noplace now we have done with this.
And what I want to do is also to print the parent node from this list, this list.
I just want you to print the you list element parent node.
OK, now that's another concern for us.
So parent notes that we have parent nodes and parent elements and they are just going to return the
same thing.
We can get a lot of things.
We can get the parent of the parent.
You will see in the minute what we're trying to say because here this you will list it.
Spearin is actually.
So if I minimize it here it Spearin is this list wrapper.
Right.
But the parent of this list repr if I just make it like this.
The parent, it's not actually this one because this one is ending here.
I don't want to confuse you, but the parent is this card body in the parent of this card body is actually
the card.
Right.
So he here is how this treats work right now.
Let's find the parent of this other list.
And we have the U.S. list where we have this to do list in our.
I'm just going to say that here in our list element right now, what we can do, I'm just going to say
there's a lot there's the parent note and actually, let's put it printing the parent note,
note.
You have a list and let's see what's happening.
So the parent knows I told you they're at least Tarapur right now.
We can access the parent element, but that will give you the same thing, right?
It we'll give you pretty much the same thing.
I expect parent element and let's see what's happening here.
Here is he's giving you the same thing so you can ignore that.
So parent.
No, but as I told you, we can get the parent of the parent, right.
Bringing the parent of what was the name, strapper.
Come on.
What else?
So, yeah, I mean, we're going to print that one here so we can take a look.
So how are we going to print what you think?
So we're going to put a dot and we're going to say again, parent note and let's hope it will give me,
as I told you.
So I'm just flicking around.
So from this list wrapper, the parent is this card body.
Let's refresh here.
It is hardbody.
So see, when I cover it, it's select lot of things, at least wrappers like the wrapper from the list,
an order list and this one for the card body.
How cool is this?
We can go one step further and that will should give us the card right here.
I'm just going to copy the entire thing.
Cark body, and we can go to one more thing, and that should eventually give us the car, the entire
car, nice.
So we know how to do this.
Now we know how to access the parents of them.
So see how we can traverse.
We can get the last first child, last child.
We can get the entire Notley's.
We can print the entire Notley's.
We can just find different note types.
What we have in our document.
We can do a lot of things, my friend.
So don't get frustrated.
We have a couple of things to do.
Right.
So, yeah.
So how we can get siblings right.
In our case, we do have siblings here.
Siblings means this next sibling or the first line is this one.
Right.
And next sibling is this one.
The previous sibling means one one step above.
But the previous sibling of this one, it can go up here.
Right.
There is nothing else it's going to return on and identify or know.
So I'm not sure what's going to return, but should be.
No, OK, no, I'm just going to say console here.
I hope you like this the way I'm doing this with a lot, because you will be able to see it.
Um, yeah.
What we are doing here, instead of just bringing out or commenting everything, I don't want to comment
nothing.
So printing
the preview and next sibling.
Right.
So what are we going to do?
I'm going to say we're fine siblings and I'm going to say, OK, document what did I type thought query
selector.
And we will say, OK, I just want to query selector that ally there we to do list element.
No, let's test out this real quick.
I'm just going to delete data that comes with that like five siblings.
So let's see if I can be able to pull out something.
Here it is.
So we just pull out the first one, this kind of return only one right now.
We don't need this, but actually we do need this.
So I'm just going to see the next element.
Sibling, how cool is this?
Let's check it out.
So this should give me the second one.
So if I hover, here it is.
So as I told you, you can go next.
Next, next.
In the next 11 sibling, you can go without this Elliman sibling, but it will return something else.
It will return.
No, it's not interesting, right.
So we are in the position number three right now.
What we can do, we can use the same one
with the previous five previous sibling.
Let's put it through this elementary link in this one.
It can get me in trouble.
It's because not because we are just finding the first one, because these fine siblings.
Right.
Don't don't confuse with this one because we are going down to the tree.
But this one is actually holding the first elements.
It's not holding this one.
We can create a variable here.
So if you want to find the previous sibling.
OK, so let's do it like this variable.
Find sibling of two, for example.
Oops.
What happened of the two sibling.
Fine sibling.
Yeah, it's not working here.
OK, fine sibling of the two.
You know what I'm going to do.
I'm just going to put it here and I'm going to refresh.
Nothing should change.
He's going to steal now.
But this if I just change a previous element sibling I should because this is the number two.
Let's refresh one and I should have this one because the previous element was number three.
So when I say to actually I mean zero one two.
Right.
In the previous element is this one.
How cool is this?
Right.
Otherwise, it will return you now because we are grabbing the first element of our I hope you understand
what I did here.
So if you have, you can just go previous element.
As I told you, this element everywhere can be deleted.
And it was not that one is going to return text.
Right.
Same as the noblest.
So I'm not going to bother explaining you there because it's not interesting.
And yet we have a couple of more things to do.
So what if we want to access the children?
Let me just show you.
So I'm going to go to the inspector here and I'm going to expect this ally.
So in this ally to do list element, I do have spane inside that holds the stakes here.
In the next element that it's inside is this trash.
It's atrip leak.
So I have students that sometimes ask me, but what, what how we can access because I never explained
them one on one.
I have classes sometimes one to one.
And and they have problems because say here they don't understand the concept, how we can get these
elements.
But I'm going to show you in this one, because it's going to be a good cause.
And I just want to have as much as things explained as possible.
So I'm going to say, OK, fine, the children of Elai that are are spane in each breath link.
How cool is this?
Now, I'm just going to use the same collection here.
So it's not going to be sibling, I'm going to say ally collection, and it's going to be the same thing.
No, I'm just going to love the collection in order to see it.
Council La Hilli collection.
And that should return me in the council.
This one the first element, because with me we are finding we're not getting all we just finding the
first element.
Now what we can do here, I just want to access and I did a show you like this, you can't actually
see it here, but I just want to access this one, the spin and the elai.
So how we can do this.
OK, first we're going to find the children,
the children, and let's see what's happened.
It's going to return me on HTML collection, right.
With two elements.
How cool is this?
Now I do have this one on one zero position.
You have the span on first position.
I do have this eight traveling.
So now it's easy from now on.
So what I can do is I'm going to I can create a variable here, guys.
Siwa Ayling.
No, let's put Hispan here and I'm going to say Elai children and I can get it like this zero and I
hope the other one link.
Link was on the first position, right?
So what we can do, we can cons a lot of them now comes a lot can say here span child.
And I'm going to cons a lot again.
And I'm going to copy this one here.
I'm going to put it here and I'm going to do it in one go.
I'm going to number one or zero.
I'm going to put it like this is number one.
It will be the H ref child right in here.
We need to pass in the link, right.
Because we store them.
Now, I'm just going to refresh you.
It is I do have this E class and I do have this span.
How cool is it?
So when I hover so I can access pretty much anything that I want and actually I can change things,
I can create I can get different text here for this span or let's let's do something interesting.
We can just add here.
Let's, let's do before.
I mean we can do it after.
I'm just going to add.
Iggy to each link.
So how we can do this, so I'm going to see this one, so it's in the link and we can see I.D. equals
Heidi.
And let's hope if I refresh a spirit, is there OK, let's just inspected here in it.
It is the Spaniard's there, right?
Spread to the tracks, to the traveling.
You can do the same thing for for the Spanish if you want.
Right.
So it shouldn't be Spanish.
It should be trash, Heidi.
Right.
I'm just going to refresh now and I'm going to inspect it here.
I'm going to say, OK, FFA.
Yeah.
Here this trash Heidi.
How cool is this.
Now you can change the color.
You can change whatever you want.
You.
So you know how to traverse.
You know how to get the parents to get the parents of their parents to get the siblings first and last
child from the list.
You know what?
They're different types and what they mean.
You can just Google it and actually just give it to this address.
I'm not going to give it in the in the documentation.
But remember, w w w we three schools that come and just type here know times.
That's pretty much it.
So thank you very much.
I hope you enjoyed this one.
You know how to traverse this one.
You know how to get the parent of their parent, the children, how to get the first last child and
yeah, a lot of things.
So thank you very much and we'll see you in the next one.
So if you haven't watched the previous one, just go watch the previous one, because this will you
will not understand if you don't want to previous one.
So thank you very much.
Like subscribe put a good common five star review wherever you want.
So thank you very much.
See you in the next time.