Learn DOM Manipulation with Easy Modern JavaScript

Learn DOM Manipulation with Easy Modern JavaScript

by Juan Lizarazo
Released July 2021
Publisher(s): Packt Publishing
ISBN: 9781801810180

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

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.

What You Will Learn

  • Understand what DOM is and how to interact dynamically with an HTML document
  • Learn interactive User Interfaces(UI) development
  • Learn optimization techniques
  • Apply easy bundling techniques that include dynamic CSS loading
  • Interact with the DOM and user input through event listeners
  • Enhance object-oriented programming concepts and skills

Audience

This course is for coding bootcamp graduates, computer science graduates, beginner JavaScript students, intermediate JavaScript students, and advanced JavaScript students. It is a beginner and intermediate-friendly course.

About The Author

Juan Lizarazo: Juan Lizarazo is a software engineer based in Salt Lake City, Utah, with a focused background in web app development, cloud, leadership, team scaling, and distributed applications. He is also a software engineering instructor, who has experience in teaching computer science-related topics such as data structures and algorithms to students all over the US. He has made contributions to open-source, talked at conferences, and answered questions on Stack Overflow.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Welcome
    1. What is the DOM?
    2. Your First DOM Update
    3. Course Project: Code DOM Adventure
  2. Chapter 2 : DOM Fundamentals
    1. HTML and the DOM
    2. DOM Standards
    3. The BOM
    4. The CSSOM
    5. The Tree (Data Structure)
    6. The DOM Tree
    7. The DOM and JavaScript
  3. Chapter 3 : Code DOM Adventure
    1. App Architecture
    2. Challenge Solution: The Exit Screen
    3. App Skeleton
    4. The Splash Screen File
    5. Including the Assets
  4. Chapter 4 : Creating Elements
    1. Wiring the Splash Screen Element
    2. Creating Elements at Runtime
    3. Appending HTML Strings Width Append()
    4. Appending Nodes with Append or AppendChild
    5. Script Order Matters
  5. Chapter 5 : Dynamic CSS
    1. Specifying Classes to Elements
    2. Working with Static Styles
    3. Defining Styles at Runtime
    4. Querying the DOM to Find Elements
  6. Chapter 6 : Profiling the Pixel Pipeline
    1. The Pixel Pipeline
    2. Identifying Bad Practices
    3. Profiling Runtime Performance
    4. Batching DOM Updates with Document Fragments
    5. Too Many Nodes
  7. Chapter 7 : Animation Using DOM Changes
    1. Removing Nodes from the DOM
    2. The Animation Frames
    3. Our Animate Method
    4. Our Working Animation!
    5. Stopping the Animation
  8. Chapter 8 : Planning DOM Changes with a State Model
    1. Let's Build the Level!
    2. 2. Our State Model to Control the DOM from State.
    3. Normalizing Attributes
    4. Our Level Class
    5. Arrays, References, and Non-Iterable Empty Slots
    6. Building Our State with an Ugly Oneliner
    7. Write Code for Humans and Normalize Your Code
    8. Rendering the Level Element
    9. Hmm, Things are Getting Messy
  9. Chapter 9 : Easy Bundling
    1. Easy Bundling
    2. Bundle with the Start Script
    3. Our Dev Server
    4. Let's Use DOMContentLoaded and ES Modules (ESM)
    5. Dynamic Style Elements with CSS as ESM Imports
  10. Chapter 10 : DOM Updates with Basic State-Driven Development
    1. Designing the Shape of Our State
    2. Initializing Our State in Preparation to Render DOM Elements
    3. DOM Updates from State
    4. Updates to State are Reflected in the DOM
    5. Modeling and Rendering Our Chip Walls
  11. Chapter 11 : The Player Interacting with User Input
    1. The Player - Tech Approach
    2. Rendering the Player with the DOM
    3. Box Model and Global Styles
    4. Manipulating Inline Styles with the DOM
    5. Moving the Player by Changing its State
    6. DOM Keyboard Event Listeners
    7. Mapping and Filtering DOM Events Data
    8. Can the Player Move? - Tech Approach
    9. Preventing Overlapping DOM Elements
    10. Prepare Interactive Frames
    11. Resetting ClassName and Adding Interactive Frames on DOM Events
    12. Update Frames without Moving the Element on DOM Events
  12. Chapter 12 : Interactive DOM, Breaking Walls
    1. Adding Random DOM Elements
    2. DOM Events When Pressing the Space Key
    3. Creating Elements on DOM Events
    4. Z-Index Manifest
    5. Dynamic Element IDs with the DOM
    6. Interacting with Other Elements Using the State Model
    7. Remove Surrounding Walls
  13. Chapter 13 : Portal to Exit the Game
    1. Adding the Portal to the Screen
    2. Random Elements on the Screen
    3. Grouping Inline CSS DOM Updates
    4. Exiting the Game When Two Elements Cross Paths
    5. Challenge: Your Turn to Build the Exit Screen
    6. Challenge Solution: My Turn to build the Exit Screen
    7. Hiding the Portal Behind a Wall
    8. Removing DOM Event Listeners
  14. Chapter 14 : Animating All the Things
    1. Rendering the Splash Screen
    2. Swapping Screens
    3. Animating the Portal
    4. CSS Kit – Animations
    5. Request Animation Frame and Delaying Animations
    6. Animating with a Parent CSS Class
    7. Old TV Effect
    8. Animating with Delayed Animation
    9. Optimizing Frames
    10. Final Frame Optimizations
  15. Chapter 15 : DOM Sound Effects
    1. Dynamic Audio Elements
    2. Interactive Sound Effects with DOM Events
    3. Delayed Audio Effects with Callbacks and DOM Events
    4. Final Lecture, Final Sound Effect! Exiting the Game

Product information

  • Title: Learn DOM Manipulation with Easy Modern JavaScript
  • Author(s): Juan Lizarazo
  • Release date: July 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781801810180