Get elements by class7/1/2023 This will return all 4 divs with the item class. Let items = document.querySelectorAll('.item') First, we’re going to use querySelectorAll to get all the elements with the item class. Now, let’s take a look at some of our queries in action. ![]() You’ll notice this time I’ve been a little creative with my elements, adding both IDs and data attributes to them. Let’s take a look at the the querySelectorAll Javascript method in action. What I mean by that is you can use this method to select an element by class, id, element type, data attribute or a combination of those elements. Overall, however, the querySelectorAll method is more powerful and allows you to grab pretty much any element by pretty much any means imaginable. The difference between the getElementsB圜lassName and querySelectorAll Javascript methods isn’t that much when it comes to getting elements by a class name. Using querySelectorAllĪnother way you can use Javascript to get an element by a class is to use the querySelectorAll Javascript method. Now, let’s take a look at the querySelectorAll Javascript method and see how we can use this to achieve the same results. You can check out the Codepen I used for this demonstration here fork it and have a play around! Now let’s say we altered our elements to add a class for the animals that are still currently on sale or have been sold:Īnd we want to see all the fish that are for sale:Ĭonst saleItems = document.getElementsB圜lassName('item fish sale') Let’s say we wanted to select all the elements that have the item class that also have the fish class.Ĭonst filterItems = document.getElementsB圜lassName('item fish') It’s pretty much the same as before, but each element has a second class – an animal class. So imagine that you have a set of elements with the same class, but you wanted to filter elements out by a second class. Like any array, we can access any of the items directly:įor(let i = 0 i Item 1 Item 2 Item 3 Item 4 Multiple Class Namesīut there’s a little more cool functionality to the getElementsB圜lassName that you might not be aware of: the method accepts multiple class names. We have access to the the length property, so we can count how many elements on the page have the item class: Now, we can access the collections like we would an array: ![]() ![]() HTMLCollection(4) 0: div.itemĪs you can see, this function has collected all of our elements with the item class together and output them into an array. If we were to console log the items variable, we’d get the following output: Here’s how we collect them using getElementsB圜lassName:Ĭonst items = document.getElementsB圜lassName('item') This is the scenario: we have 4 divs with the same class and we want to collect them together to be able to access them. Using get Elements By Class Name Javascript method to get an element by class In this scenario, the getElementsB圜lassName Javascript method is absolutely an acceptable way to do so. ![]() Or you could also use custom Data Attributes and use the querySelector Javascript method to access the element.īut what if you’re dealing with dynamic data? What if you don’t know how many elements there are? What if there could be one element or many elements and you need to anticipate that? If you know there will always be one identifier for one element, then it would be better to use the ID attribute to access the element with the getElementById Javascript method.
0 Comments
Leave a Reply. |