Solve - querySelectorAll is not a function Error in JS

avatar

Borislav Hadzhiev

Wed Oct 20 20212 min read

banner

Photo by Grant Ritchie

Solve - querySelectorAll is not a function #

The "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
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 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.

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.

index.html
<!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>

Notice that the JS script tag is placed after the DOM elements. Had we ran the script before the DOM elements are declared, we wouldn't be able to access them.

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

index.js
const blue = document.querySelectorAll('.box .blue'); console.log(blue); // ๐Ÿ‘‰๏ธ [div.blue]

We called the querySelectorAll 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 if it a valid DOM element.

If the element you're calling the method on sometimes does not exist, you can conditionally check if the element is there before calling the querySelectorAll method on it.

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
const box = null; if (typeof box === 'object' && box !== null && 'querySelectorAll' in box) { console.log(box.querySelectorAll('.blue')); }

Our if condition uses the logical AND (&&) operator, so for the if block to run, all of the 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 - console.log(typeof null), you will get an "object" value back, so we have to make sure the value is not null.

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.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee