Enhance your JavaScript skills by learning the fundamentals of the Document Object Model.
About This Video
In Detail
The Document Object Model (DOM) is the data representation of the objects that …
Enhance your JavaScript skills by learning the fundamentals of the Document Object Model.
About This Video
In Detail
The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. This is what we are going to use when we work with JavaScript and interact in any way dynamically with the document.
When one uses Angular, Vue, React, or any other library or framework to create modern web applications, the DOM is what these use under the hood.
This course will make you stand out as a JavaScript developer. You will get a clear understanding of the DOM fundamentals. The course will help you understand what the DOM is and how to interact dynamically with an HTML document. We will build user interfaces using modern and easy JavaScript with classes, private attributes, and DOM APIs.
Learn optimization techniques and apply easy bundling techniques that include dynamic CSS loading. We will search for documentation; memorizing all the DOM interfaces is not required. While building the game application, you will understand how to interact with the DOM and user input through event listeners.
Chapter 1 : Welcome
What is the DOM?
Your First DOM Update
Course Project: Code DOM Adventure
Chapter 2 : DOM Fundamentals
HTML and the DOM
DOM Standards
The BOM
The CSSOM
The Tree (Data Structure)
The DOM Tree
The DOM and JavaScript
Chapter 3 : Code DOM Adventure
App Architecture
Challenge Solution: The Exit Screen
App Skeleton
The Splash Screen File
Including the Assets
Chapter 4 : Creating Elements
Wiring the Splash Screen Element
Creating Elements at Runtime
Appending HTML Strings Width Append()
Appending Nodes with Append or AppendChild
Script Order Matters
Chapter 5 : Dynamic CSS
Specifying Classes to Elements
Working with Static Styles
Defining Styles at Runtime
Querying the DOM to Find Elements
Chapter 6 : Profiling the Pixel Pipeline
The Pixel Pipeline
Identifying Bad Practices
Profiling Runtime Performance
Batching DOM Updates with Document Fragments
Too Many Nodes
Chapter 7 : Animation Using DOM Changes
Removing Nodes from the DOM
The Animation Frames
Our Animate Method
Our Working Animation!
Stopping the Animation
Chapter 8 : Planning DOM Changes with a State Model
Let’s Build the Level!
Normalizing Attributes
Our Level Class
Arrays, References, and Non-Iterable Empty Slots
Building Our State with an Ugly Oneliner
Write Code for Humans and Normalize Your Code
Rendering the Level Element
Hmm, Things are Getting Messy
Chapter 9 : Easy Bundling
Easy Bundling
Bundle with the Start Script
Our Dev Server
Let’s Use DOMContentLoaded and ES Modules (ESM)
Dynamic Style Elements with CSS as ESM Imports
Chapter 10 : DOM Updates with Basic State-Driven Development
Designing the Shape of Our State
Initializing Our State in Preparation to Render DOM Elements
DOM Updates from State
Updates to State are Reflected in the DOM
Modeling and Rendering Our Chip Walls
Chapter 11 : The Player Interacting with User Input
The Player - Tech Approach
Rendering the Player with the DOM
Box Model and Global Styles
Manipulating Inline Styles with the DOM
Moving the Player by Changing its State
DOM Keyboard Event Listeners
Mapping and Filtering DOM Events Data
Can the Player Move? - Tech Approach
Preventing Overlapping DOM Elements
Prepare Interactive Frames
Resetting ClassName and Adding Interactive Frames on DOM Events
Update Frames without Moving the Element on DOM Events
Chapter 12 : Interactive DOM, Breaking Walls
Adding Random DOM Elements
DOM Events When Pressing the Space Key
Creating Elements on DOM Events
Z-Index Manifest
Dynamic Element IDs with the DOM
Interacting with Other Elements Using the State Model
Remove Surrounding Walls
Chapter 13 : Portal to Exit the Game
Adding the Portal to the Screen
Random Elements on the Screen
Grouping Inline CSS DOM Updates
Exiting the Game When Two Elements Cross Paths
Challenge: Your Turn to Build the Exit Screen
Challenge Solution: My Turn to build the Exit Screen
Hiding the Portal Behind a Wall
Removing DOM Event Listeners
Chapter 14 : Animating All the Things
Rendering the Splash Screen
Swapping Screens
Animating the Portal
CSS Kit – Animations
Request Animation Frame and Delaying Animations
Animating with a Parent CSS Class
Old TV Effect
Animating with Delayed Animation
Optimizing Frames
Final Frame Optimizations
Chapter 15 : DOM Sound Effects
Dynamic Audio Elements
Interactive Sound Effects with DOM Events
Delayed Audio Effects with Callbacks and DOM Events
Final Lecture, Final Sound Effect! Exiting the Game