JavaScript querySelector
last modified April 2, 2025
In this article, we explore the element.querySelector method in
JavaScript. This powerful method allows developers to find elements using CSS
selectors, providing flexible DOM element selection capabilities.
Basic Definition
The querySelector method returns the first element that matches a
specified CSS selector within the document or element it's called on. It's part
of modern DOM APIs and works on all modern browsers.
Unlike getElementById, querySelector can find elements
using any CSS selector, including classes, attributes, pseudo-classes, and
complex selector combinations. It returns null if no matches are found.
Basic querySelector
This example demonstrates how to select an element by its class using querySelector.
<!DOCTYPE html>
<html>
<head>
<title>Basic querySelector</title>
</head>
<body>
<div class="content">Hello there!</div>
<script>
const element = document.querySelector('.content');
console.log(element.textContent);
</script>
</body>
</html>
In this basic example, we select a div element with the class "content" using the CSS class selector syntax (.). The method returns the first matching element which we then log to the console.
This demonstrates the fundamental usage of querySelector with class
selectors. The method is versatile and can be called on any element or document.
Selecting Nested Elements
This example shows how to use querySelector to find nested elements in the DOM.
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements</title>
</head>
<body>
<div id="container">
<p class="message">This is a message inside the container</p>
</div>
<script>
const container = document.querySelector('#container');
const message = container.querySelector('.message');
console.log(message.textContent);
</script>
</body>
</html>
Here we first select the container div by its ID, then use querySelector on that element to find a paragraph with class "message". This shows how querySelector can be scoped to specific parts of the DOM.
Scoping queries to specific containers improves performance and makes code more maintainable by limiting the search area. This pattern is common in component-based architectures.
Attribute Selectors
This example demonstrates using querySelector with attribute selectors.
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
</head>
<body>
<input type="text" data-role="search" placeholder="Search...">
<button onclick="findInput()">Find Input</button>
<script>
function findInput() {
const searchInput = document.querySelector('[data-role="search"]');
searchInput.style.border = '2px solid red';
}
</script>
</body>
</html>
In this example, we use an attribute selector to find an input element with a specific data-role attribute. When the button is clicked, the input's border is styled to highlight it.
Attribute selectors are powerful for selecting elements based on custom data attributes or specific attribute values. They're commonly used in modern web frameworks and libraries.
Combining Selectors
This example shows how to combine multiple selectors for more precise targeting.
<!DOCTYPE html>
<html>
<head>
<title>Combined Selectors</title>
</head>
<body>
<ul class="menu">
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<script>
const activeItem = document.querySelector('ul.menu li.active');
activeItem.style.fontWeight = 'bold';
console.log('Active item:', activeItem.textContent);
</script>
</body>
</html>
Here we combine element, class, and descendant selectors to specifically target the active menu item. The selector string matches an li with class "active" that is a descendant of a ul with class "menu".
Combining selectors allows for very precise element targeting without needing to add excessive IDs or classes. This makes the HTML cleaner while maintaining specificity in selections.
Pseudo-class Selectors
This example demonstrates using pseudo-class selectors with querySelector.
<!DOCTYPE html>
<html>
<head>
<title>Pseudo-class Selectors</title>
</head>
<body>
<form>
<input type="text" required placeholder="Required field">
<input type="text" placeholder="Optional field">
<button type="submit">Submit</button>
</form>
<script>
const requiredField = document.querySelector('input:required');
requiredField.style.backgroundColor = '#fff9e6';
const submitButton = document.querySelector('form button:last-child');
submitButton.addEventListener('click', () => {
alert('Form submitted!');
});
</script>
</body>
</html>
In this example, we use the :required pseudo-class to style required form fields differently, and the :last-child pseudo-class to target the submit button. Pseudo-classes provide dynamic selection capabilities.
Pseudo-class selectors are powerful for targeting elements based on their state or position in the DOM. They're commonly used for form validation and interactive UI elements.
Source
MDN querySelector Documentation
In this article, we have shown how to use querySelector in JavaScript
with various selector types. This method is essential for modern DOM manipulation
and provides flexible element selection capabilities.
Author
List all JS DOM tutorials.