This collection will cover the basics of how to interact with an HTML document with JavaScript. We will go over:

- What is the DOM?
- fetch elements from an HTML document
- add HTML nodes to a HTML document
- Respond to click events

The DOM stands for Document Object Model. It is the interface between the JavaScript you write and the browser.

In this lesson, we open up the browser developer console to inspect the HTML within.

Use `CMD + OPT + i` to open the console quickly.

WTF is the DOM?

You can use `document.querySelector` to fetch elements from your HTML document.

In this lesson, we pass an Id to `querySelector` indicated with a `#`. 

`document.querySelector('#movie-2')`.

`querySelector` will return the first element that it matched. 

Select an HTML Element with document.querySelector

Querying the DOM by an elements id is so common that JavaScript has given us a method to do this directly.

`document.getElementById`

In this lesson, we switch our `querySelector` function our with `getElementById` to fetch our movie list element.

Select a DOM Element with document.getElementById

This lesson goes over how to create an HTML element and add it to our document. We do this by creating an element with `document.createElement`. Once we have the element created, we can use `document.appendChild` to add our element to our HTML.

We then go over how to connect our JavaScript to a button's `onclick` event.

Introduction to Client Side Web APIs

Instructor

Course Content