TypeError: getAttribute is not a function in JavaScript

# TypeError: getAttribute is not a function in JavaScript

The "TypeError: getAttribute is not a function" error occurs for multiple reasons:

Calling the getAttribute method on a jQuery object instead of a DOM element.
Calling the method on an object that is not a valid DOM element.
Misspelling getAttribute (it's case-sensitive).
Placing the JS script tag above the code that declares the DOM elements.

getattribute is not a function

If you use jQuery, use the .attr method instead because a jQuery object doesn't expose a getAttribute method.

index.js

Copied!
// ✅ use `attr` instead of `getAttribute`
const result = $('#box').attr('your-attribute');
console.log(result);

Here is an example of how the error occurs.

index.js

Copied!
const obj = {};

// ⛔️ Uncaught TypeError: obj.getAttribute is not a function
obj.getAttribute('data-test');

Calling the getAttribute method on an object that is not a valid DOM element causes the error.

# Only call `getAttribute` on valid DOM elements

Make sure to call the getAttribute() method on a valid DOM element and place the JS script tag at the bottom of the body tag, after the DOM elements have been declared.

index.html

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

  <body>
    <div id="box" data-test="example">Box</div>

    <!-- ✅ load jQuery ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

Notice that the JS script tag must be placed at the bottom of the body, after the DOM elements. Otherwise, we end up running the index.js file before the DOM elements are created.

Here is the code for the index.js file.

index.js

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

// 👇️ "example"
console.log(box.getAttribute('data-test'));

calling getattribute on valid dom element

The code for this article is available on GitHub

Note that the getAttribute() method should only be called on valid DOM elements.

If the error persists, make sure you haven't misspelled getAttribute() as it is case-sensitive.

You can also console.log the value you're calling the getAttribute method on and check if it's a valid DOM element.

# Check if the element exists before calling `getAttribute`

If the element you're calling the method on sometimes doesn't exist, conditionally check if the element is there before calling the getAttribute() method.

For example, a basic DOM element has a type of object, so we can check if the value is an object and contains the getAttribute() property before calling the method.

index.js

Copied!
const box = null;

if (
  typeof box === 'object' &&
  box !== null &&
  'getAttribute' in box
) {
  console.log(box.getAttribute('data-test'));
}

The code for this article is available on GitHub

Our if condition uses the logical AND (&&) operator, so for the if block to run, all conditions have to be met.

We first check if the box variable stores a value with a type of object, because DOM elements have a type of object.

Then we check if the variable is not equal to null. Unfortunately, if you check the type of null with console.log(typeof null), you will get an "object" value back, so we have to make sure the value is not null.

index.js

Copied!
console.log(typeof null); // 👉️ object

The last thing we check for is that the object contains the getAttribute property.

Then we know we can safely call the getAttribute() method on the object.

This approach is called duck-typing.

When using duck-typing, we simply check if the object implements specific properties or methods and if it does, we assume it's an object of the correct type.

# Conclusion

To solve the "getAttribute is not a function" error, make sure to call the getAttribute() method on a valid DOM element and place the JS script tag at the bottom of the body tag, after the DOM elements have been declared.

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

TypeError: getAttribute is not a function in JavaScript