Author
Released
6/10/2013- What is the DOM?
- Choosing and isolating elements
- Traversing up and down DOM nodes
- Changing HTML attributes
- Modifying elements as text
- Creating and appending nodes
- Cloning and removing nodes
- Adding a bubbling event listener
- Adding and resizing images
- Handling clicks
Skill Level Intermediate
Duration
Views
(exciting music) - [Voiceover] Hey there, I'm Ray Villalobos and welcome to JavaScript Enhancing The DOM. In this course, I'm going to show you how the Document Object Model is tightly integrated into JavaScript. I'll start by showing you how the developer tools work in Google Chrome and how to test commands with the JavaScript console. Then, you'll learn to select notes by ID, last name, and with the new query selector. I'll show you how to modify regular, restricted, and HTML5 data attributes in DOM elements.
Next, we'll learn to create, append, clone, replace, and remove existing notes. Finally, we'll build a project that utilizes what you've learned by building a pop-up. We'll create an overlay with a centered image, style it via JavaScript, and handle events like clicks, scrolling, and re-sizing the document window. If you're looking to master how you can control elements in your document through JavaScript, then this is the course for you, so, let's get started.
Related Courses
-
CSS: Page Layouts (2012)
with James Williamson8h 57m Beginner
-
Introduction
-
Welcome55s
-
-
1. Getting Started
-
2. Selecting the DOM
-
Targeting node elements2m 44s
-
3. Modifying DOM Attributes and Content
-
Changing HTML attributes5m 25s
-
Detecting data attributes3m 29s
-
Using text content modifiers3m 42s
-
Modifying elements as text2m 15s
-
-
4. Inserting and Deleting Nodes
-
Creating and appending nodes4m 27s
-
Cloning and removing nodes4m 41s
-
Replacing existing nodes2m 32s
-
-
5. The DOM in Action
-
What we'll build2m 16s
-
Adding an image3m 48s
-
Resizing images in the DOM2m 59s
-
Centering an image2m 36s
-
Handling clicks1m 29s
-
Adjusting for scrolling1m 36s
-
-
Conclusion
-
Next steps1m 49s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Welcome