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
HTML and the DOM
Learn DOM Manipulation with Easy Modern JavaScript
DOM Fundamentals
By:
Juan Lizarazo
4 minutes
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
You need to have access to the item to view this lesson.
One-time Fee
$12
List Price:
$84.99
You save:
$72.99
Buy Class
€11.24
List Price:
€79.65
You save:
€68.40
Buy Class
£9.60
List Price:
£68.04
You save:
£58.43
Buy Class
CA$16.52
List Price:
CA$117.05
You save:
CA$100.52
Buy Class
A$18.51
List Price:
A$131.12
You save:
A$112.61
Buy Class
S$16.37
List Price:
S$115.97
You save:
S$99.60
Buy Class
HK$93.88
List Price:
HK$664.93
You save:
HK$571.04
Buy Class
CHF 11.04
List Price:
CHF 78.24
You save:
CHF 67.19
Buy Class
NOK kr133.18
List Price:
NOK kr943.31
You save:
NOK kr810.12
Buy Class
DKK kr83.87
List Price:
DKK kr594.06
You save:
DKK kr510.18
Buy Class
NZ$20.37
List Price:
NZ$144.28
You save:
NZ$123.91
Buy Class
د.إ44.07
List Price:
د.إ312.15
You save:
د.إ268.08
Buy Class
৳1,325.19
List Price:
৳9,385.67
You save:
৳8,060.47
Buy Class
₹1,001.78
List Price:
₹7,095.17
You save:
₹6,093.38
Buy Class
RM57.21
List Price:
RM405.18
You save:
RM347.97
Buy Class
₦15,901.56
List Price:
₦112,622.79
You save:
₦96,721.23
Buy Class
₨3,360.47
List Price:
₨23,800.57
You save:
₨20,440.09
Buy Class
฿445.80
List Price:
฿3,157.37
You save:
฿2,711.57
Buy Class
₺389.42
List Price:
₺2,758.09
You save:
₺2,368.67
Buy Class
B$62.34
List Price:
B$441.58
You save:
B$379.23
Buy Class
R224.30
List Price:
R1,588.67
You save:
R1,364.36
Buy Class
Лв21.99
List Price:
Лв155.79
You save:
Лв133.79
Buy Class
₩16,630.36
List Price:
₩117,784.56
You save:
₩101,154.20
Buy Class
₪44.81
List Price:
₪317.43
You save:
₪272.61
Buy Class
₱693.62
List Price:
₱4,912.63
You save:
₱4,219
Buy Class
¥1,895.02
List Price:
¥13,421.53
You save:
¥11,526.50
Buy Class
MX$205.36
List Price:
MX$1,454.52
You save:
MX$1,249.15
Buy Class
QR44.11
List Price:
QR312.46
You save:
QR268.34
Buy Class
P171.47
List Price:
P1,214.45
You save:
P1,042.97
Buy Class
KSh1,600.68
List Price:
KSh11,336.83
You save:
KSh9,736.15
Buy Class
E£574.36
List Price:
E£4,067.91
You save:
E£3,493.54
Buy Class
ብር688.15
List Price:
ብር4,873.82
You save:
ብር4,185.67
Buy Class
Kz10,014.48
List Price:
Kz70,927.55
You save:
Kz60,913.07
Buy Class
CLP$11,538.46
List Price:
CLP$81,721.15
You save:
CLP$70,182.69
Buy Class
CN¥86.89
List Price:
CN¥615.41
You save:
CN¥528.52
Buy Class
RD$706.69
List Price:
RD$5,005.18
You save:
RD$4,298.48
Buy Class
DA1,615.75
List Price:
DA11,443.56
You save:
DA9,827.81
Buy Class
FJ$27.42
List Price:
FJ$194.24
You save:
FJ$166.81
Buy Class
Q93.85
List Price:
Q664.69
You save:
Q570.84
Buy Class
GY$2,527.58
List Price:
GY$17,901.65
You save:
GY$15,374.06
Buy Class
ISK kr1,685.88
List Price:
ISK kr11,940.24
You save:
ISK kr10,254.36
Buy Class
DH122.11
List Price:
DH864.89
You save:
DH742.77
Buy Class
L213.11
List Price:
L1,509.41
You save:
L1,296.29
Buy Class
ден693.81
List Price:
ден4,913.95
You save:
ден4,220.14
Buy Class
MOP$96.71
List Price:
MOP$684.97
You save:
MOP$588.26
Buy Class
N$225.62
List Price:
N$1,597.99
You save:
N$1,372.36
Buy Class
C$444.46
List Price:
C$3,147.95
You save:
C$2,703.48
Buy Class
रु1,603.07
List Price:
रु11,353.79
You save:
रु9,750.71
Buy Class
S/45.21
List Price:
S/320.22
You save:
S/275
Buy Class
K46.62
List Price:
K330.24
You save:
K283.62
Buy Class
SAR45
List Price:
SAR318.75
You save:
SAR273.74
Buy Class
ZK323.38
List Price:
ZK2,290.34
You save:
ZK1,966.96
Buy Class
L55.96
List Price:
L396.34
You save:
L340.38
Buy Class
Kč282.93
List Price:
Kč2,003.86
You save:
Kč1,720.93
Buy Class
Ft4,394.20
List Price:
Ft31,121.97
You save:
Ft26,727.77
Buy Class
SEK kr132.14
List Price:
SEK kr935.88
You save:
SEK kr803.74
Buy Class
ARS$10,578.33
List Price:
ARS$74,921.03
You save:
ARS$64,342.70
Buy Class
Bs83.47
List Price:
Bs591.20
You save:
Bs507.73
Buy Class
COP$46,544.57
List Price:
COP$329,651.95
You save:
COP$283,107.38
Buy Class
₡6,141.37
List Price:
₡43,496.26
You save:
₡37,354.89
Buy Class
L298.38
List Price:
L2,113.29
You save:
L1,814.91
Buy Class
₲90,233.19
List Price:
₲639,076.63
You save:
₲548,843.43
Buy Class
$U462.90
List Price:
$U3,278.55
You save:
$U2,815.64
Buy Class
zł48.83
List Price:
zł345.84
You save:
zł297.01
Buy Class
Already have an account?
Log In
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