- HowTo
- JavaScript Howtos
- Get Element by Attribute in JavaScript
Created: October-10, 2021
- Use the querySelectorAll() Function to Get an Element by Its Attribute in JavaScript
- Use the jQuery Library to Get an Element by Its Attribute in JavaScript
This tutorial will demonstrate how to get an element by its attribute in JavaScript.
Use the querySelectorAll() Function to Get an Element by Its Attribute in JavaScript
The Document.querySelectorAll(selector) method returns a list of the document elements that match the specified selectors. We can specify the attribute in the selectors.
Check the example below.
document.querySelectorAll("[myAttribute=value]");The above example has an attribute selector, where the attribute value is defined, myAttribute=value.
This function is supported with most modern browsers.
Use the jQuery Library to Get an Element by Its Attribute in JavaScript
jQuery is a fast, robust JavaScript library. We can select elements by their attribute using the jQuery element selector $.
For example,
This method is valid with obsolete browsers also that support the jQuery library.
Related Article - JavaScript Attribute
What I love so much about JavaScript is that the language is incredibly dynamic. So dynamic that you can modify native objects if you so choose. One dynamic property I've frequently been using lately is the attributes property of DOM elements. This attributes property provides me the names and values of every attribute on a given element! Let's assume we're working with the
following element: A simple DIV with a few frequently used attributes. We can use getAttribute() to get attributes when we know they're there, but how do we simply get an object containing all attributes? DOM elements have an attributes property which contains all attribute names and values: Using Array.prototype.slice.call, which is also helpful in converting NodeLists to Arrays, you can
convert the result to a true array which you can iterate over: The attributes property of an element is incredibly handy when you're looking to see what attributes are present without explicitly knowing which to look for; the attributes property provides an awesome level of dynamism. Until I found the need to grab every attribute from an element, I wasn't aware that such a list existed. Now that I'm aware of the this property, however, I'm trying to think up ways to abuse
the information provided to empower elements even more. If you've ever found a useful use of the attributes property, please share it!The HTML
The JavaScript
Recent Features
Vibration API
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...
Incredible Demos
Translate Content with the Google Translate API and JavaScript
Note: For this tutorial, I'm using version1 of the Google Translate API. A newer REST-based version is available. In an ideal world, all websites would have a feature that allowed the user to translate a website into their native language (or even more ideally, translation would be...
Facebook Open Graph META Tags
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...