[Edit]

JavaScript - check if HTML element has data attribute

1 contributors

2 contributions

0 discussions

0 points

Created by:

Zoya-Gaines

653

In this article, we would like to show you how to check if HTML element has data attribute using JavaScript.

Quick solution:

xxxxxxxxxx
 
element.hasAttribute('attribute-name');

Practical examples

Edit

1. Using `hasAttribute()` method

Edit

In this example, we use hasAttribute() method with the attribute name as an argument to check if the HTML element has the data-attribute.

xxxxxxxxxx
 
<!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>

Auto running

2. Using `dataset` property

Edit

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).

xxxxxxxxxx
 
<!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>