Last Updated : 28 Jul, 2025
The querySelector() method returns the first element that matches the specified Selector. It only gives one element from the HTML DOM if found else it returns null. To get all the matching elements, you can use the querySelectorAll() method.
// To search in complete documemt
ducument.querySelector(selectors);// To search inside a specific element
element.querySelector("html-tag .class-name #element-id...");
selectors: It is a string containing the CSS Selectors.
Return value: The first element that matches the selectors if found else null.
HTML
<!DOCTYPE html>
<html>
<body style="text-align: center">
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
// Select the first p element
let e = document.querySelector("p");
// Dynamically apply styling
// to the first p element
e.style.backgroundColor = "Green";
e.style.color = "white";
}
</script>
</body>
</html>
Output:
HTML DOM querySelector Method ExampleRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4