RxJS icon Launch Deal: Get $100 off the RxJS Kickstart Bundle now!

RxJS Masterclass is here. 2-course bundle - buy now (discount applied at checkout).

days
hours
mins
secs

JavaScript icon JavaScript DOM
New

Uncover the depths of the DOM and truly understand your daily JavaScript development.

JavaScript

JavaScript

Compatible with ES2015 (ES6)+

Course duration icon

Duration

49 lessons • 7 hours

What you'll learn

Master the Document Object Model (DOM) and build highly interactive websites and applications. Learn how to query and perform complex DOM operations, handle CSS and styling scenarios, compilation and templating through to forms and validation. You’ll deepen your understanding of DOM Elements, their properties and attributes, how to handle user input and events through to storing data in the browser and HTTP communication.

Requirements

  • HTML and CSS experience
  • JavaScript experience
  • jQuery experience

Here’s what’s covered...

Introduction

3 lessons

  • The Missing JavaScript DOM Introduction

    10:07

  • Setup Instructions

    Readme

  • Project Walkthrough and Install

    04:38

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

The Missing JavaScript DOM Introduction • 10:07

Todd Motto

Todd Motto

Google Developer Expert icon Google Developer Expert

$ 129 Sale 32% /per user

189 Total: $

Add to Cart

EU customers: price excludes VAT

Accepting MasterCard Accepting PayPal Accepting VISA Accepting Amex

Secure SSL encrypted payments

Todd 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. Perfect.

Elliott Porter

Elliott Porter

Full Stack Developer

5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating

This is the only course that did it for me. I've watched many videos and read many articles on JavaScript, but this course has the complete modern JavaScript ES6 package. Todd did a great job by simplifying the material.

Adebola Adesina

Adebola Adesina

JavaScript Developer

5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating

Absolutely fantastic courses. Self-paced, comprehensive, real examples from beginning to end, clear and concisely brilliant.

Jacob Cheriathundam

Jacob Cheriathundam

Development Architect

5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating

As 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

Nguyen Thanh Xuan

Software Engineer

5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating

Crystal clearly explained concepts, meticulously designed examples and projects! Fantastically valuable courses overall!

Yiling Lu

Yiling Lu

Senior Developer

5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating

The course really took me on. With very limited time, I managed to finish it and learn a great deal in only a few weeks.

Franco Zanki

Franco Zanki

JavaScript Developer

5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating

Got accepted for my first dev job a week ago! Not sure I'd have made it without these courses. My chances would've been lots slimmer without Ultimate Courses!

Mateusz Sapielak

Mateusz Sapielak

Systems Developer

5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating

The course was truly amazing. Every video is simple to understand and has subtitles. For a non-native English speaking person that’s a must in every course. Well done!

Roy Shang

Roy Shang

Developer

5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating 5/5 star rating

Or get the complete bundle...

Everything you need to start mastering JavaScript today

JavaScript Kickstart Bundle

2 courses

New
Angular icon

JavaScript Basics

65 lessons • 8 hours

Angular icon

JavaScript Masterclass

Est. 5 - 6 weeks

$ 199 Sale 23% /per user

258 Total: $

Add to Cart

EU customers: price excludes VAT

Most popular

JavaScript Master Bundle

5 courses

New
Angular icon

JavaScript Basics

65 lessons • 8 hours

New
Angular icon

JavaScript DOM

49 lessons • 7 hours

Angular icon

JavaScript Masterclass

Est. 5 - 6 weeks

Angular icon

JavaScript HTML5 APIs

Est. Coming soon

Angular icon

JavaScript Testing

Est. Coming soon

$ 249 Sale 61% /per user

645 Total: $

Add to Cart

EU customers: price excludes VAT

Accepting MasterCard Accepting PayPal Accepting VISA Accepting Amex

Secure SSL encrypted payments

100% money back guarantee

These courses are empowering thousands with expert knowledge - they will you too. If you're disappointed for whatever reason, you'll get every cent back.

Student/Location discounts

Not-so-good exchange rate? (i.e. India/Brazil) Get in touch for a coupon. Student? Email us from your student email or attach your student ID.

Get the full JavaScript bundle

I've created the best 5 course bundle on the internet. It will teach you everything you need to know about JavaScript.

Todd Motto's profile picture

Todd Motto

Google Developer Expert Google Developer Expert

  • Course category icon JavaScript Basics 65 lessons, 8 hours
  • Course category icon JavaScript DOM 49 lessons, 7 hours
  • Course category icon JavaScript Masterclass Est. 5 - 6 weeks
  • Course category icon JavaScript HTML5 APIs Est. Coming soon
  • Course category icon JavaScript Testing Est. Coming soon

Get the entire collection, 4 more courses, for just $120 extra!