JavaScript DOM 
47 lessons
•7 hours
•
4.9/5 (6329 ratings)
JavaScript DOM
Uncover the depths of the DOM and truly understand your daily JavaScript development.
8
Chapters47
Lessons7
Hours
Closed Captions in English
Updating State via Event Delegation • 15:21
An excellent dive into JavaScript DOM, yet another stellar course - thoughtfully presented. Five stars all the way.
James Duffy
Full Stack EngineerThis felt like sitting in on a working JavaScript programmer as he was working through various parts of a program. For me, that really worked. Many of the concepts that seemed complex before became understandable.
Bruce Peters
Owner and Developer, Just Loans Inc.Best way to learn DOM interaction for JavaScript! I am a big fan of Todd Motto, I have been following him since his Angular classes are introduced.
Krishna Prasad
Front-End DeveloperI have been waiting for JavaScript DOM for a long time, and understand now why it took long to craft it. It's complete, precise, thanks so much!
Nicolas Devaux
Tech Lead Developer, NaxosWas the perfect JavaScript intro 7 months ago. Now with an dev internship under my belt, I revisited at 2x speed and filled in some gaps.
Chris Archer
Developer Intern, Gemini SocietyAs a complete beginner, this course was perfect for me. I now feel super confident in my JavaScript skills. Thank you very much Todd, for this clear and comprehensive course.
Nguyen Thanh Xuan
Software EngineerI have 30+ years as software programmer, and found JavaScript Basics very well explained and easy to follow alone.
Hishmad Amudi
CTO, PT. Global Kreasi DanaTodd is the master of JavaScript - as we all know! This course is so clear and well presented. I’ve learned so much from these lessons and will refer back to them forever.
Elliott Porter
Full Stack DeveloperThe way JavaScript should be taught from the start. I've watched it 3 times and learn more each time.
Franco Zanki
JavaScript DeveloperHere's what's inside...
Everything you need, structured and ready to go.
Introduction
3 lessons
- The Missing JavaScript DOM Introduction
10:07
- Setup Instructions
Readme
- Project Walkthrough and Install
04:38
The Missing JavaScript DOM Introduction 
Setup Instructions DOM Events and JavaScript Loading
2 lessons
- Understanding DOM Loading Events
09:55
- Understanding JavaScript Loading
05:22
DOM Nodes In-Depth
10 lessons
- DOM Nodes Explained
14:35
- Creating DOM Nodes
06:45
- Changing Content of DOM Elements
09:22
- innerHTML versus createElement
11:18
- Using DocumentFragments
07:46
- Inserting DOM Elements
08:26
- Inserting DOM as String Templates
06:11
- Replacing DOM Elements
05:19
- Cloning DOM Elements
04:56
- Removing DOM Elements
04:01
Querying and Traversing the DOM
6 lessons
- Querying DOM Nodes (HTMLCollections)
11:09
- Querying DOM Nodes (NodeLists)
08:10
- Looping over DOM Elements
06:34
- Finding Child Elements
09:24
- Finding Parent Elements
03:51
- Finding Sibling Elements
05:06
Attributes, Styles and Classes
4 lessons
- Element Properties versus HTML Attributes
07:01
- Setting and Getting HTML Attributes
05:09
- Setting and Getting Inline Styles
07:12
- Setting and Getting Classes
09:33
Events and Event Listeners
6 lessons
- Adding Event Listeners and Event Object
12:30
- Removing Event Listeners
07:10
- Event Bubbling, Capturing and Propagation
12:31
- Preventing Default Event Actions
11:09
- Event Delegation and Dynamic Events
13:13
- Keyboard Events
10:37
Forms and Events
8 lessons
- Accessing Forms and Elements
11:00
- Form Submit Event and FormData
11:41
- Transforming FormData for the Server
16:30
- Posting FormData via Fetch API
05:50
- Handling Input Elements
10:46
- Handling Radio Input Elements
11:53
- Handling Checkbox Input Elements
07:53
- Handling Select Elements
13:18
Project Build
10 lessons
- Setup Instructions
Readme
- Project Setup and Install
04:03
- Structuring our HTML Template
04:25
- State Initialization and Submit Events
06:48
- Rendering State with Template Literals
07:54
- Updating State via Event Delegation
15:21
- Deleting Items from State
06:57
- Toggling UI State and Filtering Collections
07:18
- Persisting State to LocalStorage
09:04
- Dynamic DOM Injection and Editing
17:55
Get the complete package...
Everything you need to start mastering JavaScript today
Expert knowledge
Built by Google Developer Experts, there's no better place to learn.
All the best practices
Design patterns, battle-tested techniques, architecture and performance.
Stream or download
Learn at home at your own pace, download for offline viewing.
Level up your career
Nail that interview or promotion with skills that will set you apart.
StackBlitz Embeds
Access full source code, and experiment live in the browser.
Private Slack Group
Exclusive access to our members-only community (7,000+ members).
JavaScript DOM
JavaScript Kickstart Bundle
30-day money back guarantee
If you're disappointed for whatever reason, you'll get a full refund (but I'm sure you won't need it).
Location discounts and students
Not-so-good exchange rate? (i.e. India/Brazil). Student?
Email us for a coupon for your country or student ID.
•
