Here,
everyone, welcome to another video now we're going to talk about more aget element methods.
So up to this point, we only use the jet element by I.D. to select element.
So now let's explore a few other methods.
So there's one Kalighat element by class name.
So here in this page, if I use the inspector, we can see that I've just created three diffs.
We have a class of example.
So let's go to visuals, to the code.
And now I'm just going to create a variable called.
Aliments.
And now I'm just going to use document and instead of using get element by I.D., you can see that when
we use the DOT we have all these options.
So let's just try get elements by class name.
And inside parentheses, we can try the class of example.
Now, let's do cancel the log and let's see what JavaScript is going to return after we execute this.
So let's.
Do you cancel that log aliments?
So refreshing the page.
Let's go to the council and as you can see, we are getting an array.
So we have three elements in return.
We have a length of three so we can access each of these elements with their indexes.
So now we can do something like Element, which is our variable, and then we can just select an index,
we know that this variable has three elements.
So if we try elements with an index of zero, we can see that JavaScript is selecting this element for
us.
If we try one, we can see the second being highlighted, too.
We can see the third being highlighted.
So let's just select the first element.
So by doing this, it's just the same thing that we were doing before selecting elements and now we
can just do inner.
Age TML.
And now let's just redefine the inner age, the amount of this element, so I'm just going to ride changing.
The texts.
Of the first.
Element.
If I do this and press enter, we can see that we were able to change the text of the first element.
So we've just use the get elements by class name methods and we got an array in return.
So now we know how to work with a race with just use the index notation to do something with it.
So this is why I told you it was really important to understand the data types and know how to work
with them so we could proceed.
Now we have a few more examples so we can do the same thing with get elements by tag name.
So in this case, I have three paragraphs.
So let's go back to Visual Studio Code and.
Let me just comment this.
And now, instead of getting elements by class name, I'm just going to get elements using the tag name.
So get elements by tag name, just be careful, because when we were working with the get element buy
I.D., this wasn't in plural.
So we had that element by I.D. And now we have got elements like last name gas elements by tag name.
Just pay attention to this so you don't get an error.
So get elements by tag name.
And now let's just get all the P elements of our page.
And now let's just do cancel that log.
Let me save this.
And let me see what happens.
So now I have nine elements, because actually every element that I'm using to write content.
So this one is a.
This is another P.
Another P.
So, as you can see, we have nine paragraphs on our page and we were able to select all of them using
the get elements by tag name method.
So now we know that if we want to change this first paragraph, we can just use index zero.
But what do we do if we want to change all the elements of our page?
So we want to change all the paragraphs.
Maybe we want to change the success or we want to do something else with these elements.
How can we do this?
Well, this is where loops are going to come handy.
So this is the subject of our next lesson.
I'll see you then.