Failing to execute ‘querySelector’ on document in JavaScript is a common error you often encounter when working with the method querySelector(). Our explanations below will help you solve this kind of error with causes and solutions.
Why does the error “Failed to execute ‘querySelector’ on document” in JavaScript happen?
querySelector() is a built-in method in JavaScript programming language. This method helps you select an element of a class or element with an id based on the CSS selector. The error failed to execute querySelector on document is raised, implying that this method querySelector() can not find any element that matches the CSS string that you have passed; it might be due to the class name or the id of the element you want to get has started with a digit or contains a special character as long as it is not alphabet character. For instance:
<html>
<body>
<h1 class="2022">Learn Share IT</h1>
<script type="text/javascript">
// Get an element whose class name is 2022
document.querySelector(".2022")
</script>
</body>
</html>Result:
Another example:
<html>
<body>
<h1 id="LearnSh@reIT">Learn Share IT</h1>
<script type="text/javascript">
// Get an element whose id is LearnSh@reIT
document.querySelector("#LearnSh@reIT")
</script>
</body>
</html>Result:
As you can see, the first example wants to get an element whose class name is a number. And as the name starts with a digit hence it will raise the error. In the second example, the id of the element contains a special character (which is @) and therefore you will also encounter the error. If you want to solve the error, please read the following solutions.
How to fix the error “Failed to execute ‘querySelector’ on document” in JavaScript?
Using the entire attributes instead of the CSS selector
You should remember that the id or the name of something, such as a class name, should contain only alphabet characters, and the beginning character shouldn’t be a number. This is one of the most important pieces of knowledge when working with DOM elements in JavaScript. However, if you still don’t want to change the name for better convenience, you can still use the querySelector with these names as long as you put declare the attributes into a pair of the square bracket.
<html>
<body>
<h1 id="LearnSh@reIT">Learn Share IT</h1>
<script type="text/javascript">
// Get an element whose id is LearnSh@reIT
console.log(document.querySelector("[id='LearnSh@reIT']"))
</script>
</body>
</html>Output
<h1 id="LearnSh@reIT">Learn Share IT</h1>Remember that when you use css selector you have to put a hash in the name to get the id, but using this solution, you must remove it because you are using the square brackets to point out the attributes of the element you want to get. You can look at the following example to see how to get an element with a specific class name:
<html>
<body>
<h1 class="2022">Learn Share IT</h1>
<script type="text/javascript">
// Get an element whose class name is 2022
console.log(document.querySelector("[class='2022']"))
</script>
</body>
</html>Result:
<h1 class="2022">Learn Share IT</h1>
Have you found the differences between passing an entire attribute of an element and passing the css string describing the element? When we use the entire attribute, we neglect the ‘.’ (dot), which was used to describe the class name in a CSS string. However, if you find that this solution is hard to understand because you are new to this programming language and CSS selector, please follow the next solution instead.
Using getElementById() or getElementsByClassName()
As we have explained, this error will happen when you use the querySelector to get an element of a class or have an id that contains special characters or preceding digits. However, it can be solved easily when you use the getElementById() method:
<html>
<body>
<h1 id="LearnSh@reIT">Learn Share IT</h1>
<script type="text/javascript">
// Get an element whose id is LearnSh@reIT
console.log(document.getElementById("LearnSh@reIT"))
</script>
</body>
</html>Output
<h1 id="LearnSh@reIT">Learn Share IT</h1>
Here is another example of using getElementsByClassName():
<html>
<body>
<h1 class="2022">Learn Share IT</h1>
<script type="text/javascript">
// Get an element whose class name is 2022
console.log(document.getElementsByClassName("2022"))
</script>
</body>
</html>Result:
HTMLCollection [h1.2022]
Because these two methods are very popular in JavaScript, you can read their syntax and usage here. Don’t forget that the getElementsByClassName returns an array of elements but not an element. These elements in the array are having the same class name as you have given.
Summary
We have discovered many approaches to tackle the JavaScript error “Failed to execute ‘querySelector’ on document” in JavaScript. We suggest you change the class name or the id correctly and use the solutions in this tutorial and you will tackle the problem.
Maybe you are interested:
- TypeError: querySelectorAll is not a function in JS
- “TypeError: Failed to fetch and CORS” in JavaScript
- TypeError: Cannot read property ‘getAttribute’ of Null in JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R
