Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Treehouse

JavaScript and the DOM Course (How To)

via Treehouse

Overview

JavaScript lets you create interactive web pages which can respond to a user's actions. In this course, you'll learn how to bring web pages to life using the power of JavaScript.

Syllabus

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.

Chevron 6 steps
  • 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.

Chevron 9 steps
  • 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.

Chevron 11 steps
  • 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

Taught by

Guil Hernandez

Reviews

Start your review of JavaScript and the DOM Course (How To)

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.