Introduction

Getting a data-id attribute in the browser is simple once you know which API you want to use. The two most common choices are element.getAttribute("data-id") and element.dataset.id. They both work, but they behave a little differently and are used in slightly different styles of code.

The core idea is that HTML data-* attributes are meant for custom metadata attached to DOM elements. JavaScript can read them directly without needing a separate hidden input or custom parser.

Read data-id with Plain DOM APIs

If you already have the element, getAttribute() is the most explicit method:

<button id="deleteBtn" data-id="42">Delete</button>

1const button = document.getElementById("deleteBtn");
2const id = button.getAttribute("data-id");
3
4console.log(id);

This always reads the raw attribute string from the DOM. That makes it a good default when you want direct attribute access and do not need any abstraction.

Use dataset for More Natural Property Access

The dataset API maps data-* attributes to JavaScript properties:

const button = document.getElementById("deleteBtn");
console.log(button.dataset.id);

This is often cleaner to read, especially when the code works with several data attributes:

<div id="card" data-id="42" data-status="active"></div>

1const card = document.getElementById("card");
2
3console.log(card.dataset.id);
4console.log(card.dataset.status);

The mapping rule is simple: data-user-id becomes dataset.userId, data-order-status becomes dataset.orderStatus, and so on.

The same API can also write back values:

card.dataset.id = "99";

That updates the DOM attribute as well, which is useful when the page state changes after rendering.

When debugging, this also makes the browser devtools story clearer because you can inspect the updated data-id directly in the rendered HTML.

Read data-id During Event Handling

A very common pattern is reading data-id from the clicked element or one of its ancestors.

<button class="delete-btn" data-id="42">Delete</button>

1document.addEventListener("click", (event) => {
2    const button = event.target.closest(".delete-btn");
3    if (!button) {
4        return;
5    }
6
7    console.log(button.dataset.id);
8});

This is especially useful with dynamic lists where buttons are created after page load. Instead of binding a listener to every button individually, you let one delegated handler read the data-id from whichever element was clicked.

Know the jQuery Difference

If you are working in older codebases, jQuery offers both .attr() and .data():

const id1 = $("#deleteBtn").attr("data-id");
const id2 = $("#deleteBtn").data("id");

These are similar but not identical. .attr() reads the attribute as it appears in the DOM. .data() uses jQuery's data layer, which can cache values and sometimes coerce types. If you want the literal current attribute value, .attr() is usually the safer comparison to the plain DOM APIs.

Common Pitfalls

The biggest mistake is trying to access data-id like a normal property such as element.data-id, which is invalid JavaScript syntax.

Another common issue is forgetting that dataset values are strings. If the data-id represents a number, convert it explicitly before using it in arithmetic or strict comparisons.

It is also easy to read the wrong element in event handlers. event.target may be a child node inside the clickable element, which is why closest() is often the safer choice.

Finally, with jQuery, .data() and .attr() are not always interchangeable once values start changing dynamically.

That difference matters most in older codebases that mix raw DOM and jQuery access.

Summary

• Use getAttribute("data-id") for direct raw attribute access.
• Use dataset.id for concise modern DOM code.
• Use event delegation and closest() when reading data-id from clicked elements.
• Remember that data-* values come back as strings.
• In jQuery code, choose between .attr() and .data() deliberately.