🔍 DOM Element Selection Methods

Why Select Instead of Traverse?

In the previous lesson you moved between nodes using relationships — parent, child, sibling. That is perfect when you start from a known element. But often you just want a specific element anywhere on the page, and you don't want to write a chain of hops to reach it. Selection methods let you describe what you want and hand the search to the browser's highly optimized engine.

💡 Analogy: Traversal is walking the shelves of a library counting doors. Selection is asking the librarian: "the book with catalog number 12" (an ID), "everything in the mystery genre" (a class), or "the first hardcover about JavaScript on the second floor" (a CSS selector). You describe the target; they fetch it.

The Classic Methods

These three predate CSS selectors and are still perfectly good — especially getElementById, which is the fastest lookup in the DOM.

getElementById() — one element by its unique id

// HTML: <div id="header">Header</div>
const header = document.getElementById('header');
console.log(header);   // the element, or null if no match

Note: no # — you pass the bare id. Returns a single element or null.

getElementsByClassName() — a live collection by class

// HTML: <li class="item">…</li> <li class="item">…</li>
const items = document.getElementsByClassName('item');
console.log(items.length);   // 2 — an HTMLCollection

getElementsByTagName() — a live collection by tag

const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length);   // every <p> on the page

querySelector & querySelectorAll

The modern workhorses. Both accept any CSS selector, so a single call can express what used to take several. Reach for these by default.

querySelector() — the first match

// First paragraph that has class "intro"
const intro = document.querySelector('p.intro');

// First <li> inside any <ul>
const firstItem = document.querySelector('ul li');

// First email input on the page
const email = document.querySelector('input[type="email"]');

Returns the first matching element or null.

querySelectorAll() — every match

// All highlighted paragraphs
const highlights = document.querySelectorAll('p.highlight');

// Direct-child list items of ordered lists only
const items = document.querySelectorAll('ol > li');

// Every checked checkbox inside a form
const checked = document.querySelectorAll('form input[type="checkbox"]:checked');

// NodeList HAS forEach built in
checked.forEach(box => console.log(box.name));

Returns a static NodeList. Unlike an HTMLCollection, a NodeList has a built-in forEach, which makes it noticeably more pleasant to loop over.

Live vs. Static Collections

This is the subtlety that catches people. The classic methods return a live collection that keeps updating as the DOM changes; querySelectorAll returns a static snapshot taken at the moment you called it.

Why does "live" matter? Because a live collection can change length while you loop over it — a classic bug:

// BUG: 'items' is live. Removing an element shrinks it mid-loop,
// so you skip elements and don't remove them all.
const items = document.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
  items[i].remove();     // items.length drops each time!
}

// FIX: take a static snapshot first
const snapshot = [...document.getElementsByClassName('item')];
snapshot.forEach(el => el.remove());   // reliable

CSS Selector Cheat Sheet

The power of querySelector is the selector language. Any selector that works in a stylesheet works here:

// Combine freely — every even .song inside #playlist
const evenSongs = document.querySelectorAll('#playlist li.song:nth-child(even)');

// Disabled buttons inside forms within the dashboard
const disabled = document.querySelectorAll('.dashboard form button[disabled]');

Scoping the Search

Every selection method exists not only on document but on any element. Call it on an element and the search is limited to that element's subtree — less DOM to scan, and less risk of grabbing the wrong match elsewhere on the page.

const sidebar = document.getElementById('sidebar');

// Only links inside the sidebar, not the whole page
const sidebarLinks = sidebar.querySelectorAll('a');

// Only .active elements within the sidebar
const active = sidebar.getElementsByClassName('active');

📚 Library analogy: Searching from document is scanning the entire library. Scoping to sidebar first is walking to one section and only searching those shelves — faster, and you won't accidentally pull a book from the wrong room.

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

// NodeList: forEach works directly
paragraphs.forEach(p => p.classList.add('body-text'));

// Need map/filter? Convert to an array first
const long = [...paragraphs].filter(p => p.textContent.length > 100);
const texts = Array.from(paragraphs, p => p.textContent);

Worked Example: A Product Filter

Here is a realistic, complete feature: a category filter for a product grid. It shows off querySelectorAll, attribute selectors, scoping, and looping — the everyday bread and butter of selection.

<div class="filters">
  <button class="filter-btn active" data-category="all">All</button>
  <button class="filter-btn" data-category="electronics">Electronics</button>
  <button class="filter-btn" data-category="clothing">Clothing</button>
</div>

<div class="products">
  <div class="product" data-category="electronics">Laptop</div>
  <div class="product" data-category="clothing">T-shirt</div>
  <div class="product" data-category="electronics">Headphones</div>
</div>

const buttons = document.querySelectorAll('.filter-btn');

buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    const category = btn.dataset.category;

    // 1. Update which button looks active
    document.querySelector('.filter-btn.active')?.classList.remove('active');
    btn.classList.add('active');

    // 2. Show or hide each product
    document.querySelectorAll('.product').forEach(product => {
      const show = category === 'all' || product.dataset.category === category;
      product.hidden = !show;
    });
  });
});

Notice btn.dataset.category reads the data-category attribute, and the optional chaining ?. guards against there being no active button yet. Small touches that keep the code robust.

Hands-on Exercise

const input = document.querySelector('#search');
const cards = document.querySelectorAll('.card');
const status = document.querySelector('#status');

input.addEventListener('input', () => {
  const q = input.value.trim().toLowerCase();
  let visible = 0;

  cards.forEach(card => {
    const haystack = (card.textContent + ' ' + card.dataset.tags).toLowerCase();
    const match = haystack.includes(q);
    card.hidden = !match;
    if (match) visible++;
  });

  status.textContent = visible === 0
    ? 'No results'
    : `${visible} item(s)`;
});

Summary & Quiz

📚 Further Reading

• MDN — Document.querySelector()
• MDN — Document.querySelectorAll()
• The Modern JavaScript Tutorial — Searching the DOM

🚀 What's Next?

Selecting an element is step one. Next we'll combine selection with traversal — using closest(), contains(), and relationship properties together to navigate from a found element to exactly the neighbor you need.