0Pricing
JavaScript Academy · Lesson

Selecting Elements with querySelector

Find elements using CSS selectors.

Meet querySelector

querySelector returns the first element that matches a CSS selector, or null if nothing matches. It lives on document and on every element.

const title = document.querySelector("h1");
console.log(title.textContent);

Any CSS Selector Works

The power of querySelector is that it accepts the same selectors you use in CSS: tags, classes, ids, attributes, and combinations.

document.querySelector("#main");      // by id
document.querySelector(".card");      // by class
document.querySelector("input[type=email]"); // by attribute

All lessons in this course

  1. Selecting Elements with querySelector
  2. getElementById and getElementsByClassName
  3. Traversing Parents, Children and Siblings
  4. NodeList vs HTMLCollection
← Back to JavaScript Academy