CodeBlanks Logo Icon CodeBlanks
Login Register

querySelector

JavaScript course · Intermediate · Lesson 21/134

Learn to select the first matching element with a CSS selector.

Using a CSS selector with querySelector

querySelector takes a CSS selector and returns the first matching element. Unlike getElementById, it also works with classes, tags and more complex selectors, not just ids.

Examples:

document.querySelector("#save") — element with id save.
document.querySelector(".btn") — first element with class btn.
document.querySelector("p") — first <p> tag.

The leading # or . signs must be written; they cannot be skipped like in getElementById.

Common selectors

querySelector accepts any valid CSS selector. The most common ones are:

#id — by id attribute.
.class — by class attribute.
tag — by tag name.
.parent .child — an element inside a specific container.

If the selector does not match, it returns null; just like with getElementById. So it is a good habit to check the result before using it.

Exercise Update the heading

Select the first element with class "title" using querySelector and assign it to heading. Then set heading.textContent to "Application".

Show example solution 
Select with querySelector('.title'), then write heading.textContent = 'Application'.
Example solution:
const heading = document.querySelector(".title");
heading.textContent = "Application";

Test yourself

  1. Select the first element with class 'btn'

    • querySelector("#btn")
    • querySelector("btn")
    • querySelector("*btn")
    • querySelector(".btn")
    Show answer

    querySelector(".btn") — Correct! Class selectors start with the . sign.

  2. Call with a class selector

    // Select the first element with class "active"
const active = document.____;
    Show answer 
    // Select the first element with class "active"
const active = document.querySelector('.active');

  3. Match each selector to its meaning

    #save
    element with id save
    .btn
    element with class btn
    p
    element representing a p tag
    .card .title
    title inside the card class

  4. What does querySelector return if there is no match?

    • null
    • undefined
    • An empty string ("")
    • It throws an error
    Show answer

    null — Correct! It returns null when there is no match.

All lessons in Intermediate

1 Arrow functions

  1. Arrow function syntax
  2. Single-line and block body
  3. Parameters with arrows
  4. The this context
  5. Arrow vs function
  6. Summary - Arrow functions

2 Scope

  1. Global scope
  2. Function scope
  3. Block scope
  4. Variable shadowing
  5. Hoisting
  6. Summary - Scope

3 Closures

  1. What is a closure?
  2. Factory functions
  3. Immediately Invoked Function Expressions
  4. The module pattern
  5. Closure pitfalls
  6. Summary - Closures

4 DOM basics

  1. What is the DOM?
  2. getElementById
  3. querySelector
  4. querySelectorAll
  5. textContent and innerText
  6. Summary - DOM basics

5 DOM manipulation

  1. Creating elements with createElement
  2. appendChild and removeChild
  3. The classList API
  4. setAttribute and removeAttribute
  5. innerHTML and insertAdjacentHTML
  6. Summary - DOM manipulation

6 Events

  1. addEventListener basics
  2. Click events
  3. Mouse events
  4. Keyboard events
  5. The event object
  6. Summary - Events

7 Event handling

  1. Event bubbling
  2. stopPropagation
  3. Event delegation
  4. preventDefault
  5. once and passive options
  6. Summary - Event handling

8 Local storage

  1. localStorage basics
  2. sessionStorage
  3. Storing data with JSON
  4. Clearing storage
  5. Storage events
  6. Summary - Local storage

9 Project: To-do app

  1. Project: To-do app
  2. UI skeleton
  3. Adding a task
  4. Completing and deleting a task - DOM
  5. Project final - To-do DOM

10 Forms

  1. Accessing form elements
  2. Reading input values
  3. The form submit event
  4. Basic validation
  5. Checkbox and radio
  6. Summary - Forms

11 Timers

  1. setTimeout
  2. setInterval
  3. Stopping with clearInterval
  4. requestAnimationFrame
  5. Timer cleanup
  6. Summary - Timers

12 Callbacks

  1. Callback functions
  2. Asynchronous callbacks
  3. Error-first callbacks
  4. Callback hell
  5. Managing callbacks
  6. Summary - Callbacks

13 Promises

  1. What is a promise?
  2. Catching success with then
  3. Catching errors with catch
  4. Cleanup with finally
  5. Promise.all and Promise.race
  6. Summary - Promises

14 async/await

  1. async functions
  2. The await operator
  3. Async error handling
  4. Parallel await
  5. await expressions
  6. Summary - async/await

15 Fetch API

  1. fetch basics
  2. Reading JSON
  3. HTTP headers
  4. POST requests
  5. HTTP error handling
  6. Summary - Fetch API

16 Project: Weather panel

  1. Project: Weather panel
  2. UI and city input
  3. Fetching data with fetch
  4. Rendering data to the DOM
  5. Project final - Weather panel

17 Project: Gallery app

  1. Project: Gallery app
  2. Fetching the image list
  3. Building the gallery grid
  4. Large image view
  5. Project final - Gallery

18 Error handling

  1. Custom error classes
  2. Error propagation
  3. Multiple catch patterns
  4. Async error strategies
  5. Global error handling
  6. Summary - Error handling

19 JSON

  1. The JSON format
  2. JSON.parse
  3. JSON.stringify
  4. structuredClone
  5. JSON limitations
  6. Summary - JSON

20 Date and time

  1. Creating Date objects
  2. Reading date components
  3. Formatting dates
  4. Intl.DateTimeFormat
  5. Date arithmetic
  6. Summary - Date and time

21 RegExp basics

  1. RegExp syntax
  2. Character classes
  3. Quantifiers
  4. test and match
  5. replace and split with regex
  6. Summary - RegExp basics

22 Modules

  1. What is a module?
  2. Named export
  3. Default export
  4. The import statement
  5. Module vs script
  6. Summary - Modules

23 Intermediate final

  1. Challenge - DOM app
  2. Challenge - Async flow
  3. Challenge - Form and storage
  4. Challenge - Timers and animation
  5. Challenge - Modular structure