DOM and Events

In the first half of the class, you learned how to build websites with HTML and CSS. The last few weeks have focused on the basics of the JavaScript language.

Finally, it's time to connect JavaScript to the HTML page.

JavaScript can change the HTML elements on the page, in response to events. In order to use JavaScript to change the HTML, you'll need to learn about the DOM: The Document Object Model. The DOM is how HTML elements are represented and accessed from JavaScript.

Once you can find, edit, and create elements from JavaScript, you'll learn how to react to events. Clicks, page loads, scroll, keyboard input, movement of the mouse – the browser knows about lots of events! You can listen for those events happening in JavaScript, and trigger an action to happen in response.

Learning Outcomes

After this week, you will be able to:

• Find elements using common DOM methods
• Manipulate DOM elements from JavaScript
• Listen for and respond to user events