Let's see how we can use these selectors to select elements in our application.
Perfect.
So we are going to take these methods one after the other and see how we can use it.
Selecting element is the first.
Hey, if you want to become experience or a professional JavaScript developer, we need to know how
to select element.
So this video or this section is really important to understand.
So let's start with how we can use get element by ID to select element.
So back to visual seed code.
As usual, I have a first project so I will provide this to the template for you.
Download it, extract it, and then open using your preferred code editor.
So here for the HTML as before the same semantic.
There is nothing new here.
If you open it, you're going to have something like this.
Again, this section is talking about HTML but instead is about the DOM.
So we are going to use those selectors to select pieces of elements.
So why are we selecting?
Because we want to use JavaScript to interact with these HTML to delete or to add content.
Before we get into the adding and all the events, let us know how we can select first.
So back to my JavaScript, let's start with single selectors.
Single
selectors and the first one is called Get Element by ID first one going to be gate element by ID take
note about capitalisation.
That is it.
So let's see.
As the name implies, this one is used to select element by its ID.
So back to our HTML, any element with an ID is going to select that.
So looking at this syntax here, there is no ID attribute attached to any of these elements.
So any element that you want to select, you need to give it an ID.
So here this ID is going to identify this particular element.
So you can see that this is a title.
So here we have an element with ID equal to title.
So with this one I cannot use JavaScript to select this one.
So back to my JavaScript, here we go to const, then title element and then it's equal to document.
Dot.
Get element by ID and then you pass in the name of the ID or the value which is equal to the title.
Is that so?
If I console.log the title element now let's see the console open up and you we see that I have selected
the one because it has an ID of title.
That's why it has been selected that.
So let's say that I'll provide a value on ID that doesn't exist.
Let's see.
It gives me no meaning.
It doesn't exist.
So you use the get element by ID to select element which has a specific ID that is about the get element
by ID.
Let's say that we have multiple elements with the same ID.
So here let's say for this p tag here or come into line number 19 here, we can also add the same ID
of title.
Let's see which one is going to select here we have two elements with the same ID.
Of title.
So with this one, if I say the file again and check the console, well, let me bring it back to title
again.
Sorry.
So here is a title.
And now let's see if we see that it has selected the first one.
So get element by ID, select the first element that matches the value of the ID.
So apart from that element by ID, we also have query selector well, so query selector.
This one is used to select whether is an ID or is a class.
Thus one cool thing about the query selector is select an element by its CSS selector or by it ID.
So with the same method here or selector, we can use it to select this particular element.
So here is going to be method two.
Here is going to be.
Kerry.
Selector.
This one is used to select element either by class or by ID.
So for this one we see that we have.
Now, let me remove this one.
Let's have only one element.
Okay, it is my ID.
Let's make this one as class.
They say as title as that is an ID and this is a class.
So they are different.
So here with query selector the same thing.
Let me.
Comment.
This one out.
And now here you go.
Const title element is equal to document dot query selector.
Then for this, if it's a class, we are going to use dot so code and then period then the name of the
class name or the class which is title.
So the same if I console.log the title element.
Let's see what we have.
Indeed we have what is coding in because it has a title, a class of title.
So we can also use this method to select element if it is an ID.
Okay, so same thing.
Let's target this one with the ID.
So here we go.
So the same syntax here is going to be tied to here.
So here instead of dots, we are going to use hash tag.
So if I save it now let's console.log the two.
If I save it, it will see that I have selected that.
So this query selector is very powerful than the get element by ID because this one can use to select
element by ID and by class name or by class.
So that is this method under single selectors.
And again, this what we are going to use a lot, a lot and a lot.
So back to multiple selectors.
So for multiple selectors, the first method is called get element by tag name.
Example of tag can be P tag dave, a tag, H1 tag and many other tags.
So this one select all elements with specific tag name.
So back to our HTML, we have 1h1 here, 1h1 here.
We have p tag here and we have h two and we have the UL down here so we can use the multiple selector
to select all of these.
So let's start with multiple selectors comment.
This one out going to be multiple selectors and the first one is called get element by tag name.
First one gets elements C we have A's meaning pure, right meaning are going to get many elements.
So get element by.
Tag name.
That is it.
That's what we have here.
Tag name.
So let's start with counts.
Let's see h once.
So it's equal to document.
Dot gets element by.
Get element by tag name.
So here I would select each one tags.
So let's console.log all the h one tag inside this h one it can be or h once.
So let's see that indeed we have all the h lines has been added into an array.
That is one thing about query, select or multiple selectors is select all element and put it in an
array so we can also select all p tags here.
So here are going to be as P and you're going to be P's tag all P's or P's when you are selecting all
P's in the page.
And now we have two PS on the page.
How is that?
So if I open it, indeed.
We have two P's.
We have the method length.
There are two records in this node list and we call as what, eight collection?
All right.
So now apart from get element by tag, you also have one core get element by class name, meaning that
you're going to select all elements where a certain class name or with a certain class name.
So back to our code.
Now we have this H one work title.
Of class of title here.
You can copy that and add to this h to the same class name.
Let's add the same class to this one and see we now we have three elements with the same class names
so we can use get element by class name, which is this gets elements by class name.
It is as soon as we see plural like gets elements meaning we are going to select a lot of elements.
So I can bring this one here.
Come down here.
Copy this one.
Going to be method to get elements by class name.
So here I'm going to be by class name.
So here we go.
So let me bring this one and down here, let me comment this one out.
So going to be ls or EMC element, it can be anything.
So here are going to be get documents dot gets element by class name and the class theme I want is called
title.
So we are going to be title element or title element.
Let me add A's to show that is plural.
You're going to select multiple elements here so I can go ahead and console.log my titles.
And indeed inside we have a HTML collection and we have the individual element inside my note list or
my array as that.
That is about the get elements by class name.
The next one is gets element by name.
This method is normally used with impute field.
So coming back to our HTML, we see that we have a form with these values.
The input of email.
First one is the text of name and it has ID of name and we have the email and we have the.
So for this one, we can also select pieces of this input field unless we add an attribute of name.
So for this one, let's say first name for this particular input field and for the email to, we can
also add a name attribute and give this one as email so we can use JavaScript to select this input by
name.
So come here.
The next method is what get element by name is it gets element by name.
So going to be get.
Element by name.
So here we go.
So as usual, let's assign the value coms.
Let's say first.
Let's say name element.
Name element is equal to document.
Dot gets element by name, the name you want.
Let's select the email.
So because we have a name of email on line number 44.
So here I can quickly go ahead and console.log the name element.
So check it out.
Indeed, we have the input inside my node list as that so we can look through and get the individual
input field in it.
So that is it about the gate element by name.
The next one is query selector.
Oh, and again, this is a method we are going to use a lot in case you want to select or element with
specific class name all these selectors.
This one is what we are going to use a lot.
Great.
So let's see how we are going to use.
Remember, query selector can be used to select whether it's an ID or a class.
So let's see how we can select that.
So let's see.
Now we have, we have the first element by ID of title and this one we can also add the same ID of title
if we are using the query selector or get element by ID is going to select the first one.
But if you use this method is going to select all element with the same ID or with the same class name.
So for this one, let's select all with the ID, so come back to mind JavaScript here.
So this method here, come down here.
We're going to be.
Query selector or query selector.
Or so.
Here you go.
So let me comment this once and comment this one is out.
So here we go.
Going to be const.
Let me have some.
Let me have some enough room here.
So here we go.
Going to be titled
element is equal to document.
Dot query select to all.
And for this, if it is a class, you are going to use dots and then the class name.
But for ID we are going to use hashtag in the name of the ID.
So here if I console.log the title, so let's save it.
And now if you see that I have two of the elements with the same word, with the same ID, so we can
look through this and display the individual element so we can use title elements here.
Remember, for each now I can pass in my callback function individual elements and now I can console.log
the element in the array and I we see that now I have my element being displayed as that.
So we can also change this one to class.
Likewise this one to class.
So if we don't select all the same syntax by here, we're going to be different.
So here it is a class no more hash tag by instead period.
You can see that we have many elements here because all this element has class name of title.
Now that we know how to select element in this video, let's move further and see after selecting what
are we going to do with it?
And that is what we are going to talk about, how we can change element properties.
So for this one, we can now add some color to the HTML or we can remove some content.
And that is what we are going to talk about in the next video.