Skip to content
Chapter 04 of 07 · 3 lessons · ~27 min

The DOM: Changing the Page

Use JavaScript to find elements on the page, react to clicks and other events, and change text, classes and styles.

YOUR PROGRESS0%
/ Lessons in this chapter
09
How to Select Elements in JavaScript (querySelector) How to find elements on the page with querySelector and querySelectorAll, and change their text and attributes. Coming soon
10
JavaScript Click Events and addEventListener How to make your page react to clicks, typing and other events with addEventListener. Coming soon
11
How to Change CSS With JavaScript How to change the look of elements from JavaScript the clean way, by toggling classes, setting styles and updating CSS variables. Coming soon

Chapter practice task

Task: Build a mobile menu and an FAQ accordion

  1. Add a menu button that is only visible on small screens.
  2. Toggle an is-open class on the menu when the button is clicked.
  3. Update aria-expanded on the button so screen readers know the state.
  4. Build an FAQ list where clicking a question opens its answer and closes the others.
  5. Close the menu when the visitor presses Escape.

By the end of this chapter

  • You can select one or many elements with querySelector and querySelectorAll
  • You can listen for clicks, input and other events with addEventListener
  • You can change text, classes, attributes and styles from JavaScript

Quick answers for this chapter

What is the DOM?

The Document Object Model: the browser’s live, editable version of your HTML that JavaScript can read and change.

Should I change styles directly or toggle classes?

Toggle classes. Keep the styles in CSS and let JavaScript switch them on and off.

Is this how sliders and menus work?

Yes. Most interactive components are just events plus class changes.