How to check if an attribute exists using JavaScript

# Check if an attribute exists using JavaScript

Use the hasAttribute() method to check if an attribute exists.

The hasAttribute method returns true if the provided attribute exists, otherwise, false is returned.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div data-example="box" id="box" title="my box">
      Box content
    </div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
// ✅ checking if an `id` attribute exists on an element
const box = document.getElementById('box');

if (box.hasAttribute('id')) {
  console.log('✅ the id attribute exists');

  console.log(box.getAttribute('id')); // 👉️ "box"
} else {
  console.log('⛔️ the id attribute does NOT exist');
}

// ------------------------------------

// ✅ checking if a data-* attribute exists on an element

console.log(box.hasAttribute('data-example'));

check if attribute exists using javascript

The code for this article is available on GitHub

We used the hasAttribute() method to check if an attribute exists on an element.

index.js

Copied!
const box = document.getElementById('box');

// 👇️ true
console.log(box.hasAttribute('data-example'));

// 👇️ true
console.log(box.hasAttribute('id'));

// 👇️ true
console.log(box.hasAttribute('title'));

// 👇️ false
console.log(box.hasAttribute('ANOTHER'));

The method takes the name of the attribute as a parameter and returns a boolean result:

true if the attribute exists on the element.
false if it doesn't exist.

As shown in the code sample, the hasAttribute() method can also be used to check if a data attribute exists on an element.

You can use the getAttribute() method to get the attribute if it exists.

index.js

Copied!
const box = document.getElementById('box');

if (box.hasAttribute('id')) {
  console.log('✅ the id attribute exists');

  console.log(box.getAttribute('id')); // 👉️ "box"
} else {
  console.log('⛔️ the id attribute does NOT exist');
}

The getAttribute method returns the value of the provided attribute on the element.

# Checking if a data-* attribute exists on an element

The same approach can be used with a data-* attribute.

index.js

Copied!
const box = document.getElementById('box');

if (box.hasAttribute('data-example')) {
  console.log('✅ the data-example attribute exists');

  console.log(box.getAttribute('data-example')); // 👉️ "box"
} else {
  console.log('⛔️ the data-example attribute does NOT exist');
}

check if data attribute exists on an element

The code for this article is available on GitHub

If the element doesn't have the attribute set, the method returns null or an empty string, depending on the browser's implementation.

When using the getAttribute() method to get the value of a data attribute, the whole name of the attribute has to be passed to the method.

# Check if an attribute exists using getAttribute()

You can also use the getAttribute() method to check if an attribute exists.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div data-example="box" id="box" title="my box">
      Box content
    </div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

const attributeValue = box.getAttribute('data-example');
console.log(attributeValue); // 👉️ box

if (attributeValue) {
  console.log('The attribute exists', attributeValue);
} else {
  console.log('The attribute does NOT exist');
}

check if attribute exists using getattribute

The code for this article is available on GitHub

The getAttribute() method returns the value of the specified attribute if it exists.

If the attribute doesn't exist, the method returns null or an empty string depending on the browser's implementation.

We used an if statement to check if the value stored in the variable is truthy.

Once we enter the if block, we can be sure that the attribute exists.

You can also directly access the value of the attribute through the variable.

If the attribute doesn't exist, the variable will store a null or an empty string value, in which case the else block is run.

This approach can also be used with data-* or regular attributes.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to check if an attribute exists using JavaScript

# Check if an attribute exists using JavaScript

# Checking if a data-* attribute exists on an element

# Check if an attribute exists using getAttribute()

# Additional Resources

Borislav Hadzhiev