The querySelector() method is a common method that helps you interact with the HTML node. There are many ways to use the querySelector() method, like working with the class name or the id name. So how to use the querySelector() method in TypeScript? Let’s go into detail now.
Let’s learn how to use the querySelector() method in TypeScript
The querySelector() method will return the first element that matches the specified selector or return null if no matches are found.
Syntax:
querySelector(selectors)
Parameters:
- selectors: A string that specifies the selectors to match.
Working with querySelector with element name
Example:
<body>
<h1>Typescript</h1>
</body>const h1Ele = document.querySelector('h1')
console.log(h1Ele)Output:
<h1>Typescript</h1>This is how you get element by element name.
Working with querySelector with class name
<body>
<h1 class="text">Typescript</h1>
</body>const h1Ele = document.querySelector('.text')
console.log(h1Ele)This is how you get the element through class attribute.
Working with querySelector with id name
<body>
<h1 id="text">Typescript</h1>
</body>const h1Ele = document.querySelector('#text')
console.log(h1Ele)Output:
<h1 id="text">Typescript</h1>This is how you get an element through the id name.
Those are some common ways to use the querySelector method to get elements in Typescript. Beside these ways, there are some more advanced ways to do it. You can find out later.
If no selectors match, the null will be returned.
Example:
<body>
<h1 class="text">Typescript</h1>
</body>const h1Ele = document.querySelector('.text1')
console.log(h1Ele)Output:
nullHere I wrote the wrong name text1 instead of text of class attribute, so not any elements will be found, and null will be returned. And you can also make a mistake like me in real life, and if it happens, it can lead to some very serious error.
A common error with querySelector method
Example:
<body>
<h1 class="text">Typescript</h1>
</body>const h1Ele = document.querySelector('.text1')
console.log(h1Ele)
h1Ele.textContent = 'Hello World'The error:
Uncaught TypeError: Cannot set properties of null (setting 'textContent')
at index.js:3:19Here the error happens because no element is selected, and we cannot set the textContent attribute with a null value.
To prevent this kind of error, you can create a type guard to check if the element can be found. Only after the code logic is executed, you can do this.
Example:
<body>
<h1 class="text">Typescript</h1>
</body>const h1Ele = document.querySelector('.text1')
// Type guard with if/else statement
if (h1Ele) {
h1Ele.textContent = 'Hello World'
}
else {
console.log('Not valid element')
}Here as you see with the if/else statement, I create a type guard to check if querySelector gets the element successful. Then, I will execute the code logic if no an error message will be log.
Output:
Here is the result when I cannot find the element:
Not valid elementHere is the result when the element exists:
Summary
In this tutorial, I showed you some common and easy ways to help you learn about how to use the querySelector() method in TypeScript. About me, I usually get elements through the class name. It is a simple way. Hope that is helpful to you.
Maybe you are interested:
- Property ‘click’ does not exist on type ‘Element’ in TypeScript
- Set CSS styles on an Element using TypeScript
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm