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

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 Updates from State

Learn DOM Manipulation with Easy Modern JavaScript DOM Updates with Basic State Driven Development

By: Juan Lizarazo

7 minutes

Share the link to this page

Copied

Facebook

Twitter

Add the class to your calendar

Add to Google Calendar

Add to Apple Calendar

Add to Yahoo Calendar

Add to Outlook Calendar

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

€10.42

List Price: €73.82

You save: €63.40

£9.10

List Price: £64.45

You save: £55.35

CA$16.71

List Price: CA$118.38

You save: CA$101.66

A$17.48

List Price: A$123.82

You save: A$106.34

S$15.45

List Price: S$109.45

You save: S$94

HK$94.04

List Price: HK$666.09

You save: HK$572.04

CHF 9.60

List Price: CHF 68.05

You save: CHF 58.44

NOK kr117.05

List Price: NOK kr829.05

You save: NOK kr711.99

DKK kr77.88

List Price: DKK kr551.63

You save: DKK kr473.74

NZ$21.03

List Price: NZ$148.99

You save: NZ$127.95

د.إ44.07

List Price: د.إ312.12

You save: د.إ268.05

৳1,476.50

List Price: ৳10,457.33

You save: ৳8,980.82

₹1,117.35

List Price: ₹7,913.63

You save: ₹6,796.28

RM48.46

List Price: RM343.27

You save: RM294.80

₦16,583.88

List Price: ₦117,455.33

You save: ₦100,871.45

₨3,349.15

List Price: ₨23,720.42

You save: ₨20,371.26

฿393.49

List Price: ฿2,786.93

You save: ฿2,393.43

₺533.99

List Price: ₺3,781.99

You save: ₺3,248

B$62.04

List Price: B$439.39

You save: B$377.35

R203.83

List Price: R1,443.67

You save: R1,239.84

Лв20.38

List Price: Лв144.37

You save: Лв123.99

₩18,199.47

List Price: ₩128,897.78

You save: ₩110,698.30

₪37.85

List Price: ₪268.10

You save: ₪230.24

₱728.43

List Price: ₱5,159.14

You save: ₱4,430.71

¥1,916.22

List Price: ¥13,571.67

You save: ¥11,655.44

MX$215.32

List Price: MX$1,525.02

You save: MX$1,309.69

QR43.76

List Price: QR309.99

You save: QR266.22

P163.19

List Price: P1,155.85

You save: P992.65

KSh1,561.20

List Price: KSh11,057.19

You save: KSh9,495.99

E£653.28

List Price: E£4,626.85

You save: E£3,973.57

ብር1,874.22

List Price: ብር13,274.16

You save: ብር11,399.94

Kz10,945.56

List Price: Kz77,521.93

You save: Kz66,576.37

CLP$10,986

List Price: CLP$77,808.34

You save: CLP$66,822.34

CN¥82.77

List Price: CN¥586.22

You save: CN¥503.45

RD$722.18

List Price: RD$5,114.86

You save: RD$4,392.68

DA1,597.53

List Price: DA11,314.57

You save: DA9,717.03

FJ$27.04

List Price: FJ$191.55

You save: FJ$164.50

Q91.83

List Price: Q650.40

You save: Q558.57

GY$2,512.26

List Price: GY$17,793.14

You save: GY$15,280.87

ISK kr1,505.28

List Price: ISK kr10,661.14

You save: ISK kr9,155.86

DH112.13

List Price: DH794.18

You save: DH682.05

L211.13

List Price: L1,495.38

You save: L1,284.25

ден642.25

List Price: ден4,548.80

You save: ден3,906.54

MOP$96.91

List Price: MOP$686.38

You save: MOP$589.47

N$201.59

List Price: N$1,427.81

You save: N$1,226.22

C$441.76

List Price: C$3,128.78

You save: C$2,687.02

रु1,782.44

List Price: रु12,624.16

You save: रु10,841.72

S/41.76

List Price: S/295.80

You save: S/254.04

K51.91

List Price: K367.69

You save: K315.77

SAR45.05

List Price: SAR319.06

You save: SAR274.01

ZK231.35

List Price: ZK1,638.55

You save: ZK1,407.20

L53.14

List Price: L376.37

You save: L323.23

Kč255.64

List Price: Kč1,810.60

You save: Kč1,554.96

Ft4,002.18

List Price: Ft28,345.44

You save: Ft24,343.26

SEK kr114.05

List Price: SEK kr807.79

You save: SEK kr693.73

ARS$16,700.92

List Price: ARS$118,284.31

You save: ARS$101,583.38

Bs82.94

List Price: Bs587.43

You save: Bs504.49

COP$44,435.75

List Price: COP$314,716.23

You save: COP$270,280.48

₡5,580.64

List Price: ₡39,524.92

You save: ₡33,944.28

L318.86

List Price: L2,258.32

You save: L1,939.46

₲77,958.50

List Price: ₲552,141.10

You save: ₲474,182.60

$U486

List Price: $U3,442.11

You save: $U2,956.10

zł44.66

List Price: zł316.36

You save: zł271.69

Already have an account? Log In

Learn DOM Manipulation with Easy Modern JavaScript

DOM Updates from State

Sign Up

Sign Up

Share