JavaScript · Beginner level

Beginner level · Module 4 of 5 · 11 guided hours

The DOM and Events

Use JavaScript to read and change web pages, respond to clicks and form input, and build page content from data.

Learning objectives

  • Select and change elements in the DOM
  • Respond to user events and form submissions
  • Render lists from data and use event delegation

Topics

  • the DOM tree
  • querySelector and querySelectorAll
  • textContent, classList and attributes
  • addEventListener
  • form submit and preventDefault
  • creating elements and event delegation

Lessons

  1. Lesson 1 Selecting and Changing Elements

    Understand the DOM as a tree of elements, select elements with CSS selectors and change their text, classes and attributes.

    DOM treequerySelectortextContent vs innerHTMLclassList

  2. Lesson 2 Events and Forms

    Respond to clicks, input and form submissions with event listeners, and read and validate form values.

    addEventListenerevent objectsubmit and preventDefaultinput validation

  3. Lesson 3 Rendering Lists from Data

    Keep data in an array and render the page from it, creating elements dynamically and handling events with delegation.

    render functioncreateElement and appendevent delegationdata attributes

Practical activity

Build a to-do list for a community event: add tasks from a form, mark them done and remove them, rendering the list from an array.

Expected outcomes

  • Interactive pages driven by data
  • Safe handling of user input in the page

Assessment

Practical: add two interactive features to a provided page; marked on behaviour and on rendering from data.

Free taster lesson The DOM & Events Read a free self-study lesson on this topic in the Free Course Library.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.