JavaScript: Enhancing the DOM (2013)

The Document Object Model (DOM) is at the core of every HTML page. In order to develop dynamic HTML pages, a front-end developer needs to understand how JavaScript connects to and controls the DOM, allowing you to create, modify, delete, and edit existing page content. This course focuses on helping you understand the DOM elements, and shows the different ways JavaScript gives you access to them and makes it easier to work with the DOM. Author Ray Villalobos covers navigating the DOM, selecting elements, modifying HTML attributes, editing nodes, and much more.

Introduction 2m 36s
Welcome 59s
What you should know before watching this course 50s
Using the exercise files 47s

1. Getting Started 24m 33s
What is the Document Object Model (DOM)? 3m 2s
Navigating the DOM with developer tools 8m 10s
Testing JavaScript commands with the console 5m 50s
Communicating with the console through JavaScript 7m 31s

2. Selecting the DOM 31m 9s
Selecting elements with getElementById 4m 10s
Choosing elements by HTML tag 3m 20s
Isolating elements by class name 3m 12s
Querying CSS to select elements 4m 54s
Working with named form elements 3m 39s
Understanding nodeType, nodeName, and nodeValue 4m 30s
Traversing up and down DOM nodes 4m 40s
Targeting node elements 2m 44s

3. Modifying DOM Attributes and Content 22m 25s
Changing HTML attributes 5m 25s
Working with restricted attributes 2m 49s
Detecting data attributes 3m 29s
Controlling classes with the HTML5 classList 3m 21s
Targeting the attributes property 1m 24s
Using text content modifiers 3m 42s
Modifying elements as text 2m 15s

4. Inserting and Deleting Nodes 14m 57s
Creating and appending nodes 4m 27s
Controlling node insertions with insertBefore 3m 17s
Cloning and removing nodes 4m 41s
Replacing existing nodes 2m 32s

5. The DOM in Action 26m 14s
What we'll build 2m 16s
Adding a bubbling event listener 4m 11s
Creating and styling an overlay with JavaScript 4m 39s
Adding an image 3m 48s
Resizing images in the DOM 2m 59s
Centering an image 2m 36s
Handling clicks 1m 29s
Adjusting for scrolling 1m 36s
Detecting and adjusting for a window resize 2m 40s

Conclusion 1m 49s
Next steps 1m 49s