Query Selectors

What are Query Selectors?

Query Selectors are methods that allow you to select elements from the DOM using CSS-like selectors.
They provide a powerful and flexible way to grab elements without needing to traverse the tree manually.

The two main methods are:

document.querySelector()
document.querySelectorAll()

document.querySelector()

What It Does:

Selects the first matching element in the document that satisfies the CSS selector provided.

Syntax:

const element = document.querySelector('css-selector');

Why It’s Useful:

Useful when you only need the first matching element.
Avoids the need to loop through multiple elements when you know there should only be one.

Example 1: Selecting by ID

HTML:

<h1 id="page-title">Welcome to My Site</h1>

JavaScript:

const title = document.querySelector('#page-title');
console.log(title.textContent); // Outputs: Welcome to My Site

👉 Notes:

ID selectors are fast and precise because IDs should be unique in a document.
Use # followed by the element's ID.

Example 2: Selecting by Class

HTML:

<p class="note">This is a note paragraph.</p>
<p class="note">This is another note paragraph.</p>

JavaScript:

const firstNote = document.querySelector('.note');
console.log(firstNote.textContent); // Outputs: This is a note paragraph.

👉 Important:
Only the first element matching the selector is returned.

Example 3: Selecting by Tag

HTML:

<div>First div element</div>
<div>Second div element</div>

JavaScript:

const firstDiv = document.querySelector('div');
console.log(firstDiv.textContent); // Outputs: First div element

Example 4: Complex Selectors

HTML:

<div class="container">
  <p class="highlight">Highlighted text</p>
</div>

JavaScript:

const highlighted = document.querySelector('.container .highlight');
console.log(highlighted.textContent); // Outputs: Highlighted text

👉 Pro Tip:
Chaining selectors allows precise targeting of elements deeply nested in the DOM.

document.querySelectorAll()

What It Does:

Selects all matching elements and returns a static NodeList (which behaves similarly to an array).

Syntax:

const elements = document.querySelectorAll('css-selector');

Why It’s Useful:

Good when you need to work with multiple elements.
Allows iteration with .forEach().

Example 1: Select All Paragraphs with a Class

HTML:

<p class="info">Info paragraph 1</p>
<p class="info">Info paragraph 2</p>
<p class="info">Info paragraph 3</p>

JavaScript:

const allInfo = document.querySelectorAll('.info');

allInfo.forEach((para, index) => {
  console.log(`Paragraph ${index + 1}: ${para.textContent}`);
});

👉 Output:

Paragraph 1: Info paragraph 1  
Paragraph 2: Info paragraph 2  
Paragraph 3: Info paragraph 3

Example 2: Select All List Items

HTML:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

JavaScript:

const listItems = document.querySelectorAll('li');

listItems.forEach(item => {
  console.log(item.textContent);
});

👉 Output:

Apple  
Banana  
Cherry

Attribute Selectors in Detail

You can select elements based on the presence or value of attributes, just like in CSS.

Example 1: Select Elements by Attribute

HTML:

<input type="text" value="Input Field">
<input type="checkbox" checked>
<input type="checkbox">

JavaScript:

const textInput = document.querySelector('input[type="text"]');
console.log(textInput.value); // Outputs: Input Field

Example 2: Select All Checked Checkboxes

HTML:

<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked>

JavaScript:

const checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
console.log(checkedBoxes.length); // Outputs: 2

Combining Selectors

You can use multiple selectors together for complex queries.

Example: Select All Paragraphs Inside a Specific Container

HTML:

<div class="wrapper">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

JavaScript:

const paragraphs = document.querySelectorAll('.wrapper p');

paragraphs.forEach(p => {
  console.log(p.textContent);
});

👉 Output:

Paragraph 1  
Paragraph 2

Advanced Tips

Use document.querySelector() for quick single element grabs (most performant).
Prefer specific selectors (avoid overly generic ones like div, *).
Cache selectors in variables to avoid multiple lookups.
Understand that querySelectorAll() returns a static NodeList, not live.

Example of Caching:

const container = document.querySelector('.container');
// Reuse container later without querying again
const nestedElement = container.querySelector('.nested');

Be as specific as possible to avoid accidentally selecting wrong elements, and prefer querySelectorAll() when multiple elements are needed.

Query Selectors

On this page