Hey, everyone, in this video, we are going to learn how to use the dumb to work with our age to amale
elements, so to do anything with any ASTM al element.
First, we need to find them in the DOM tree and select them.
So to select elements, we can do it by their class name, by I.D., by tag, name like age one, P.
and etc. and more.
Well, let's start with the I.D., which is the easiest way of doing it.
So I've placed an element in the H team out of this file and it has the I.D. of Blue Box.
If you want to check it out, you can just go to Visual Studio code or you can just use the inspectors.
So.
Right, click inspect.
Here it is.
You can see that this is the element with the I.D. of Blue Box.
So going back to the console, let's try to get the text inside this element and send it to the console.
And let's also try to change its content.
One cool thing is that we don't need to go back and forth to Visual Studio Code any time we want to
test something because we can do it directly from the console.
If you're just testing some comments, if you're just writing them for the first time, you can do it
here.
Then when you understand how they work, you can go to your JavaScript file and write them.
Let's remember that nothing that we write here is going to be saved.
So this is just for testing purposes.
All right.
So to select this element.
The first thing we need to use is the document object.
So, again, be careful because JavaScript is case sensitive.
The document object is written like this.
Vol ladders in lowercase.
So document is that object at the top of the gum.
So inside it, we have a few methods that we can use.
Don't worry about understanding this now about methods, because when we talk about objects, then this
is going to be clear for now.
Just know that to run methods we need to use the DOT.
So document that.
Now the name of the method we are trying to use is get element by I.D. So you can see that Google Chrome
is helping us out here.
You can just press tab to auto complete it.
And now again, we just open and close parentheses so you can see that this is a common pattern in JavaScript.
Let me just enlarge this a little bit.
So now inside parentheses and inside quotation marks, we need to pass the I.D. of the element that
we are trying to select.
So the idea is blue box.
Actually, we have an underscore like this.
Be careful with these letters in caps.
So element by I.D., they all start with caps.
The get is all lowercase.
Now that we've selected this element, let's try to get its content using a property called inner.
So all lower case in our age, team out all uppercase.
If we do this and hit enter.
So, as you can see, the text inside this box was returned to us when we ran this comment.
So we selected this element and then we got its inner age CML.
So now that we know how to get the content of an aged male element, it's also useful to know how do
we change content of an age CML element?
So this is going to be really similar.
We can just copy all this, but now, instead of just getting it, we can use the equals sign and define
something that we go inside it.
So let me open and close quotation marks again.
Don't worry about all these parentheses dots quotation marks when we start talking about data types.
In the next few lessons, this is going to be very, very clear.
So for now, just follow along.
Let's try to change the content of this element.
So let's ride something like test, and now when we hit enter, we can see that we just changed the
content of this element using JavaScript.
And we don't have to send just pieces of text.
We can also send other aged e-mail elements inside it.
So if we instead of just sending text, we sent something like this.
So age one in here, closing the age one.
Now let's try again.
And now we can see that we have an age one inside it.
So now that we know how to do this, let's just copy this comment controversy.
Now let's refresh the page.
So, as you can see, nothing we write here is saved.
The page is back to normal.
Now, let's go back to our file.
So let's get the text inside this box.
Send it to the console.
And let's also change the content.
So go into the scripts file.
Actually, I'm going to leave this comment here.
Something that I like doing is adding comments to know which lesson we are at.
So we are at lesson for.
Working with the domme so you can organize this the way you think it's better for you.
I just like doing this.
So now let's try to run this comment from our file.
We can also comment this will shift out a just so it's not executed every time in the console.
So now the first thing we want to do with the content of that box is just sending it to the console.
That was the first thing that was asked.
So console dot log.
Now inside here, instead of writing a text, we're going to write this full comment.
Let's see what happens.
Saving this.
Refreshing the page.
We are able to send to the council the content of that element.
So now let's try to change it.
So after getting it and send it to the council now, we're going to change it.
So let's erase this now.
Use the equal sign, an inside quotation marks.
Let's try sending.
Can age one again.
Like this.
Testing.
And now, just out of curiosity, let's run this comment again.
At the end and let's see what happens.
So first, it just got the original content and sent it to the console.
Then it changed the content inside it.
And now we just got the content again and we are sending into the console.
So this seems like a silly example, but this is just a starting point to understand how to work with
elements and their content.
And like I said, what is the use of sending all the stuff to the console?
Well, this is just for testing purposes by using the console.
We can see that this is working.
So now we can start applying this on other situations.
So before going to crazy and start changing all the age CML elements of our page, there are some basic
fundamentals of JavaScript that we need to learn before we move it.
So if you go to the index, you can see that we are going to talk about variables and data types before
we do our first list of exercises.
So this is going to be easy.
But this is super important so we know what we are doing when we are working with JavaScript.
So I'll see you in the next video so we can get started.