JavaScript and the DOM Course (How To)

The Browser Environment

The environment that JavaScript runs in has a fundamental effect on what it can do. In this stage, we'll explore the browser environment and how it allows you to access and change different parts of a web page with JavaScript.

• Interactive Web Pages with JavaScript

  4:18

• What is the DOM?

  5:33

• The Browser's Global window Object

  4:35

• Accessing the DOM

  6:03

• Introduction to Browser Events

  7:43

• The Browser Environment Review

  6 questions

Getting a Handle on the DOM

The first step of making a web page interactive involves identifying an element for the browser to find and make it available to do something using JavaScript. There are several ways to access specific elements in the DOM. Let's explore those you are likely to use most often.

• Select an Element by ID

  6:21

• Select by ID

  2 objectives

• Select Elements by Tag Name

  7:40

• Select by Tag Name

  1 objective

• Select Elements by Class Name

  3:48

• Selection Review

  5 questions

• Use CSS Queries to Select Page Elements

  6:10

• Getting a Handle on the DOM Review

  5 questions

• Return Elements Using CSS Selectors

  3 objectives

Making Changes to the DOM

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

• Get and Set Content with textContent and innerHTML

  8:00

• Change Element Attributes

  5:50

• Modifying Elements

  2 objectives

• Set Inline Styles with the style Property

  9:38

• Create New DOM Elements

  4:35

• Review Attributes and Element Creation

  5 questions

• Append Nodes

  4:52

• DOM Manipulation Review

  3 questions

• Insert HTML at Specified Positions

  3:39

• Remove Nodes

  4:20

• Review Appending and Removing Nodes

  5 questions