Get elements by class1/28/2024 ![]() ![]() 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? bar").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. JQuery has the Sizzle library built-in and in jQuery, this would be: $("#foo. In Sizzle, this would be be done like this: Sizzle("#foo. If you want just a library to do that, then Sizzle will work great. This is where I recommend using a library that has built-in CSS3 selector support rather than worrying about browser compatibility yourself (let someone else do all the work). That function can be shimmed into place if missing. You can then set the innerHTML of that item to change its contents.Ĭaveats: some older browsers don't support getElementsB圜lassName (e.g.That returns an array-like nodeList, so you reference the first item in that nodeList.You then find the objects that are contained within that object that have class="bar".Or, if you want to do it with with less error checking and more brevity, it can be done in one line like this: document.getElementById("foo").getElementsB圜lassName("bar").innerHTML = "Goodbye world!" You can do it like this: var list = document.getElementById("foo").getElementsB圜lassName("bar")
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |