Get all data-* attributes of a DOM Element using JavaScript

Posted on by Davis Cole
Get all DOM Elements by its Attribute in JavaScript

In this article, you’ll learn how to get all data-* attributes of a DOM Element using JavaScript. We have 2 ways here: JQuery’s selector or the document.querySelectorAll() function. Let’s go into detail now.

How to get all data-* attributes of a DOM Element using JavaScript

For simplicity’s sake, we’ll be using the example of changing the color of any <input> Element to red if they have the "data-importance" attribute, seen here:

Code:

<form>
    <div>Username: <input name="username" type="text" data-importance="1" /></div>
    <div>Password: <input name="password" type="password" data-importance="2" /></div>
    <div>Phonenumber: <input name="phonenumber" type="text" /></div>
    <div>Email: <input name="email" type="email" /></div>
</form>

Using the JQuery Selector

The author wants to emphasize: If you are dealing with HTML DOM Elements in JavaScript, use JQuery.

JQuery is a JavaScript library specialized in the traversal and manipulation of HTML DOM Elements for animations, and event handling, in addition to being able to use Ajax. You can download it here.

The fundamental method used in every JQuery selection is the JQuery Selector ("$()") which takes in a CSS selector, importantly, is able to detect Elements by their attribute and attribute value.

When using a CSS Selector to locate Elements with a specified attribute, the general format looks like this:

"[attr_name]"

Or if you’re looking for Elements with a specified attribute AND value:

"[attr_name=value]"

Taking in all this, the code looks something like this:

Code:

function setImportantToRed() {
    const elements = $("[data-importance]"); // Get all the Elements with the attribute
    elements.css("background-color", "red"); // Set their background to red
}

setImportantToRed();

Output:

Additionally, if you want to check for value as well, you can do something like this:

Code:

function setImportantToRed(value) {
    const elements = $(`[data-importance=${value}]`); // Get all the Elements with the attribute and value
    elements.css("background-color", "red"); // Set their background to red
}

setImportantToRed(1);

Output:

Using the document.querySelectorAll() function (JavaScript)

If you are dead-set on not using JQuery, the Document class’ .querySelectorAll() function (or how you’d generally write it in most situations: document.getSelectorAll()) would be the replacement.

Similarly, the document.getSelectorAll() function also uses a CSS Selector to locate Elements. However, the function only returns a list of those Elements. As a result, by not using JQuery, which lets you interact with all of the Elements in that list without a loop, you will have to iterate over each Element separately to access them.

Code:

function setImportantToRed() {
    const elements = document.querySelectorAll("[data-importance]"); // Get all the Elements with the attribute and value
    for (const element of elements) {
        element.style.backgroundColor = "red"; // Set their background to red
    }
}

setImportantToRed();

Output:

Similarly to the JQuery method, you can also check for the specific value.

Code:

function setImportantToRed(value) {
    const elements = document.querySelectorAll(`[data-importance=${value}]`); // Get all the Elements with the attribute and value
    for (const element of elements) {
        element.style.backgroundColor = "red"; // Set their background to red
    }
}

setImportantToRed(1);

Output:

Summary

To get all data-* attributes of a DOM Element using JavaScript, you should use JQuery’s selector ($()) with an attribute CSS Selector ("[attr]") or use the document.querySelectorAll() function. Let’s try these methods. Good lucks!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *