About
About Us
Help
Privacy Policy
Terms of Service
LearnDesk
Learn
Academics
Business
Creative
Health and Fitness
Lifestyle
Personal Development
Software
Topics
Admissions
Engineering
Hardware
Hospitality
Humanities
Chinese
Languages
Maths
Pharma
View All Topics
Topics
Accounting
Advertising
Analysis
Analytics
Business Communication
eCommerce
Entrepreneurship
Finance
Finance - India
Freelancing
View All Topics
Topics
Arts & Crafts
Audio Editing
Audio Production
Dance
Design
Film Production
Music
Photography
Video Production
Writing
View All Topics
Topics
Dieting
Fitness
Food Safety
Games
Medical
Medical Professionals
Meditation
Mental Health
Pregnancy
Safety & First Aid
View All Topics
Topics
Beauty & Makeup
Food
Fashion
Gaming
Home Improvement
Parenting
Pet Care & Training
Relationships
Sustainable Living
View All Topics
Topics
Career Development
Learning
Religion and Spirituality
Self-Improvement
View All Topics
Topics
Accounting
Amazon Web Services
App Development
Continuous Integration
Backup Software
Business Automation
Computational Fluid Dynamics
Business Intelligence
Computer Aided Design (CAD)
View All Topics
Teach
Teach Online
Schedule
Items
Billing
Users
Marketing
Analytics
Settings
Change School
Account
Log In
Sign Up
Learn DOM Manipulation with Easy Modern JavaScript
Welcome
What is the DOM?
Preview
Your First DOM Update
Preview
Course Project: Code DOM Adventure
Preview
Download Exercise Files, All Code for Each Module: Code Along or Skip Anytime
Suggested Browser to Take the Lectures
DOM Fundamentals
HTML and the DOM
DOM Standards
The BOM
The CSSOM
The Tree (Data Structure)
The DOM Tree
The DOM and JavaScript
Code DOM Adventure
App Architecture
Challenge: Add the Exit Screen to the Application Class Diagram
Challenge Solution: The Exit Screen
App Skeleton
The Splash Screen File
Download Our Asset Kit Now
Including the Assets
Creating Elements
Wiring the Splash Screen Element
Creating Elements at Runtime
Appending HTML Strings Width Append
Appending Nodes with Append or Append Child
Script Order Matters
Dynamic CSS
Specifying Classes to Elements
Working with Static Styles
Defining Styles at Runtime
Querying the DOM to Find Elements
Profiling the Pixel Pipeline
The Pixel Pipeline
Identifying Bad Practices
Profiling Runtime Performance
Batching DOM Updates with Document Fragments
Too Many Nodes
Animations Using DOM Changes
Removing Nodes from the DOM
The Animation Frames
Our Animate Method
Our Working Animation
Stopping the Animation
Planning DOM Changes with a State Model
Let's Build the Level
Our State Model to Control the DOM from State
Normalizing Attributes
Our Level Class
Arrays, References and Non-Iterable Empty Slots
Building Our State with an Ugly One Liner
Write Code for Humans and Normalize Your Code
Rendering the Level Element
Things are Getting Messy
Easy Bundling
Pre-requisites
Easy Bundling
Bundle with the Start Script
Our Dev Server
Let's use DOM Content Loaded and ES Modules (ESM)
Dynamic Style Elements with CSS as ESM Imports
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 Render Our Chip Walls
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 Class Name and Adding Interactive Frames on DOM Events
Update Frames Without Moving the Element on DOM Events
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
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
Your Turn Now
Challenge Solution, My Turn to Build the Exit Screen
Hiding the Portal Behind a Wall
Removing DOM Event Listeners
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
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
DOM Fundamentals
Learn DOM Manipulation with Easy Modern JavaScript
By:
Juan Lizarazo
Share
Share the link to this page
Copied
Facebook
Twitter
WhatsApp
LinkedIn
Email
Add to Calendar
Add the class to your calendar
Add to Google Calendar
Add to Apple Calendar
Add to Yahoo Calendar
Add to Outlook Calendar
Print
Completed
We'll cover the following topics in this section:
HTML and the DOM
DOM Standards
The BOM
The CSSOM
The Tree (Data Structure)
The DOM Tree
The DOM and JavaScript
Previous
Next
Sign Up
Signup to access thousands of classes
Continue with Facebook
Continue with Google
OR
Continue with Email
Already a member?
Log In
By registering for a LearnDesk account, you agree to our
Terms of Service
and
Privacy Policy
.
Share
Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.
Share with Google Contacts