Query Selector Examples

Learn how to find and select HTML elements using modern querySelector methods.

1. Select by ID

// Select element with id="uniqueId" const element = document.querySelector('#uniqueId');

This is a unique element with id="uniqueId"

Result: Click to see!

2. Select by Class

// Select all elements with class="special" const elements = document.querySelectorAll('.special');

Special Item 1

Normal Item

Special Item 2

Result: Click to see!

3. Select by Tag

// Select all paragraph elements const paragraphs = document.querySelectorAll('p');

First paragraph

This is a div

Second paragraph

Third paragraph

Result: Click to see!

4. Complex Selectors

// Select specific nested elements const nested = document.querySelector('.parent .child');

Parent box

Child 1

Child 2

Result: Click to see!

Selector Methods and Syntax

Basic Selectors

// Select by ID const element = document.querySelector('#myId'); // Select by Class const elements = document.querySelectorAll('.myClass'); // Select by Tag const divs = document.querySelectorAll('div'); // Select by Attribute const input = document.querySelector('[type="text"]');

Complex Selectors

// Descendant Selector const nested = document.querySelector('.parent .child'); // Direct Child Selector const direct = document.querySelector('.parent > .child'); // Multiple Selectors const multiple = document.querySelectorAll('div, span, p'); // Attribute Contains const partial = document.querySelector('[class*="part"]');

Pseudo Selectors

// First Child const first = document.querySelector('li:first-child'); // Last Child const last = document.querySelector('li:last-child'); // Nth Child const nth = document.querySelector('li:nth-child(2)'); // Hover State const hover = document.querySelector('.button:hover');

Element Manipulation

Exercise 1: Element Counter

Create a function that counts different types of elements:

Count all paragraphs
Count elements with a specific class
Count elements matching a complex selector

// Your solution here function countElements() { const paragraphs = document.querySelectorAll('p').length; const specials = document.querySelectorAll('.special').length; const complex = document.querySelectorAll('.parent > .child').length; return { paragraphs, specials, complex }; }

Exercise 2: Element Styler

Create a function that applies styles to selected elements:

Change background color of specific elements
Add/remove classes based on conditions
Toggle visibility of elements

// Your solution here function styleElements() { // Change background of specific elements document.querySelectorAll('.highlight-me').forEach(el => { el.style.backgroundColor = '#ffd74a20'; }); // Add/remove classes document.querySelectorAll('.toggle-active').forEach(el => { if (el.dataset.active === 'true') { el.classList.add('active'); } else { el.classList.remove('active'); } }); // Toggle visibility document.querySelectorAll('.can-hide').forEach(el => { el.style.display = el.style.display === 'none' ? 'block' : 'none'; }); }

Design and developed by Yogesh Suryawanshi 📞 +91 957 926 3798