Last Updated on March 17, 2022 by
In this JavaScript write up I will show you how we can grab elements by class or tag name alright. I will put forward two different ways we can say the first way is going to be querying is based on the element by class name and the second way is to be based on the element by class ID.
Table of Contents
Explanation of elements of class by Name with example
Let’s do the class way first of all so over in the elements tab you will see in the header you have this h1 and it has a class of title now because you can use the same class multiple times on a web page. you also have a hate 2 down with a class of title as well so say for example you want to reach into this web page and bring back every element with a class of title so you are not just querying for one element but you are querying it for several elements you want to hate email collection back well.
You can do that using a method called get elements by class name and it sits on the document object again so if the document gets elements by class name and all we need to do is passing the class name which is going to be title so if you store this in a variable so you can have access to it later you will call these titles to click enter and then type out titles you can see that you get back this thing which looks very much like an array but be careful because it’s not an array then you expand this and you can clearly see that this is actually a hate email collection and in some ways, this behaves like an array but in some ways, it’s different from at a rope so one way that it’s similar is that we can access elements from this collection using the array square bracket notation.
For example, if you wanted to reach in and grab the first element you could say titles then use the square bracket notation 0 for the first element and remember java script is zero-based indexing so if you click enter now you can see these first elements returnable likewise if you put in a one you can see the second one is returned to us. So that’s the first method I want to show you how to retrieve a collection of elements by class name.
Basics of Element class Id with simple example
This selector is utilized for choosing an HTML component dependent on the id esteem let’s start with element by class ID so you’re going to use IDs whenever you have an element on the page that appears once or is the only one performing that certain function so IDs are used when you have a single element a unique element.
For example, I’ve got an HTML document in the browser. We have a single title for this page so in the actual code, you can use an 82 tag with an ID of the title when you read this you will expect that there should be only one title on this page and you also go with the CSS if you target the title ID once again you expect this to be the only title on the actual page so these are used for a single unique element. This is in contrast to classes you’re going to use when you have multiple elements that serve the same purpose or that look the same.
Concluding remarks
This article is especially for the beginners to clear their fundamental concepts about element’s based on name or id. It is a short paper piece so it’s troublesome for me to cover all aspects in depth but I tried my best to create a balanced content for my reader. Still, if you feel any trouble you can consult with us.
