0Pricing
Frontend Academy · Lesson

querySelector and querySelectorAll

Find single and multiple elements using CSS selector strings and understand the difference between NodeList and HTMLCollection.

What Is the DOM?

The Document Object Model is a tree of JavaScript objects that represents the HTML structure. JavaScript interacts with the DOM to read, modify, add, and remove elements — making web pages dynamic.

getElementById

The classic selector. document.getElementById('myId') returns the element with that id, or null if not found. It's fast but only works with IDs.

const header = document.getElementById('site-header');
if (header) {
  header.style.backgroundColor = 'navy';
}

All lessons in this course

  1. querySelector and querySelectorAll
  2. addEventListener and Event Object
  3. Changing Content: textContent innerHTML classList
  4. Creating and Appending Elements
← Back to Frontend Academy