Failed to execute 'querySelector' on Document in JS [Fixed]

Failed to execute 'querySelector' on Document #

The "Failed to execute 'querySelector' on Document" error occurs when we use the querySelector method with an identifier that starts with a digit.

To solve the error, make sure that the class name or ID you're passing to the querySelector method doesn't start with a digit.

failed to execute queryselector on document

Here's an example of how the error occurs.

index.html

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

  <body>
    <!-- ⛔️ id or class name starting with digit ⛔️ -->
    <div id="1box">Box 1</div>
    <div id="2box">Box 2</div>

    <script  src="index.js"></script>
  </body>
</html>

If we try to use the querySelector method to get the element, we'd get the error.

index.js

Copied!
// ⛔️ Failed to execute 'querySelector' on 'Document'
const first = document.querySelector('#1box');

Identifiers can't start with a digit, two hyphens, or a hyphen followed by a digit.

Pass the entire attribute to the `querySelector` method #

To solve the error, pass the entire attribute to the querySelector method or update the identifier of your DOM element to not start with a digit.

Here's how you can pass the entire attribute to the querySelector method to avoid changing the id of the DOM element.

index.js

Copied!
// ✅ Works
const first = document.querySelector("[id='1box']");
console.log(first); // 👉️ div#1box

Alternatively, you can change the identifier.

Changing the identifier of your element #

However, since you'd likely forget about this quirk, it's better to change your element's identifier to not start with a digit.

index.html

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

  <body>
    <!-- ✅ ID doesn't start with digit ✅ -->
    <div id="box1">Box 1</div>
    <div id="box2">Box 2</div>

    <script type="module" src="index.js"></script>
  </body>
</html>

Now we can use the querySelector method and everything works as expected.

index.js

Copied!
const first = document.querySelector('#box1');
console.log(first); // 👉️ div#box1

Alternatively, you can use the getElementById method, to which you can pass an id that starts with a digit.

index.js

Copied!
const first = document.getElementById('1box');
console.log(first); // 👉️ div#1box

Notice that we don't include the hash # symbol when using the getElementById method.

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.

Failed to execute 'querySelector' on Document in JS [Fixed]