Skip to main content

How to Resolve "TypeError: .getAttribute is not a function" Error in JavaScript

The TypeError: x.getAttribute is not a function is a common error in client-side JavaScript. It occurs when you attempt to call the .getAttribute() method on a value that is not a valid DOM element. This almost always happens for one of three reasons: the variable is null, it holds a collection of elements, or it's a jQuery object.

This guide will walk you through the common causes of this error and show you the correct, modern solutions for each scenario.

The Core Problem: .getAttribute() is a DOM Element Method​

The .getAttribute() method is a function that exists exclusively on individual DOM element objects. It does not exist on plain objects, strings, numbers, null, or collections of elements. When you try to call it on any of these non-element types, JavaScript throws a TypeError.

Example of problem:

// Problem: `myValue` is a plain object, not a DOM element.
let myValue = { id: 1 };

// ⛔️ TypeError: myValue.getAttribute is not a function
myValue.getAttribute('id');

Cause 1 (Most Common): The Variable is null (Element Not Found)​

This happens when your JavaScript code runs before the DOM element it's trying to select has been created by the browser, or when there is a typo in your selector. If a selector like getElementById() or querySelector() doesn't find a matching element, it returns null.

Problem: your <script> tag is in the <head> of your HTML, but the element is in the <body>.

<head>
  <script src="index.js"></script> <!-- Runs too early! -->
</head>
<body>
  <div id="my-box" data-id="123">...</div>
</body>
// index.js
// `myBox` will be `null` because the div hasn't been parsed yet.
let myBox = document.getElementById('my-box');

// ⛔️ TypeError: Cannot read properties of null (reading 'getAttribute')
myBox.getAttribute('data-id');

Solution: ensure your script runs only after the DOM is ready. There are two standard ways to do this:

1. Move the <script> Tag (Simple Solution): Move your <script> tag to the very end of the <body>.

<body>
  <div id="my-box">...</div>
  <!-- ✅ Correct: Script runs after the DOM is ready. -->
  <script src="index.js"></script>
</body>

2. Use the DOMContentLoaded Event (Robust Solution): Wrap your code in an event listener that waits for the DOM to be fully loaded.

document.addEventListener('DOMContentLoaded', () => {
  // ✅ Correct: This code is guaranteed to run only after the DOM is ready.
  let myBox = document.getElementById('my-box');
  console.log(myBox.getAttribute('data-id'));
});

Cause 2: The Variable is a Collection (querySelectorAll)​

Methods like querySelectorAll() or getElementsByClassName() return a collection of elements (a NodeList or HTMLCollection), not a single element. These collection objects do not have a .getAttribute() method.

Example of problem:

// Problem: `boxes` is a NodeList, not a single element.
let boxes = document.querySelectorAll('.box');

// ⛔️ TypeError: boxes.getAttribute is not a function
let data = boxes.getAttribute('data-id');

Solution: you must iterate over the collection and call getAttribute() on each element individually.

let boxes = document.querySelectorAll('.box');

// ✅ Correct: Loop over the NodeList and access each element.
boxes.forEach(box => {
  let dataId = box.getAttribute('data-id');
  console.log(`Box has data-id: ${dataId}`);
});

Cause 3 (for jQuery users): The Variable is a jQuery Object​

If you are using the jQuery library ($), the selector $('#my-id') returns a jQuery object, not a raw DOM element. jQuery objects have their own set of methods, and .getAttribute() is not one of them.

Example of problem:

// Problem: `box` is a jQuery object.
let box = $('#my-box');

// ⛔️ TypeError: box.getAttribute is not a function
let dataId = box.getAttribute('data-id');

Solution: use jQuery's equivalent method, .attr().

// ✅ Correct: Use the jQuery `.attr()` method.
let box = $('#my-box');
let dataId = box.attr('data-id');

Alternatively, you can access the raw DOM element from the jQuery object by using index [0] and then call the native method.

// ✅ Correct: Get the raw DOM element from the jQuery object.
let box = $('#my-box');
let dataId = box[0].getAttribute('data-id');

Conclusion​

The TypeError: .getAttribute is not a function is a clear signal that the variable you are working with is not the individual DOM element you think it is.

To solve it, follow this diagnostic process:

  1. Is your variable a collection? If you used querySelectorAll or getElementsByClassName, you must iterate over the collection and call .getAttribute() on each element inside the loop.
  2. Is your variable null? If so, your script is likely running before the DOM element exists. Move your <script> tag to the end of the <body> or wrap your code in a DOMContentLoaded listener.
  3. Are you using jQuery? If your variable is a jQuery object (created with $()), you must use the jQuery .attr() method instead of .getAttribute().

Table of Contents