Failed to execute querySelector on Document [Solved]

# 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

You might also get the error named as "Uncaught DOMException: Document.querySelector: '#XYZ' is not a valid selector" in Firefox.

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!
// ⛔️ Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#1box' is not a valid selector.

// ⛔️ Uncaught DOMException: Document.querySelector: '#XYZ' is not a valid selector
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

The code for this article is available on GitHub

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>

The code for this article is available on GitHub

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

change identifier of your element

Alternatively, you can use the document.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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

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 [Solved]