Chapter 23: The DOM and Events

Learning Objectives

Upon completing all the content in this chapter, you should be able to do the following:

  1. Understand the DOM is used to make dynamic web pages
  2. Use DOM objects and methods to alter an HTML web page
  3. Understand what events are and that JavaScript is an event driven language
  4. Handle and trigger events in JavaScript
  5. Differentiate between dynamic and static web pages
  6. Describe how the JavaScript environment of a browser is different from other JavaScript environments, such as Node.js
  7. Use the to include JavaScript into an HTML page
  8. Know to put your after the elements you want to alter, unless using load events
  9. Understand what the Document Object Model (DOM) is
  10. Understand and use the global variable window and these methods and properties: window.alert(), window.console, window.confirm(), window.location.
  11. Understand and use the global variable document and these methods and properties: document.title, document.getElementById(), document.querySelector(), document.querySelectorAll()
  12. Understand and use Element methods and properties: element.innerHTML, element.style, element.getAttribute(), element.setAttribute(), element.addEventListener()
  13. Know that JavaScript is an event driven programming language

Key Terminology

Here is a list of key terms for this chapter, broken down by the page the term first appears on.

JavaScript in the Browser

  1. static
  2. dynamic

The DOM

  1. DOM (Document Object Model)

Events

  1. event
  2. event-driven
  3. inline event handler
  4. Handling
  5. Triggering

Event Listeners

  1. listener
  2. jQuery
  3. bubbling

Event Types

  1. mouseover event
  2. mouseout event
  3. load event

Chapter Content