TypeError: querySelectorAll is not a function in JS [Fixed]

# TypeError: querySelectorAll is not a function in JS [Fixed]

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

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

queryselectorall is not a function

Here is an example of how the error occurs.

index.js

Copied!
const boxes = document.querySelectorAll('.box');
console.log(boxes); // 👉️ [div.box, div.box, div.box]

// ⛔️ TypeError: boxes.querySelectorAll is not a function
const blue = boxes.querySelectorAll('.blue');

We called the document.querySelectorAll method on line 1 successfully.

The querySelectorAll method returns a NodeList, which is an array-like object.

We then tried to call the querySelectorAll method on the NodeList and got the error back.

The querySelectorAll method can only be called on a DOM element or the document object.

Make sure to only call the querySelectorAll method on a valid DOM element or the document object and place your 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 class="box">Box 1</div>
    <div class="box">
      <div class="blue">Box 2</div>
    </div>
    <div class="box">Box 3</div>

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

place js script tag at bottom of body tag

The code for this article is available on GitHub

Notice that the JS script tag is placed after the DOM elements.

Had we placed the script above the code that declares the DOM elements, we wouldn't be able to access them.

Here's the code for the index.js file.

index.js

Copied!
const blue = document.querySelectorAll('.box .blue');
console.log(blue); // 👉️ [div.blue]

only call queryselectorall on valid dom element or document

We called the querySelectorAll method on the document object. You can either call the method on the document object or a valid DOM element.

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

Try to console.log the object you're calling the querySelectorAll method on and see if it is a valid DOM element.

# Check if the element exists before calling `querySelectorAll`

If the element you're calling the method on sometimes doesn't exist, you can conditionally check if the element is there before calling the querySelectorAll 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 querySelectorAll property before calling the method.

index.js

Copied!
const box = null;

if (
  typeof box === 'object' &&
  box !== null &&
  'querySelectorAll' in box
) {
  console.log(box.querySelectorAll('.blue'));
}

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 console.log(typeof null), you would 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 code for this article is available on GitHub

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

Then we know we can safely call the querySelectorAll method on the object.

# Conclusion

To solve the "querySelectorAll is not a function" error, make sure to only call the querySelectorAll method on a valid DOM element or the document object and place your JS script tag at the bottom of the body tag, after the DOM elements have been declared.

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: querySelectorAll is not a function in JS [Fixed]