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.
► Download unlimited photos, fonts, and templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_BGkc6dKUZ84&utm_medium=referral&utm_source=youtube.com&utm_content=description

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:

• Mozilla Development Network: https://developer.mozilla.org
• MDN DOM: https://developer.mozilla.org/docs/Web/API/Document_Object_Model
• MDN HTML DOM: https://developer.mozilla.org/docs/Web/API/HTML_DOM_API
• MDN Event Listing: https://developer.mozilla.org/docs/Web/Events#event_listing

Read more about JavaScript DOM manipulation on Envato Tuts+: https://code.tutsplus.com/articles/dom-manipulation–cms-107159?utm_campaign=yt_tutsplus_BGkc6dKUZ84&utm_medium=referral&utm_source=youtube.com&utm_content=description

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_BGkc6dKUZ84&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_BGkc6dKUZ84&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/envato
► Follow Envato on Facebook: https://www.facebook.com/envato
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –