EN
JavaScript - check if HTML element has data attribute
0
points
In this article, we would like to show you how to check if HTML element has data attribute using JavaScript.
Quick solution:
element.hasAttribute('attribute-name');
Practical examples
1. Using hasAttribute() method
In this example, we use hasAttribute() method with the attribute name as an argument to check if the HTML element has the data-attribute.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div id="my-element" data-attribute-name="attribute-value"></div>
<script>
// get element by id
const element = document.querySelector("#my-element");
// check if element has data-attribute
const result = element.hasAttribute('data-attribute-name');
console.log(result); // true
</script>
</body>
</html>
2. Using dataset property
DOM provides dataset property that gives access to data-* attributes collection. The data-* attributes names are converted to pascalCase notation and available in JavaScript API. To check if HTML element has data attribute we try to get its value returning true if the attribute exists and false if not (when the attribute value is undefined).
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div id="my-element" data-attribute-name="attribute-value"></div>
<script>
const element = document.querySelector("#my-element");
const result = element.dataset.attributeName ? true : false;
console.log(result);
</script>
</body>
</html>