# The DOM and Events

The DOM is the page as JavaScript sees it. You will find and change elements on the page and respond to clicks, typing and form submissions.

Updated: November 3, 2026

## [Introducing the DOM](https://www.ask-codey.com/courses/csharp-full-stack-bootcamp/topics/csharp-introducing-the-dom)

1. [Introducing the DOM: an overview](https://www.ask-codey.com/lessons/introducing-the-dom-an-overview) (Novice): When the browser loads a page, it turns the HTML into the DOM, a tree of objects with one for each element, and JavaScript reads and changes the page through that tree.
2. [Locating DOM elements](https://www.ask-codey.com/lessons/introducing-the-dom-locating-dom-elements) (Apprentice): Most searches start at the document, the whole page, where getElementById finds an element by its id, querySelector finds the first match for a CSS selector, and querySelectorAll finds every match.

## [Working with Elements](https://www.ask-codey.com/courses/csharp-full-stack-bootcamp/topics/csharp-working-with-elements)

1. [Working with Elements: an overview](https://www.ask-codey.com/lessons/working-with-elements-an-overview) (Apprentice): Once you've found an element, JavaScript can read it and change it, from its text and CSS classes to which elements are on the page at all.
2. [Common DOM Interactions](https://www.ask-codey.com/lessons/working-with-elements-common-dom-interactions) (Apprentice): Once you have an element, you change its text with textContent, its HTML with innerHTML, its look with style, and its CSS classes with classList.
3. [Manipulating the DOM Structure](https://www.ask-codey.com/lessons/working-with-elements-manipulating-the-dom-structure) (Apprentice): createElement makes a new element, appendChild puts it inside a parent so it shows on the page, and remove takes an element off the page.

## [Responding to Events](https://www.ask-codey.com/courses/csharp-full-stack-bootcamp/topics/csharp-responding-to-events)

1. [Responding to Events: an overview](https://www.ask-codey.com/lessons/responding-to-events-an-overview) (Apprentice): An event is something that happens on a page, such as a click, and your code responds to it by giving the browser a function to run each time it happens.
2. [Imperative](https://www.ask-codey.com/lessons/responding-to-events-imperative) (Apprentice): In the imperative style, your JavaScript finds an element and attaches a handler to it with addEventListener, so the HTML holds no JavaScript at all.

## [Common Events](https://www.ask-codey.com/courses/csharp-full-stack-bootcamp/topics/csharp-common-events)

1. [Non-Form Events](https://www.ask-codey.com/lessons/common-events-non-form-events) (Apprentice): Any element on a page can respond to the mouse, such as a click or a press of a mouse button, so even a plain div or table row can react to the user.
2. [Form Events](https://www.ask-codey.com/lessons/common-events-form-events) (Apprentice): Form controls send their own events, for the moments a visitor types, changes a value, moves between fields or sends the form, so you can pick the one that fires exactly when you need it.
3. [Canceling Events](https://www.ask-codey.com/lessons/common-events-cancelling-events) (Journeyman): A handler can cancel what the browser would do next, such as sending a form that failed validation, by calling preventDefault() on the event object the browser passes in.

## [Exercise: Shopping List and Calculator](https://www.ask-codey.com/courses/csharp-full-stack-bootcamp/topics/exercise-shopping-list-and-calculator)

1. [Exercise: Shopping List and Calculator](https://www.ask-codey.com/lessons/exercise-shopping-list-and-calculator) (Apprentice): Bring a web page to life with JavaScript. Add items to a shopping list, cross them off and remove them, keep a live count, and build a calculator that shows its result or an error, all with event handlers and DOM changes, and no page reloads.

Source: https://www.ask-codey.com/courses/csharp-full-stack-bootcamp/chapters/the-dom-and-events