Feb 05: Modifying the DOM

Learning Objectives

After today’s class, you should be able to:

• Describe how to manipulate the DOM using JavaScript functions.
• Apply CSS styles to elements by updating className or classList.
• Create new elements and append to existing elements in the DOM.

Lesson Outline

Homework [10 min]

• Prep 3 debrief
• Lab 3 preview
• Toptal’s CSS Cheat Sheet

Lecture [45 min]

• JS Cheatsheet: Page 9 (DOM)
• Chapter 9: Slides 1–13, 14–23
  • Test Your Knowledge #1 (Pages 426–427)
  • Test Your Knowledge #2 (Pages 433–434)
• HTML <template> element (Page 435)
  • Example on W3Schools

Demos [20 min]

• side-by-side.js
  • My own userscript for Gradescope
  • Uses IIFE to avoid name collisions
• Unofficial JMU Catalog
  • See infoDetails() in main.js
• Unofficial Open Class Finder
  • Slower; does not manipulate DOM

Before Tuesday

1. Finish the reading from Prep 3.
2. Submit Lab 3 on Gradescope. ← Due Mon at 11:59pm