Selecting & Traversing Elements | JS Mastery

Selecting Elements

// querySelector — returns FIRST matching element (or null):
const title = document.querySelector("h1");
const submit = document.querySelector("#submit-btn");
const card = document.querySelector(".card");
const input = document.querySelector("input[type='email']");
const hero = document.querySelector(".hero .title");  // descendant

// querySelectorAll — returns NodeList of ALL matches:
const paragraphs = document.querySelectorAll("p");
const navLinks = document.querySelectorAll("nav a");
const checkboxes = document.querySelectorAll("input[type='checkbox']:checked");

// Convert NodeList to array for full array methods:
const items = [...document.querySelectorAll(".item")];
items.map(el => el.textContent);  // get all text

// Legacy (still useful):
document.getElementById("myId");           // by id (fast!)
document.getElementsByClassName("card");   // HTMLCollection (live)
document.getElementsByTagName("div");      // HTMLCollection (live)

// Search within an element (not just document):
const nav = document.querySelector("nav");
const firstNavLink = nav.querySelector("a");  // searches inside nav only

Traversing the DOM

const el = document.querySelector(".target");

// Parent:
el.parentElement;           // immediate parent element
el.closest(".container");   // nearest ancestor matching selector

// Children:
el.children;                // HTMLCollection of child elements
el.firstElementChild;       // first child element
el.lastElementChild;        // last child element
[...el.children];           // convert to array for map/filter

// Siblings:
el.nextElementSibling;      // next sibling element
el.previousElementSibling;  // previous sibling element

// Finding ancestors:
// closest() walks up the tree — very useful:
button.addEventListener("click", (e) => {
  const card = e.target.closest(".card");
  // finds the .card ancestor of whatever was clicked
  card.classList.toggle("expanded");
});

// Checking relationships:
parent.contains(child);     // true if child is descendant
el.matches(".active");      // true if el matches selector
el.matches(":hover");       // true if currently hovered

CSS Selectors Reference

// Basic selectors:
"p"           // all  elements
"#myId"       // by id
".myClass"    // by class
"div.card"    // div with class card

// Combinators:
"div p"       // p inside div (descendant)
"div > p"     // direct children p of div
"h1 + p"      // p immediately after h1
"h1 ~ p"      // all p siblings after h1

// Attribute selectors:
"[disabled]"          // has disabled attribute
"[type='text']"       // type equals "text"
"[href^='https']"     // href starts with https
"[href$='.pdf']"      // href ends with .pdf
"[class*='btn']"      // class contains 'btn'

// Pseudo-classes:
"a:hover"             // being hovered
"li:first-child"      // first child li
"li:last-child"       // last child
"li:nth-child(2)"     // second child
"li:nth-child(odd)"   // odd children
":not(.disabled)"     // not disabled
"input:checked"       // checked checkbox/radio
"input:focus"         // has focus

⚡ Key Takeaways

querySelector() returns first match; querySelectorAll() returns all matches
Scope searches with element.querySelector() — not just document
closest() walks up the tree — great for event delegation
Convert NodeList to array with spread: [...nodeList]
matches() tests if an element matches a CSS selector
getElementById() is the fastest selector — use for unique IDs

🎯 Practice Exercises

EXERCISE 1

On any news website, use querySelectorAll to select all article titles, log their text content, and count them. Then filter for titles containing a specific word.

EXERCISE 2

Write a function that takes a click event target and walks up the DOM tree logging each parent element's tag and class until it reaches the body.

← DOM Basics Events →