From the beginning to the end, learn and master the DOM (Document Object Model) in simple steps
About This Video
In Detail
In the first half of the course, we will cover …
From the beginning to the end, learn and master the DOM (Document Object Model) in simple steps
About This Video
In Detail
In the first half of the course, we will cover everything you need to start coding dynamic sites by yourself. It gives you the sound fundamentals and essential practical regarding the DOM. You will emerge from part 1 with a basic understanding and practical experience. It will take you to the point where you will understand what the DOM is, why we need it, how to access it, where to find it, and how to manipulate it. By the end of part 1, you will have learned about front-end web development by mastering the Document Object Model.
The second half of the course provides a whole different world of fun with amazing practical examples that will captivate you and catapult you to the next level and set you well on your way to becoming a true Grandmaster in front-end web development. By the end of part 2, you will have learned more about front-end web development by working with events in the Document Object Model.
By the end of this course, you will be able to “speak” and “walk” DOM by gaining an understanding of how you can manipulate it in meaningful and practical ways.
Audience
It makes no difference where you are on your web development path. This course is appropriate for all skill levels.
If you want to become a full-stack web developer or construct dynamic, fascinating, and acclaimed websites, this course is for you.
Basic HTML, CSS, and JavaScript will be useful, but they are not required.
Chapter 1 : Part 1 - Introduction
Welcome to the Course
Introduction
Everything Is an Object
Building Our Own Simple Page
DOM Hierarchy
DOM Hierarchy Conclusion
What Is the BOM?
DOM Versus JavaScript Versus Python
The DOM Is not the Same as Your HTML
The DOM Is not What You See in the Browser
The DOM Is not What You See in DevTools
Pseudo Elements
Summary: What Is the DOM?
What Can We Do with the DOM?
Quick Example of Changing the DOM
Chapter 2 : Part 1 - JavaScript Versus DOM
What Is the DOM API?
JavaScript Lives in Different Environments
Let’s Build a setTimeout() Function
setTimeout - JavaScript Versus DOM
The DOM Was not Solely for JavaScript
Chapter 3 : Part 1 - Accessing the DOM
Section Introduction
Accessing the DOM - Introduction
Understanding Your HTML
Let’s Build Our Page for this Section
getElementById()
getElementById() Recap
getElementsByClassName()
Test: Introduction
Test: Building Our Test Code
Solution
getElementsByTagName()
querySelector - Introduction
querySelector - Practical Example
Summary
Chapter 4 : Part 1 - Nodes
Nodes - Section Introduction
Nodes - Introduction
Nodes in Action
childNodes - How Do We See Nodes?
Creating Different Nodes
What Are the Different Types of Nodes?
Node - Family Tree
Identifying Nodes
HTMLCollection Versus NodeList
Live Versus Static lists
Chapter 5 : Part 1 - Traversing the DOM
Section Introduction
Traversing the DOM - Introduction
Building Our Section Page Together
Why Do We Need to Traverse the DOM?
The Three Most Important Objects in the DOM
Parent, Child, and Siblings - A Quick Introduction
Parent Node
Siblings in the DOM
firstChild, lastChild, and Children - Introduction
firstChild, lastChild, and Children - Practical Example
Children Property
childNode Versus Children - What Are the Differences?
Test - Node Types
Test - Solution
Siblings - A Quick Word
Working with Sibling Methods
Summary of Traversing the DOM
Chapter 6 : Part 1 - Creating, Removing, and Cloning DOM Elements
Section Introduction
Static Versus Dynamic Websites
How Do You Create Elements
Document Versus Document
Understanding the createElement() Method
Let’s Attach Our Element to the DOM
Using the textContent Property to Add Text to Our Newly Created Element
How Does appendChild Work?
insertBefore() Method
Is There an insertAfter() Method?
Let’s Trick the insertBefore() Method
How to Remove Elements
removeChild()
remove()
It’s Time to Clone
Clone Example Using setInterval()
Let’s Analyze Our Clone Code
Test Your Skills
Test - Solution
Chapter 7 : Part 1 - Where to Next?
Course Outro
Chapter 8 : Part 2 - Introduction to Events
introduction
Introduction - What Is an Event
The Two Most Important Things When It Comes to Events
Inline Event Listeners - Brief Introduction
Inline Properties - Brief Introduction
addEventListener() Method - Brief Introduction
Summary - the Three Ways to Add an Event Listener to HTML Elements
A Quick Word on Events
Inline Event Listeners - Detailed Overview
Inline Event Listeners - Test Introduction (Part 1 of 3)
Inline Event Listeners - Test Setup (Part 2 of 3)
Inline Event Listeners - Test Solution (Part 3 of 3)
Inline Properties - Detailed Overview
Inline Properties - Test Introduction (Part 1 of 3)
Inline Properties - Test Setup (Part 2 of 3)
Inline Properties - Test Solution (Part 3 of 3)
addEventListener() Method - Detailed Overview
Callback Functions - A Quick Overview
addEventListener - Test Introduction (Part 1 of 3)
addEventListener - Test Setup (Part 2 of 3)
addEventListener - Test Solution (Part 3 of 3)
Extra Lecture - Three Ways to Define a Color
Extra Lecture - Digits, Bytes, and Hexadecimal Format
Extra Lecture - toString() Method
Chapter 9 : Part 2 - Different Types of Events
Section Introduction
Quick Click Event Example - Part 1 of 2
Quick Click Event Example - Part 2 of 2
Event Types
Keydown Event - Example
Form Events - Introduction
Overview of What Form We Will Build
Form: Building Our Page - HTML + CSS
How to Find Forms and Its Default Behavior
Input Event, Focus Event, and Copy/Paste Events
Touch and Window Events
Chapter 10 : Part 2 - Event Challenges
Introduction
Challenge 1 - Introduction
Challenge 1 - Click Image and Display Text
Challenge 2 - Introduction
Challenge 2 - Reveal Text When Mouse Moves over Image
Challenge 2 - Create a Black Dot When Mouse Moves over Image
Challenge 2 - Dynamic Dot Movement and Complete Solution
Challenge 3 - Mustache
Challenge 3 - Placing a Mustache on an Image
Chapter 11 : Part 2 - Object and Node Hierarchy
Section Introduction
JS objects Versus DOM Objects in the Console
Host Versus Native Objects
The Importance of Understanding Inheritance
Finding the createElement() Method
Element Node - Object Hierarchy
Quick Recap on Object Hierarchy
What Is DOM Extension?
Adding Our Own DOM Extension - Practical Example
Are DOM Extensions a Good Thing?
The Problems with DOM Extensions Are…
Chapter 12 : Part 2 - Capturing and Bubbling
Section Introduction
An Event Is not an Isolated Occurrence
The Two Phases of an Event - Capturing and Bubbling
How to Listen to an Event During the Capturing Phase
Example – Let’s Listen to an Event During Both Phases
Example - Capturing and Bubbling Using the for … of Loop
Who Cares about Capturing Versus Bubbling?
How to Stop Event Capturing and Event Bubbling?
Example of stopPropagation()
Chapter 13 : Part 2 - Event Delegation and Challenges
Event Delegation Introduction
Box Challenge - Introduction
Box Challenge - Build
Box Challenge - Solution
What Is the classList Property?
Box Challenge - Perfecting Our Solution
Quote Challenge - Introduction
Quote Challenge - Build
Quote Challenge - Solution
List Challenge - Introduction
List Challenge - Build
List Challenge - Solution
Chapter 14 : Part 2 - Website Project - A Shopping List
What Are We Going to Build?
High-Level Overview of the Website Structure
Building Our Website HTML
Coding the CSS for the Header
Coding the CSS for the Form and List Section
DOM Access Methods, the forEach Method, and Nodes - Quick Recap
Removing Items - The Old-School Way
Removing Items - Using Event Bubbling and Event Delegation
Introduction to Dealing with Forms
Default Behavior with Forms and How to Prevent Default Behavior
Adding Items to Our List - Creating Elements Dynamically
Adding Items to Our List - Adding Classes with the classList API
Hiding and Un-Hiding Our Shopping List
Recap of the Different Event Listeners We Have Already Dealt With
Accessing an within a Element