Book Image

DOM 2023 - Using the DOM and JavaScript to Build Dynamic Websites [Video]

By : SkillZone .
Book Image

DOM 2023 - Using the DOM and JavaScript to Build Dynamic Websites [Video]

By: SkillZone .

Overview of this book

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. All the resources for this course are available at https://github.com/PacktPublishing/DOM-2022---Using-the-DOM-and-JavaScript-to-Build-Dynamic-Websites

Related Content you might be interested in

Current Title:

Small book image
DOM 2023 - Using the DOM and JavaScript to Build Dynamic Websites [Video]
SkillZone .
May, 2022 | 14 hours 52 minutes
No titles found
Table of Contents (15 chapters)
Free 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
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
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
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
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
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
7
Part 1 - Where to Next?
Course Outro
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
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
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
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 ...
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()
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
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 <input> within a <form> Element
What Is the toLowerCase() Method?
Accessing our <li> Tags and Introduction to the Array.from() Method
Introduction to the Array.from() Method
How Does Array.from() Work - Some Practical Examples
Using forEach() to Loop Through Our Groceries Array
Introduction to indexOf()
Using indexOf() Method with Arrays
Using indexOf() Method with Strings
Finishing Off Our Search Functionality
Improvement: Clear the <input>Text When the User Clicks a Button
Improvement: Let's Add Tabs
Improvement: Building Our Tabs (HTML + CSS)
What is the data* Attribute?
Using the classList API to Add Dynamic Classes to Our Heading Tabs
Improvement: Showing and Hiding Our Panels When the Heading Tab Is Clicked
Improvement: Adding a Button for Our Answer
15
Part 2 - Outro
Where to Next?
Chapter 6
Part 1 - Creating, Removing, and Cloning DOM Elements
Content Locked
Section 13
removeChild()
The removeChild() method in the DOM is used to remove a specified child node of the given element. In order for you to use this method, you have to call the method on the parent of the element you are wanting to remove. And lastly, this method returns the removed node as a node object or null if the node doesn’t exist.
Previous Section
End of Section 13
Next Section