What is the DOM?

Your first DOM update

Course Project: Code DOM Adventure

HTML and the DOM

DOM standards

The BOM

The CSSOM

The tree (Data structure)

The DOM tree

The DOM and JavaScript

App architecture

Challenge solution: The exit screen

App skeleton

The splash screen file

Download our asset kit now!

Including the assets

Wiring the splash screen element

Creating elements at runtime

Appending HTML strings width append()

Appending nodes with append or append Child

Script order matters

Specifying classes to elements

Working with static styles

Defining styles at runtime

Querying the DOM to find elements

The pixel pipeline

Identifying bad practices

Profiling runtime performance

Batching DOM updates with document fragments

Too many nodes

Removing nodes from the DOM

The animation frames

Our animate method

Our working animation!

Stopping the animation

Let’s build the level!

2. 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 oneliner

Write code for humans and normalize your code

Rendering the level element

Things are getting messy

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

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 – 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

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

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

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

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