How to Get Data Attribute Value in JavaScript?

Best practices

Use `element.getAttribute('data-name')` to ensure compatibility with older browsers that may not fully support the `dataset` API.
Prefer `element.dataset.name` for a more concise and readable approach when working with modern browsers that support HTML5.
Use `document.querySelector('[data-name="value"]')` to select elements based on their data attribute values, which is useful for more complex DOM queries.
When dealing with collections of elements, use `document.querySelectorAll('[data-name]')` and iterate with `forEach` to handle each element's data attribute efficiently.

// Select element by ID
var element = document.getElementById('example');
// Get data attribute value using getAttribute
var dataValue = element.getAttribute('data-custom');
console.log(dataValue);

// Using dataset property for modern browsers
var dataValue2 = element.dataset.custom;
console.log(dataValue2);

// Example with querySelector and data attribute
var elementByQuery = document.querySelector('[data-custom="value123"]');
// Access data attribute directly
var dataValue3 = elementByQuery.dataset.custom;
console.log(dataValue3);

// Handling multiple elements with the same data attribute
var elements = document.querySelectorAll('[data-custom]');
elements.forEach(function(el) {
console.log(el.dataset.custom);
});

Common issues

Ensure that the data attribute name in JavaScript is in camelCase when using the `dataset` property, as hyphenated data attributes are converted to camelCase.
Validate the existence of the data attribute before accessing it to avoid `undefined` errors in your JavaScript code.
Remember that `getAttribute` returns the attribute value as a string, so you may need to convert it to another type depending on your needs.
For performance optimization, cache your DOM queries when using methods like `querySelector` or `getElementById` if you need to access the same elements multiple times.

// Incorrect: Accessing hyphenated data attribute incorrectly
var dataValue = element.dataset.data-custom; // SyntaxError

// Correct: Convert hyphenated attributes to camelCase
var dataValue = element.dataset.dataCustom;

// Incorrect: Directly accessing a data attribute that might not exist
console.log(element.dataset.nonexistent); // Outputs undefined, potentially leading to errors later

// Correct: Check if the attribute exists before using it
if ('nonexistent' in element.dataset) {
console.log(element.dataset.nonexistent);
} else {
console.log('Attribute does not exist');
}

// Incorrect: Assuming getAttribute returns a number
var age = element.getAttribute('data-age'); // age is a string, not a number
console.log(age + 5); // Concatenates string with number, e.g., "255"

// Correct: Convert the string to a number when necessary
var age = parseInt(element.getAttribute('data-age'), 10);
console.log(age + 5); // Correctly adds numbers, e.g., 30

// Inefficient: Re-querying the DOM multiple times
for (let i = 0; i < 5; i++) {
var element = document.getElementById('repeatedId');
console.log(element.dataset.value);
}

// Efficient: Cache the DOM query
var element = document.getElementById('repeatedId');
for (let i = 0; i < 5; i++) {
console.log(element.dataset.value);
}