Last updated: Mar 3, 2024
Reading time·3 min
The "TypeError: getAttribute is not a function" error occurs for multiple reasons:
getAttribute
method on a jQuery object instead of a DOM element.getAttribute
(it's case-sensitive).If you use jQuery, use the .attr
method instead because a jQuery object
doesn't expose a getAttribute
method.
// ✅ use `attr` instead of `getAttribute` const result = $('#box').attr('your-attribute'); console.log(result);
Here is an example of how the error occurs.
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.
getAttribute
on valid DOM elementsMake 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.
<!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>
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.
const box = document.getElementById('box'); // 👇️ "example" console.log(box.getAttribute('data-test'));
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.
console.log
the value you're calling the getAttribute
method on and check if it's a valid DOM element.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.
const box = null; if ( typeof box === 'object' && box !== null && 'getAttribute' in box ) { console.log(box.getAttribute('data-test')); }
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
.
console.log(typeof null); // 👉️ object
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.
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.
You can learn more about the related topics by checking out the following tutorials: