Cimentar Futuro Foundation

Learning Objectives

Explain what the DOM is and how JavaScript interacts with it
Select HTML elements with JavaScript
Attach event listeners to respond to user actions

The DOM, or Document Object Model, is the browser's in-memory, tree-like representation of an HTML page, which JavaScript can read and modify -- when JavaScript 'changes the page' without a reload, it's actually updating the DOM, and the browser re-renders the visible result. Methods like document.getElementById() or document.querySelector() let JavaScript select a specific HTML element, and properties like .textContent or .style let you read or change that element's content or appearance. Event listeners, such as button.addEventListener("click", function() {...}), let code run in response to a specific user action -- a click, a form submission, a key press -- which is the mechanism behind everything from a dropdown menu to a 'like' button updating instantly.

Module Quiz

1. document.querySelector() is used to:

Send an emailDelete a web page entirelyConnect to a databaseSelect a specific HTML element so it can be read or changed

2. The DOM is best described as:

A CSS selectorA programming languageThe browser's tree-like, in-memory representation of the HTML pageA type of web hosting server

3. An event listener such as addEventListener("click", ...) allows code to:

Run automatically once, when the file is first createdChange the server's IP addressPermanently disable a buttonRun in response to a specific user action like a click

Module 6: DOM Manipulation & Interactivity