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

Preventing Overlapping DOM Elements

Learn DOM Manipulation with Easy Modern JavaScript The Player, Interacting with User Input

By: Juan Lizarazo

11 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

€11.24

List Price: €79.65

You save: €68.40

£9.60

List Price: £68.04

You save: £58.43

CA$16.52

List Price: CA$117.05

You save: CA$100.52

A$18.51

List Price: A$131.12

You save: A$112.61

S$16.37

List Price: S$115.97

You save: S$99.60

HK$93.88

List Price: HK$664.93

You save: HK$571.04

CHF 11.04

List Price: CHF 78.24

You save: CHF 67.19

NOK kr133.18

List Price: NOK kr943.31

You save: NOK kr810.12

DKK kr83.87

List Price: DKK kr594.06

You save: DKK kr510.18

NZ$20.37

List Price: NZ$144.28

You save: NZ$123.91

د.إ44.07

List Price: د.إ312.15

You save: د.إ268.08

৳1,325.19

List Price: ৳9,385.67

You save: ৳8,060.47

₹1,001.78

List Price: ₹7,095.17

You save: ₹6,093.38

RM57.21

List Price: RM405.18

You save: RM347.97

₦15,901.56

List Price: ₦112,622.79

You save: ₦96,721.23

₨3,360.47

List Price: ₨23,800.57

You save: ₨20,440.09

฿445.80

List Price: ฿3,157.37

You save: ฿2,711.57

₺389.42

List Price: ₺2,758.09

You save: ₺2,368.67

B$62.34

List Price: B$441.58

You save: B$379.23

R224.30

List Price: R1,588.67

You save: R1,364.36

Лв21.99

List Price: Лв155.79

You save: Лв133.79

₩16,630.36

List Price: ₩117,784.56

You save: ₩101,154.20

₪44.81

List Price: ₪317.43

You save: ₪272.61

₱693.62

List Price: ₱4,912.63

You save: ₱4,219

¥1,895.02

List Price: ¥13,421.53

You save: ¥11,526.50

MX$205.36

List Price: MX$1,454.52

You save: MX$1,249.15

QR44.11

List Price: QR312.46

You save: QR268.34

P171.47

List Price: P1,214.45

You save: P1,042.97

KSh1,600.68

List Price: KSh11,336.83

You save: KSh9,736.15

E£574.36

List Price: E£4,067.91

You save: E£3,493.54

ብር688.15

List Price: ብር4,873.82

You save: ብር4,185.67

Kz10,014.48

List Price: Kz70,927.55

You save: Kz60,913.07

CLP$11,538.46

List Price: CLP$81,721.15

You save: CLP$70,182.69

CN¥86.89

List Price: CN¥615.41

You save: CN¥528.52

RD$706.69

List Price: RD$5,005.18

You save: RD$4,298.48

DA1,615.75

List Price: DA11,443.56

You save: DA9,827.81

FJ$27.42

List Price: FJ$194.24

You save: FJ$166.81

Q93.85

List Price: Q664.69

You save: Q570.84

GY$2,527.58

List Price: GY$17,901.65

You save: GY$15,374.06

ISK kr1,685.88

List Price: ISK kr11,940.24

You save: ISK kr10,254.36

DH122.11

List Price: DH864.89

You save: DH742.77

L213.11

List Price: L1,509.41

You save: L1,296.29

ден693.81

List Price: ден4,913.95

You save: ден4,220.14

MOP$96.71

List Price: MOP$684.97

You save: MOP$588.26

N$225.62

List Price: N$1,597.99

You save: N$1,372.36

C$444.46

List Price: C$3,147.95

You save: C$2,703.48

रु1,603.07

List Price: रु11,353.79

You save: रु9,750.71

S/45.21

List Price: S/320.22

You save: S/275

K46.62

List Price: K330.24

You save: K283.62

SAR45

List Price: SAR318.75

You save: SAR273.74

ZK323.38

List Price: ZK2,290.34

You save: ZK1,966.96

L55.96

List Price: L396.34

You save: L340.38

Kč282.93

List Price: Kč2,003.86

You save: Kč1,720.93

Ft4,394.20

List Price: Ft31,121.97

You save: Ft26,727.77

SEK kr132.14

List Price: SEK kr935.88

You save: SEK kr803.74

ARS$10,578.33

List Price: ARS$74,921.03

You save: ARS$64,342.70

Bs83.47

List Price: Bs591.20

You save: Bs507.73

COP$46,544.57

List Price: COP$329,651.95

You save: COP$283,107.38

₡6,141.37

List Price: ₡43,496.26

You save: ₡37,354.89

L298.38

List Price: L2,113.29

You save: L1,814.91

₲90,233.19

List Price: ₲639,076.63

You save: ₲548,843.43

$U462.90

List Price: $U3,278.55

You save: $U2,815.64

zł48.83

List Price: zł345.84

You save: zł297.01

Already have an account? Log In

Learn DOM Manipulation with Easy Modern JavaScript

Preventing Overlapping DOM Elements

Sign Up

Sign Up

Share