Solice UI
Open workspace
Back to the curriculum

Chapter 4 · JavaScript & the DOM

The DOM and events

The DOM is the browser's in-memory representation of the document. JavaScript can read it, update it, and listen for events such as clicks, typing, focus changes, or completed network requests.

Beginner · Lesson 5 of 6 in this chapter

Elements become objects

A script can select an element and read its text, attributes, classes, or position. Updating those values changes the current document; it does not rewrite the original HTML file on the server.

Events describe what happened

An event begins at a target and can travel through ancestors. A listener receives the event and decides whether to respond. Use the element's native event and behavior when they already match the interaction.

A familiar example

Clearing a search field

  1. The clear button receives a click event.
  2. Its handler sets the search value to an empty string.
  3. The filtered curriculum rerenders and focus returns to the search input.

What to remember

  • The DOM represents the current document.
  • Events connect user or browser activity to code.
  • Prefer native controls before recreating their behavior with generic elements.