Data Attributes on HTML Elements

What are Data Attributes?

Storing additional data in the DOM can sometimes feel like trying to pack your suitcase with too many compartments. Using separate id and class attributes for each piece of data gets messy and hard to manage. Fortunately, HTML provides a better solution: data attributes.

Data attributes allow you to store custom data directly on HTML elements. This can make your code cleaner, more flexible, and easier to maintain.

Setting Data Attributes

You can use the data-* attribute to store custom data on an HTML element. Let’s explore an example where we store information about different dogs in a <ul> list.


    <!DOCTYPE html>
    <html>
    <body>
        <ul id="dogs"></ul>
    </body>
    </html>


// Define a list of dogs
const DOGS = {
    101: { id: 101, name: "Sable", genus: "Husky Huskius" },
    234: { id: 234, name: "Blixa", genus: "Corgi Corgiorum" }
};

// Populate the dog list
const dogUl = document.getElementById("dogs");
Object.keys(DOGS).forEach(id => {
    const dog = DOGS[id];

    const dogLi = document.createElement("li");
    dogLi.innerText = `${dog.name} -- ${dog.genus}`;

    // Add a data-id attribute to store the dog's ID
    dogLi.setAttribute("data-id", dog.id);

    dogUl.append(dogLi);
});

In this example, each <li> element gets a data-id attribute that stores the dog's ID. This makes it easy to associate data with the DOM element.

Reading Data Attributes

Accessing the data stored in a data-* attribute is simple. All data attributes are accessible via the Element.dataset property, which is an object containing all the data attributes on the element.

For example, consider the code below, which adds an event listener to each list item to alert the dog's ID:


const dogUl = document.getElementById("dogs");
Object.keys(DOGS).forEach(id => {
    const dog = DOGS[id];

    const dogLi = document.createElement("li");
    dogLi.innerText = `${dog.name} -- ${dog.genus}`;

    // Add a data-id attribute
    dogLi.setAttribute("data-id", dog.id);

    // Add a click event listener to display the dog's ID
    dogLi.addEventListener("click", e => {
        const dogElement = e.target;
        alert(`Dog #${dogElement.dataset.id} loves you!`);
    });

    dogUl.append(dogLi);
});

The dataset object converts keys in data-* attributes to camelCase. For example:

data-id becomes dataset.id.
data-user-id becomes dataset.userId.

Deleting Data Attributes

If you need to remove a data attribute, you can use the delete operator. Here’s an example:


// Select the element with data-id="101"
const sable = document.querySelector('li[data-id="101"]');

// Delete the data-id attribute
delete sable.dataset.id;

After deleting the data attribute, it will no longer appear in the DOM or be accessible via the dataset object.

Real-World Applications

Data attributes are incredibly versatile and can be used for:

Storing IDs or metadata for elements, such as user IDs or product details.
Passing dynamic data to event handlers.
Creating custom attributes for JavaScript frameworks.
Building interactive UI elements like modals or tooltips.

For example, you could use data attributes to store product prices in an e-commerce app:


    <ul id="product-list">
        <li data-price="19.99">Product 1</li>
        <li data-price="29.99">Product 2</li>
    </ul>


document.getElementById("product-list").addEventListener("click", e => {
    if (e.target.tagName === "LI") {
        alert(`This product costs $${e.target.dataset.price}`);
    }
});

Key Takeaways

Data attributes provide a clean way to store custom data in HTML elements.
Use setAttribute to add data attributes and dataset to access them.
Data attributes are converted to camelCase in the dataset object.
Remove data attributes using the delete operator.

With data attributes, you can create more dynamic and interactive web pages while keeping your code maintainable and efficient.