Welcome back, guys.
Welcome to another lecture here, we are going to continue with Don Manipulation because we just started.
So if you haven't just watched the previous lectures and it all be clear, this is a brand new project.
I do it for you guys.
It's to do is it's nothing special.
We have adding a task and we have removing and this is a reset button now.
You give me an example.
I'm just going to show you.
What's happening here in Zem?
Yep is an example that I have Domme folder and inside, of course, James says you don't need to worry
about this one in index, that what you need to worry about is these two files index, an app that just
because I'm going to give it to you, you can download this project from from there and you can start
it right now if I refresh here at five.
So I do local Hungnam or you can name whatever you want in control.
You will see this.
What I have here now, I do have the DOCTYPE.
Starting the DOCTYPE, I have the head, I have the body in the side, I have a couple of elements right
now.
I don't use I use this here.
I use Google funds and you will see which Google phones this mouse model.
I don't know.
There are no display.
I've no idea what was the name.
It looks it looked good for this project.
Now, I do have this cute, fun, awesome.
And I do have this number.
This number is not going to be your number.
Right.
You should go and find out some or you can download link and just put it here.
The way that I don't want to do it like this, the Kilink or Bouchareb, you can do the same thing with
Bouchareb, but lately I have a lot of errors.
When I do a console, you will see what I'm what I'm trying to see if I don't do inspect.
If I go to Gonzales here, it is a cookie, OK, this is something else, but Dev tools failed to source
map, stuff like that.
If you open the same one.
If you open the same one in Firefox, I will have a known property mass on smoothing that is coming
from actually this line here from funhouse.
So if I remove this line, you will see if I save it.
You're not going to have at this point.
But I'm not going to have the icons right.
If Unosumai, because I don't have access in future, you might have a different one.
So what I strongly suggest is you pretty mean that CSX actually, I don't have it here.
This is coming from Dodo's.
So this is from font.
Awesome.
You can download CDN link, do whatever you want.
I'm not going to show you that because that is too basic and you can Google it and find a way to do
it right now.
And I'm not sure if this is going to work for you guys.
That's why you need to know that I have here in the bottom I have a script, and this is how you can
navigate.
You can get into the app just now.
One thing first that you need to know, which is I'm going to show it to.
When you do control you, you will save this one.
Now, the first things that you need to check, you need to click in this one if that is loading, OK,
if you see this code and means that it's loading, good.
Now, if you check this one.
It's empty at the moment, but let's let's show it to you.
Here.
And it should give you something right now that means that this mine is loaded.
Now, if you don't put it in a folder like me, you're going to have problems.
You need to you need to use only Abdah J.S. That's what I'm trying to say now.
Find a correct location.
These double dots or slash it goes outside one folder, one directory.
This because we are here, I do use that one and it will give me the gas and that's how I managed to
grab it.
Now, please, I don't want to mails emails for these things.
Just load those things, make sure that is working for you correctly.
See, see if the bad is working.
That is what you need to do.
I'm just going to zoom in here.
This is not visible.
So what we are going to do is actually even have this folder.
You're going to have this project already.
So we're not going to code this part.
So I'm just going to show you what's inside.
We have inside card and we have the card, but we have to do list.
That's the title.
We have the add items.
That's the form inside.
We have the method.
Don't worry about we aren't going to do it anything.
So here maybe you need to put some mine in a save that file, but we're not going to do that.
So this is empty.
That is because because of that, just I need to make it like this in order to see it, because I now
I have a button inside.
Good to have high class plus circle and that.
Ladies and gentlemen, is giving you this part.
She's going to close.
I just want to show you a lot of things, that's why I'm jumping all the way.
So this is the bottom so you can add things.
This is the input we spot.
I style the input in.
The US, he says, but I did the most of the styling here, so I'm going to give you this one, no hearsays
watching because I have a extension called.
Where is it?
I have this one less SAS compiler, you can install it because if you want to change it here, it's
better for you to change something here in this actually will put in CCIS mean a couple of files, right?
Because this is the main the Sears's.
Now, if you have another file, additional file with the changes here, you can include it here.
Right.
That's what I want to show you and let's let's move on.
So I do want to show you a lot of things because I don't want him to be I don't want you guys to be
unfamiliar with things, how we get here.
So I did call it this one.
I did style this one.
Now we do have the least wrapper.
We do have to do list with elements.
So I'm not at least with Elai inside.
So if you don't know anything about this, check out the I don't know, check out Internet resources
about an audit released orderlies.
This is very basic things.
Get in here.
I do have a link and I have a span with the name.
So I do have the classes which I use for styling in.
At the end.
I do have another form for the resecting and that is this button here, right?
This is the trash that's coming from this link.
Right, right, class warfare trash, that's why I told you that you need to have this part, because
if you don't have at this part, so if I thought it was refreshing, I'm going to be able to see to
this part.
That's it.
Simple.
Now, OK, one more thing.
I prefer you to use this Google Chrome, because this is the way I'm going to show you the inspect.
It's a little bit different in Google Chrome and it's a little bit different in here.
Now, this mass on smoothing, these is the arrow coming from this bad boy here, because I don't know
what's the problem.
Even if you do install a CD and if you use a link, if you use even the bootstrap, it will give you
a bunch of errors here, unknown properties, whatever it is there.
So that's why I just spent a little bit of time in.
But again, I have an error, so don't worry about this.
Nothing wrong with your with a code right now.
I'm going to show you how you can we need to start.
So now let's look in a console and find a window document object.
Right.
What will give you.
So that's why I'm saying here you can type window.
Sorry.
And hit it, hit enter, and if you don't hit enter, it's not going to be able to see this.
Now, this is giving me a lot of things here, a lot of a lot of things that we can access.
But what we are most concerned is this document.
So here is you around the body in a lot of things.
But there is another way how we can access this one.
Actually, let's put it in the let's hear it see it here window.
So it should be a little bit similar and it is not very similar, but that's why I'm just trying to
show you that you is better for you to follow here.
Now, I'm just going to clear all of this very good in what I'm going to do in this abduh.
Yes, I'm going to create a variable type document and we're going to use we're going to create a couple
of variables or that in links.
And don't worry about this.
We're going to use it.
So this document we're going to assign to the document that I just already showed you and we can do
Konza like.
In print out the document now.
I'm just going to refresh in here.
You're going to have at this document, let's refresh it here and I have HMO documents, right?
That's a little bit different.
Here is a little bit different presentation, but it will get you the same thing right now in this document.
I have DOCTYPE, I have the HTML, I have the head.
What else?
I do have everything.
What we have actually here it is in the file.
That is what actually is printing out now.
This we can grab a lot of things from this document, we can access those things.
So how we can do this now if I want to grab all of what's inside a document, this is very easy.
We can just say, OK.
Now, dot equal.
Sorry, dot equals to document dot oh, we'll do this, we can just grab the HDMI collection.
This will give us an table collection and if you're confused why I put this one here.
So anything that is in the second second line, anything that comes after this, it will be rewritten
and it will be assigned to this document variable.
So that why this is not going to give us this part is going to give us the last thing that we are assigning
this variable to.
Now, I'm just going to refresh you.
It is it's a collection.
Forty five so we can check this.
This is actually the length how many elements I do have in this.
In this here, but actually, if I did control you, it's better, better like that.
So it's giving me forty five.
This is the length and it's giving me an error.
Actually, this is not an error, but we can also.
We can hear and we can see on the positions here where we do have HTML position one head method math
on three Link Lingling, this is Lingley from from our own awesome in our styles.
So we have title in the position and now what else we can we will do is actually we need to, we need,
we can access for example, we can access any element here.
Now I just want to access which one on the number 10 position, the title.
I just going to grab the title so we can say, OK, let's write this one.
Will give us a document.
HDMI collection.
Now from here.
I can still use this one, but I can access the data which element I want, so if I do it with zero.
The zoo is actually look at what's happening here, is going to give me the HTML.
The entire the entire element here, so.
Zero position is the head now.
What about if we want to just going to just going to do it again, I'm just going to comment this one
and I'm just going to see.
Where is the title, so the title is in the position tent, so we can just grab this one.
Facundo.
And if I put the position 10.
So I'm going to grab only the title, so that is so the title is Domme Document Object Model is actually
this guy here, these HTML elements.
Very now we know how to do things.
Now we know how to grab things from the document.
Right.
Using.
This here is very fresh.
Let's see what's happening here.
Here it is.
The title is a little bit show different implementation in inner HTML.
It's the document object model.
So you can use what I'm trying to say.
You can use here, you can use it.
Even the firebox, which I'm not going to use it for this one.
Now, let's go back to the hour thing, so we do have the title.
Now, if you do want to find out the length, which is already show, show to us when I when I print
out the these Dogbert.
Oh.
It's saying that it's forty five, but let's test it out, let's see if it's forty five.
So what we can do this so we can say, OK, let's put it here length.
Another variable.
Yeah, and I mixed up all the times or all of those things in HD.
I don't know why, because it's not probably because it's not my English is my native language right
now.
We're going to say length will be careful to document.
All that length, so that should give me the leg, but here I also want to bring out the oops.
The length, right, because this is Doc, so I'm not going to do that with the docs, I'm going to
print out the letter.
So it's forty five.
Forty five.
So this can change.
Actually, if you have more things here, let's say let's add more things, let's add one more elai
document here, which is that will increase like three or four times.
I mean not three or four.
It will be forty eight, probably forty nine actually right now because I copy some of the parts, if
you include a link here, for example, only one link that's copy this one.
Paste it.
Save it.
So I do have to trash us here, but it's forty seven, right?
That is why because I do have this a track deck and inside I do have a class all if I remove this,
it will be forty six.
Very good.
No, I don't need this because you don't need to trash bins here now.
Very good.
So you know how to get through the length of the elements inside this document.
Very good.
Now, also, you can print a lot of things.
You can grab a lot of things.
And I'm just going to show it to you, so.
This will give you.
The total.
Total number of elements in the document.
OK, now I'm just going to paste whatever I copied before, and what we need to do is I'm going to say,
OK, I'm going to grab the domain and let's see what's happening.
If I grab the domain, I'm just going to refresh.
It's going to say localhost, right.
Because I'm I'm here on a localhost.
That's why it's not going to give me some specific you URL or else I'm going to give me one hundred
the localhost, you know, the euro.
Now also, when we are in euro, this will give you the full full URL.
If you can access it like domain.
You are you are L.
Here it is, HDB.
Localhost, and that will give you the entire thing.
Now we can access even dataset here, Lou.
I do have the chance to UTF eight.
We can even access that one.
We can access a lot of things that we want.
So so what you can do, you can put a dot here and put a chart.
Character said, that's it, refresh and it's going to print out the UTF number eight.
Now, what else also.
You can bring out the DOCTYPE.
So if you want to bring out the DOCTYPE.
Actually, DOCTYPE, and that should give me the idea that here it is, the doctype HTML5 element,
that's pretty much it.
Also what we can do, we can access a lot of things in our in our HDMI.
We do have.
We do have links, right?
We do have this one link here.
A traveling, we do have that one in eight traveling.
We do have the classes, you can have even rides if you want, but I don't have it.
So you can put ideas here so we can access all of those things right now.
Let's test it out.
How we can do accessing.
I'm going to say links here and we can use this one here, the variable that we created, so links it
will equal equal to document.
That links this.
We'll probably return all of the links, let's see what's happening.
Actually, we need to.
We need to print out the links.
Mm hmm.
Let's see it, it's going to give me a collection of five, so there are five links on the position,
zero one, three and four.
This is a and we said, see, if you hover it, it will give you.
Here it is.
It will give you which link where we are accessing.
Now, if I want to access this one, the median reset, I just need to specify the position.
OK, this will return lection.
Of links just going right out now, if you want to specify.
Yeah, if you want to specify specifically, for example, in my case, in a position for this one.
This one.
Between reset, what I hope that it will return, this one here is a trap between reset.
That is what it's giving to us.
And I'm sick of this terrorist and I'm getting there.
But it is what it is now.
Also, you can get for example, you can get only the class name here in the class name.
It's already about.
It's already very easy, so we can use this method called class.
It's a class Lisson class name, difference of class name.
It will give me only that.
This will give me a return link.
And between race and class name, that's a different now I just want to hear when a refresher, I want
to see that it's being reset only.
Here it is.
We said now if you access.
Class list.
Look at what he will return, it will return talk and talk and release, and inside is Dom Tocal is
still on the zero position.
You can access this one, the land, the value.
So there are a lot of things here.
But if you want to access, this will return Dom in the list.
Again, you can access you can find this one.
By doing.
On a position zero, right?
Let's hope that it will give a beating and reset because the zero.
Here is video we set very, you know.
So what else we have it here we can access like.
We have one script here, we can access the scripts if we want, so we can.
I'm not going to show you everything today, but you can access a lot of things that are here.
And that's not the interesting part.
If this is sound too hard for you, don't worry about it.
I'm just going to show you that we can access the forms because I have two forms.
I'm going to show you that we can access some of the things inside the forms and we have done for today
because I don't want to bore you with too many things.
E-mail forms.
So we can access from the top, from the top, from this document, we can access the forms so how we
can do this so let's say forms.
I do have, I think with.
I do have this form here form equal to document.
That forms now this, again, should return at least us the entire forms here and again, it's not showing
anything because we're not printing out the form.
So I'm expecting now after this one and we said to have the form here it is, the collection of two
means that I do have two forms.
This is the first one when we adding the items.
Actually, this is the first form.
And this is for the resetting.
Right.
And there is the the second form.
Now, if you click here again, you can access the number one for.
In the first form, that the first form will actually be this one, let's access that one so you can
go in, traverse to different forms, you can grab those if it is now.
Result.
You're going to be here now.
I'm just going to grab the number one form that will be the last one that we have.
So here it is, form action post.
So if you click, it is going to give you the form.
Also, what you can do is, for example, what we have in the form.
Let's see, we have the method.
You can grab all these things, but I'm just going to grab the method.
I'm going to show you that you can grab individual elements from the form.
Right.
And you can just type method, that's it, nothing else.
And that should give me the post so the method can be posed and get or whatever it is there, but it's
loaded.
So let's see actually what's happening, if I put it here, was going to be the different result.
And we've done four to date.
Right.
I hope you like this one.
So it's going to give you pretty much the same.
But sometimes the representation is different.
And yeah, I just do prefer to use see, I do have even less errors here.
I do prefer to use whichever you want, but the results should be the same.
So I'm sorry, this is too long now you know how to access this document so it will give us the entire
it will give us the option to access a lot of things here on this document.
Right.
And actually, that's why I did print it out.
It's because it's more visible.
So this is the entire one.
And yeah, don't worry about this one.
Just grab it, grab the folder and just.
Yeah, test it out.
Just find out things.
Why not more things on the Internet if you want.
And you can test it out because the idea is not to show you everything here, because in future I will
show you more of these things and you should be able to learn.
And this one is easily you can easily find it somewhere.
Thank you very much.
I hope you enjoyed this one.
And I will see you in the next one.