JavaScript DOM Manipulation Mastery: A Comprehensive Guide

The Document Object Model is the glue that brings your HTML, CSS, and JavaScript together, making it possible to develop rich user interfaces for your pages and applications. Learn how to manipulate the DOM in this comprehensive new course with Jeremy McPeak.

If you already understand the basics of JavaScript, it's time to take your skills to the next level. In this course, you'll explore the ins and outs of manipulating the browser DOM in JavaScript. The DOM (Document Object Model) lets you dynamically modify and change the content of your web page in response to user action or other events.

Here's what you'll learn in this JavaScript DOM manipulation course:

1 Introduction

1.1 Introduction 00:00:00
Meet your instructor, Jeremy McPeak, and see what you'll learn in this course about how to use JavaScript to manipulate the DOM.

2 DOM Fundamentals

2.1 What Is the DOM? 00:01:16
Before we begin, it's important to briefly go over what the DOM is and how it is structured.

2.2 Getting Elements in the Document 00:10:36
One of the most fundamental things you need to know is how to get elements in the document so that you can work with them. You'll learn about the basic "get" elements in this lesson.

2.3 Querying the Document 00:19:31
The "get" methods are rather limited in functionality. More often than not, the "query" methods are a better option for finding elements in the document.

2.4 Creating and Adding Elements 00:25:53
The DOM gives us the ability to create HTML elements on the fly and add them to the page. You'll learn how to do that in this lesson.

2.5 Removing Elements 00:37:51
If you can add elements, you obviously can remove them. Yep, you'll learn how in this lesson.

2.6 Modifying Element Classes 00:44:13
You've learned how to use the `style` property to change individual CSS properties on an element, but changing CSS classes are typically a better option for manipulating style. You'll learn how in this lesson.

2.7 Working With Attributes 00:54:03
Working with attributes is probably one of the most powerful things the DOM lets us do. You'll learn why and how in this lesson.

2.8 DOM Event Basics 01:04:46
The most important thing the DOM lets us do is react to the user by exposing an event layer. You'll learn the basics of handling events in this lesson.

2.9 Using Event Delegation and the Event Object 01:13:35
You definitely need to understand event delegation in order to write efficient event-handling code. We'll talk about how to do that.

3 Conclusion

3.1 Conclusion 01:24:08
Thank you so much for watching this course. By the end, you have a thorough understanding of how to manipulate the DOM with JavaScript. Here are some useful resources:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[maykrpc]

It's realy rare to se a easy and simple explanation like that, i feel like people make things too difficult without need, this video was almost perfect, thank you!

[shehnazameer]

I was so much confuse about the DOM manipulation and not a tutorial or a site help me to understand Dom concept but this Guy explain everything with so much detail and simple way that everything is now simple clear❤
Thank you for explaining all this ❤

[willwill]

As clear as crystal, take you by the hand. Content well organized and simplified for first time learners.

[andreisavitski]

Perfect content! You are a great example of a person who has a true talent and ability of explaining and teaching stuff to people. Amazing, thank you so much!

[dwhnbko]

Thank you so very much! I'm struggling with JavaScript and manipulating the DOM. After watching your video, everything is much clearer! 😄

[partiKhana]

Thank you for sharing your knowledge. I learned a lot. I will come back again and re-watch this.

[swiftsizzles]

How excellent this video is but did not get that much attention and reactions. god bless u for sharing your knowledge.

[bobmichael]

what's the name of the app that he uses to highlight?

[azharmansoori]

Really amazing I have learned a lot.. thank-you.

[echdjsn]

i have a question instead of putting my js at the bottom can i put it in the head and use defer on it ? something like this <script src="your-script.js" defer></script> in
the head

[giannisem]

why does your talking voice sound autotuned?

[ssgtjoegross]

Bootstrap dark theme did not set to dark.