Prep: The Document Object Model
Session goals
By the end of this session students will be able to do the following:
- Use the Document Object Model to read and modify an HTML page with JavaScript
- Combine JS objects, functions, and rendered HTML in a single application
Videos and readings
Please set aside time to watch the following priority video tutorial before class, up to 1:04.
If you learn best by reading, check out the assigned chapter of the online textbook Eloquent JavaScript.
Priority
Watch up to 1:04, through the “Working with Attributes” section, stopping before the “Events” section. JavaScript DOM Manipulation Mastery: A Comprehensive Guide, 1h 25m, Envato Tuts (Jeremy McPeak), YouTube, 11 Jul 2023.
JavaScript Modules with Import/Export Syntax (ES6), 12m 37s, dcode, YouTube, 9 July 2019.
The Document Object Model, chapter from book Eloquent JavaScript, 3rd ed. (2018), Marijn Haverbeke
Also recommended
Learn DOM Manipulation in 18 Minutes, 18m 36s, Web Dev Simplified, YouTube, 8 Dec 2020.
DOM Visualizer, 0xedward, GitHub, last updated 1 Feb 2025.
Watch the rest of the above DOM video tutorial, including “Events” and “Using Event Delegation...”
Modules, chapter from book Eloquent JavaScript, 4th ed. (2020), Marijn Haverbeke