![Learn DOM Manipulation with Easy Modern JavaScript [Video]](https://static.packt-cdn.com/products/9781801810180/cover/smaller)
Learn DOM Manipulation with Easy Modern JavaScript [Video]
- FREE Subscription Read for free
- $84.99 Video Buy
- $12.99 Video + Subscription Buy
-
What do you get with a Packt Subscription?
- Instant access to this title and 7,500+ eBooks & Videos
- Constantly updated with 100+ new titles each month
- Breadth and depth in over 1,000+ technologies
-
Free ChapterWelcome
-
DOM Fundamentals
-
Code DOM Adventure
-
Creating Elements
-
Dynamic CSS
-
Profiling the Pixel Pipeline
-
Animation Using DOM Changes
-
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
-
Easy Bundling
-
DOM Updates with Basic State-Driven Development
-
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
-
Interactive DOM, Breaking 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
- Challenge Solution: My Turn to build the Exit Screen
- Hiding the Portal Behind a Wall
- Removing DOM Event Listeners
-
Animating All the Things
-
DOM Sound Effects
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.
- Publication date:
- July 2021
- Publisher
- Packt
- Duration
- 7 hours 20 minutes
- ISBN
- 9781801810180
Download code from GitHub
4