![DOM 2023 - Using the DOM and JavaScript to Build Dynamic Websites [Video]](https://content.packt.com/V18926/cover_image_small.jpeg)
DOM 2023 - Using the DOM and JavaScript to Build Dynamic Websites [Video]
Video
Subscription
FREE
Video + Subscription
$29.99
Video
$29.99
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with Video + Subscription?
Download this video in MP4 format, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Access this title in our online reader
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
Subscription
FREE
Video + Subscription
$29.99
Video
$29.99
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with Video + Subscription?
Download this video in MP4 format, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Access this title in our online reader
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
-
Free ChapterPart 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
-
Part 1 - JavaScript Versus DOM
-
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
-
Part 1 - Nodes
-
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
-
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
-
Part 1 - Where to Next?
-
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
-
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
-
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
-
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 ...
-
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()
-
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
-
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
-
Part 2 - Outro
About this video
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
- Publication date:
- May 2022
- Publisher
- Packt
- Duration
- 14 hours 52 minutes
- ISBN
- 9781804619575
Download code from GitHub