How to check if an attribute exists using JavaScript

To check if an HTML element has a specific attribute, you can use the hasAttribute() method. This method returns true if the specified attribute exists, otherwise it returns false.

Let us say you have the following HTML element:

<a href="http://example.com" title="Example" data-role="self">Example Page</a>

The following example checks if the title attribute of the anchor element exists:

const anchor = document.querySelector('a');

const isTitle = anchor.hasAttribute('title');

console.log(isTitle); // true

The hasAttribute() method also works for the HTML5 data-* attributes.

The following example demonstrates how you can use the hasAttribute() method to check if the anchor element has the data-role attribute:

const anchor = document.querySelector('a');

const isRole = anchor.hasAttribute('data-role');

console.log(isRole); // true

To check if an HTML element has any attributes, JavaScript provides the hasAttributes() method:

console.log(anchor.hasAttributes()); // true

The hasAttribute() method works in all modern browsers, and IE9 and above.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.