The DOM

Objective

Students will learn about the Document Object Model (DOM) and practice interacting with it using the developer tools and JavaScript, first in the browser console then using scripts.

In the workshop, students will create a jQuery-like class and methods that manipulate the DOM

Pre-work

• Lab: Manipulating the DOM
• Article: jQuery Selectors — The Absolute Basics by Robbie Jaeger
• Video: Learn jQuery in 15 minutes
• Code Sandbox: The starting code is from the video above, so students can try using jQuery

Optional Pre-work

• Podcast: The Internet, Browsers, and How JavaScript Became Trendy — Listen to Fullstack instructors discuss why jQuery became a huge hit when it appeared in 2006 (NOTE: they start talking about jQuery at 35:00)

In-class

Instructor Demo

• Instructor should walk through the "Manipulating the DOM" lab with students, clarifying any parts of the tooling as questions arise.
• Array-like objects and Array.from
• Look at some DOM properties in the console
  • document.head
  • document.body
  • classList
  • window.innerHeight
  • window.innerWidth

Tutorial

• Pair Exercise: Selector.js

Review video

• Review Video

Notes

• The original gist for this workshop can be found here