6 The DOM and Browser Events

The DOM as an interactive page structure

The Document Object Model (DOM) is the browser’s tree representation of a web document. HTML elements are nodes in this tree. JavaScript can find nodes, read their state, change their contents or attributes, and create or remove elements. When the DOM changes, the browser can display the updated page.

Think of the DOM as the connection between a page’s structure and the code that makes it interactive: JavaScript changes nodes, and the browser renders the result.

Finding and updating elements

Use document.querySelector() to find the first element matching a CSS selector. If nothing matches, the result is null, so check for a match before using it. document.querySelectorAll() returns a static collection of all matching elements.

Once you have an element, common updates include:

• Set textContent to change its text.

• Use classList.add(), classList.remove(), or classList.toggle() to change CSS classes.

• Set a relevant property or attribute, such as an input’s value.

• Create nodes with document.createElement() and insert them with methods such as append().

When displaying text supplied by a user, prefer textContent to innerHTML. textContent treats the supplied value as text rather than parsing it as markup, and setting it replaces the element’s child content.

Events and their propagation

An event represents something that happens, such as a click, key press, text input, or form submission. Register a listener with addEventListener(type, callback). The callback receives an event object with information including target, where the event originated, and currentTarget, the object whose listener is running.

Events may travel through a hierarchy of elements. During capturing, an event travels toward its target. At the target, target listeners run. For events that bubble, the event then travels back up through ancestors. This event propagation makes event delegation possible: a parent can listen for events from its descendants and handle them in one place. Not every event bubbles, so check an event’s behavior before relying on delegation.

Two methods address different concerns:

• event.preventDefault() cancels a cancelable event’s default browser action, such as a form’s normal submission. It does not stop propagation.

• event.stopPropagation() stops the event from continuing through its propagation path. It does not cancel the default action.

Use these methods only when the interface needs them. A form’s submit event can be handled with JavaScript, and the browser normally performs constraint validation before submission.

Putting DOM updates and events together

This task list adds an item when its form is submitted and removes an item when its Remove button is clicked. The list uses one click listener: because clicks bubble, the handler can identify a nested button. Handling the form’s submit event also supports submission from the keyboard.

The defer attribute lets the browser finish parsing the document before running the script, so the selected elements are available. The submit handler prevents the browser’s normal submission behavior so the page can update in place. User-provided task text is assigned with textContent, not interpreted as HTML.

Takeaway: Select nodes, update them safely, and connect user actions to handlers with event listeners.

• event target