Book Image

Learn DOM Manipulation with Easy Modern JavaScript [Video]

By : Juan Lizarazo
4 (1)
Book Image

Learn DOM Manipulation with Easy Modern JavaScript [Video]

4 (1)
By: Juan Lizarazo

Overview of this book

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. This is what we are going to use when we work with JavaScript and interact in any way dynamically with the document. When one uses Angular, Vue, React, or any other library or framework to create modern web applications, the DOM is what these use under the hood. This course will make you stand out as a JavaScript developer. You will get a clear understanding of the DOM fundamentals. The course will help you understand what the DOM is and how to interact dynamically with an HTML document. We will build user interfaces using modern and easy JavaScript with classes, private attributes, and DOM APIs. Learn optimization techniques and apply easy bundling techniques that include dynamic CSS loading. We will search for documentation; memorizing all the DOM interfaces is not required. While building the game application, you will understand how to interact with the DOM and user input through event listeners.

Related Content you might be interested in

Current Title:

Small book image
Learn DOM Manipulation with Easy Modern JavaScript [Video]
Juan Lizarazo
Jul, 2021 | 7 hours 20 minutes
No titles found
Table of Contents (15 chapters)
Free Chapter
1
Welcome
What is the DOM?
Your First DOM Update
Course Project: Code DOM Adventure
2
DOM Fundamentals
HTML and the DOM
DOM Standards
The BOM
The CSSOM
The Tree (Data Structure)
The DOM Tree
The DOM and JavaScript
3
Code DOM Adventure
App Architecture
Challenge Solution: The Exit Screen
App Skeleton
The Splash Screen File
Including the Assets
4
Creating Elements
Wiring the Splash Screen Element
Creating Elements at Runtime
Appending HTML Strings Width Append()
Appending Nodes with Append or AppendChild
Script Order Matters
5
Dynamic CSS
Specifying Classes to Elements
Working with Static Styles
Defining Styles at Runtime
Querying the DOM to Find Elements
6
Profiling the Pixel Pipeline
The Pixel Pipeline
Identifying Bad Practices
Profiling Runtime Performance
Batching DOM Updates with Document Fragments
Too Many Nodes
7
Animation Using DOM Changes
Removing Nodes from the DOM
The Animation Frames
Our Animate Method
Our Working Animation!
Stopping the Animation
8
Planning DOM Changes with a State Model
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
Hmm, Things are Getting Messy
9
Easy Bundling
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
10
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 Rendering Our Chip Walls
11
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 ClassName and Adding Interactive Frames on DOM Events
Update Frames without Moving the Element on DOM Events
12
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
13
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
Challenge Solution: My Turn to build the Exit Screen
Hiding the Portal Behind a Wall
Removing DOM Event Listeners
14
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
15
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
Chapter 11
The Player Interacting with User Input
Content Locked
Section 9
Preventing Overlapping DOM Elements
When it comes to dumb manipulation, the state is what rules all the business logic. In this session, we will focus on the movement implementation by preparing an interactive framework. We will check whether the target position is going to be empty or not.
Previous Section
End of Section 9
Next Section