A Deeper Dive Into Data Attributes

In my first post on attributes, we looked at the difference between attributes and props. This time we'll dive deeper into data attributes. Learn how to leverage the JavaScript dataset API for dynamic data management in the DOM. Explore performance benefits, event delegation, MutationObserver, and best practices for using data attributes efficiently.

Backstory - How the DOM Creates Attributes and Props

Feel free to skip to the next section if you don't need the backstory..

The last time I went over attributes and props, we discussed how HTML attributes are static and JS properties are dynamic. The HTML elements in the document include attributes, and when the browser renders this document, it creates a Document Object Model (DOM). The DOM, to put it clearly, is a Model of the HTML Document represented as a Javascript Object.

Let's look under the hood. If you type window.document.all in your console, you'll see an array-like collection of objects representing all of the elements in your HTML document. Eventually, you'll get to an element like an anchor tag <a> or a <button> tag. Let's use an anchor tag as an example. If you open the anchor tag object, you'll see some familiar properties and methods: things like onclick, ARIA labels, and properties like id and href. But if you keep searching, you'll also see a property called attributes.

If you open up that object, you'll actually see an href property with the same value you set in the document. So why are there two? The properties you see on the element object are mapped from attributes when the browser loads the page. However, if you select that anchor tag in the console and change its .href property to, say, https://google.com, and inspect the DOM again, you'll notice something interesting: the href attribute has not changed, but the href property has.

Hopefully, by now, you see how attributes and properties are not the same, and why some are available as properties of the element object while others are not. Now, if you look at this element object again, you might notice another property called dataset.

What is dataset?

Some attributes map directly to element properties, like id and href. But what about custom attributes? This is where dataset comes in. The dataset API allows you to access custom data-* attributes as JavaScript properties.

Example: If you add data-price="2.00" to an element, JavaScript provides easy access to it via element.dataset.price. Als notice how it automatically converts kebab-case (data-is-open) to camelCase (dataset.isOpen).

Leveraging dataset for Dynamic Data Management

1. Why Use dataset Instead of Attributes?

The dataset API is often more efficient than getAttribute() and setAttribute(), especially when working with custom metadata in JavaScript.

Key Benefits:

  • Faster Access: element.dataset.key is more efficient than getAttribute("data-key").
  • Cleaner Code: Allows easy interaction with custom data without cluttering the HTML.
  • Avoids Unnecessary Reflows: Updating dataset does not trigger style recalculations unless the data attribute is used in CSS.

2. Optimizing Performance: dataset vs. classList

If you use data-* attributes in CSS, modifying them in JavaScript may cause reflows: 

[data-theme="dark"] {
  background-color: black;
  color: white;
}
<body data-theme="light"></body>
<script>
  document.body.dataset.theme = "dark"; // ⚠️ Triggers a repaint & possible reflow
</script>

Best practice: If data-* is used for state but it affects styling, consider using classList.toggle(): 

document.body.classList.toggle("dark-theme"); // More efficient

3. Practical Use Cases for dataset

a) Storing Stateful Data in UI Elements

Instead of managing a separate JavaScript object, store state directly in the HTML:

<button id="likeBtn" data-liked="false">Like</button>

<script>
  const btn = document.getElementById("likeBtn");

  btn.addEventListener("click", () => {
    const isLiked = btn.dataset.liked === "true";
    btn.dataset.liked = !isLiked;
    btn.textContent = isLiked ? "Like" : "Unlike";
  });
</script>

b) Using dataset for Event Delegation

Instead of attaching separate event listeners to each button, delegate events using dataset:

<ul id="taskList">
  <li data-task-id="1">Task 1 <button data-action="delete">X</button></li>
  <li data-task-id="2">Task 2 <button data-action="delete">X</button></li>
</ul>

<script>
  document.getElementById("taskList").addEventListener("click", (e) => {
    if (e.target.dataset.action === "delete") {
      const taskId = e.target.closest("li").dataset.taskId;
      console.log(`Deleting Task ${taskId}`);
      e.target.closest("li").remove();
    }
  });
</script>

This reduces event listeners and improves performance.

4. Watching dataset Changes with MutationObserver

If multiple scripts modify dataset, you can observe changes dynamically:

<div id="user" data-status="offline">User Status</div>

<script>
  const userDiv = document.getElementById("user");

  const observer = new MutationObserver(() => {
    console.log(`User status changed to: ${userDiv.dataset.status}`);
  });

  observer.observe(userDiv, {
    attributes: true,
    attributeFilter: ["data-status"],
  });

  // Simulating a status change
  setTimeout(() => {
    userDiv.dataset.status = "online";
  }, 2000);
</script>

This is useful for real-time applications that rely on dataset changes.

TL;DR

  • Use dataset for JavaScript state instead of modifying attributes.
  • Avoid using data-* for styling to prevent unnecessary reflows.
  • Use classList.toggle() when styling changes are required.
  • Event delegation is more efficient with dataset.
  • MutationObserver helps watch for data-* changes dynamically.

By understanding how dataset works, you can efficiently manage dynamic metadata and improve performance while keeping your JavaScript code clean.