Overview
-
Learn to modify the DOM (Document Object Model), one of the core components of every HTML page, with JavaScript.
Syllabus
-
Introduction
- Welcome
- What you should know before watching this course
- Using the exercise files
- What is the Document Object Model (DOM)?
- Navigating the DOM with developer tools
- Testing JavaScript commands with the console
- Communicating with the console through JavaScript
- Selecting elements with getElementById
- Choosing elements by HTML tag
- Isolating elements by class name
- Querying CSS to select elements
- Working with named form elements
- Understanding nodeType, nodeName, and nodeValue
- Traversing up and down DOM nodes
- Targeting node elements
- Changing HTML attributes
- Working with restricted attributes
- Detecting data attributes
- Controlling classes with the HTML5 classList
- Targeting the attributes property
- Using text content modifiers
- Modifying elements as text
- Creating and appending nodes
- Controlling node insertions with insertBefore
- Cloning and removing nodes
- Replacing existing nodes
- What we'll build
- Adding a bubbling event listener
- Creating and styling an overlay with JavaScript
- Adding an image
- Resizing images in the DOM
- Centering an image
- Handling clicks
- Adjusting for scrolling
- Detecting and adjusting for a window resize
- Next steps
