JavaScript and the DOM

The Browser Environment

The environment that JavaScript runs in — like a browser, or a server, or even an embedded computer — has a fundamental effect on what it can do. In this stage we'll explore the browser environment, and see how JavaScript can change a webpage right before our eyes. 5 steps

• Welcome and Overview 4:22
• Thinking Globally 6:42
• What is the DOM? 2:07
• Recap 1:37
• The Browser Environment Review 5 questions

Getting a Handle on the DOM

The first step of making a web page interactive is grabbing ahold of elements you want the user to interact with. This is called selection. There are a number of ways to select elements on a web page. Let's explore those you are likely to use most often. 11 steps

• A Simple Example 4:12
• Select a Page Element By Its ID 5:59
• Selecting by Id 2 objectives
• Select All Elements of a Particular Type 6:08
• Selecting Elements with the Same Class Name 2:48
• Selection Review 5 questions
• Using CSS Queries to Select Page Elements 4:50
• Selecting Multiple Elements 1 objective
• Learning More 3:48
• DOM Selection - More Review 4 questions
• Practice Selecting Elements 3 objectives

Making Changes to the DOM

Once we've selected an element in the DOM, we can read or affect it. We can replace or change the display of text, for example. Or we can create new nodes and insert them into the DOM. Let's learn about and get some practice with some of these actions. 11 steps

• Getting and Setting Text with textContent and innerHTML 6:58
• Changing Element Attributes 2:56
• Modifying Elements 2 objectives
• Styling Elements 9:09
• Creating New DOM Elements 4:41
• Style and Element Creation 5 questions
• Appending Nodes 3:33
• DOM Manipulation 3 objectives
• Removing Nodes 3:46
• Removing an Element from the DOM 3 objectives
• Appending and Removing Nodes 5 questions

Responding to User Interaction

Now we'll get to "teach" an element to behave a certain way when a user interacts with it. For example, we could have a form field turn red if a user enters invalid text. Or a menu could appear if a user clicks on the menu bar. Let's look at these and other behaviors we can set up on a web page. 10 steps

• What is an Event? 2:05
• Functions as Parameters 4:27
• Delaying Execution with setTimeout() 2:35
• Events and Functions as Parameters Review 5 questions
• Listening for Events with addEventListener() 7:49
• Adding an Event Listener 3 objectives
• Event Bubbling and Delegation 4:05
• Event Listening, Bubbling and Delegation 5 questions
• The Event Object 6:45
• Event Delegation 1 objective

Traversing the DOM

You have your hands on one element, but you want to grab another one nearby. You could go all the way back out to the document and call to it from there, but chances are your node already has a reference to it. Let's learn how to get around in, or traverse, the DOM. 11 steps

• Using parentNode to Traverse Up the DOM 7:02
• Parent Traversal 2 objectives
• Using previousElementSibling and insertBefore 7:49
• Traversal Review 5 questions
• Challenge: Using nextElementSibling 0:37
• Solution: Using nextElementSibling 1:56
• Sibling Traversal 1 objective
• Getting All Children of a Node with children 5:39
• Getting the First and Last Child 3:22
• DOM Traversal - More Review 5 questions
• Child Traversal 2 objectives