JavaScript: Enhancing the DOM

Learn to modify the DOM (Document Object Model), one of the core components of every HTML page, with JavaScript.

Introduction

• Welcome
• What you should know before watching this course
• Using the exercise files

1. Getting Started

• What is the Document Object Model (DOM)?
• Navigating the DOM with developer tools
• Testing JavaScript commands with the console
• Communicating with the console through JavaScript

2. Selecting the DOM

• Selecting elements with getElementById
• Choosing elements by HTML tag
• Isolating elements by class name
• Querying CSS to select elements
• Working with named form elements
• Understanding nodeType, nodeName, and nodeValue
• Traversing up and down DOM nodes
• Targeting node elements

3. Modifying DOM Attributes and Content

• Changing HTML attributes
• Working with restricted attributes
• Detecting data attributes
• Controlling classes with the HTML5 classList
• Targeting the attributes property
• Using text content modifiers
• Modifying elements as text

4. Inserting and Deleting Nodes

• Creating and appending nodes
• Controlling node insertions with insertBefore
• Cloning and removing nodes
• Replacing existing nodes

5. The DOM in Action

• What we'll build
• Adding a bubbling event listener
• Creating and styling an overlay with JavaScript
• Adding an image
• Resizing images in the DOM
• Centering an image
• Handling clicks
• Adjusting for scrolling
• Detecting and adjusting for a window resize

Conclusion

• Next steps