> For the complete documentation index, see [llms.txt](https://marcylabschool.gitbook.io/swe/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://marcylabschool.gitbook.io/swe/mod-4-interactive-data-driven-ui/1-intro-to-interactive-pages.md). # 1. The DOM & Event Handling {% hint style="info" %} Follow along with code examples [here](https://github.com/The-Marcy-Lab-School/4-1-interactive-pages)! {% endhint %} **Table of Contents** * [Key Concepts](#key-concepts) * [What Can JavaScript Do?](#what-can-javascript-do) * [The Document Object Model (DOM)](#the-document-object-model-dom) * [Selecting Elements with querySelector](#selecting-elements-with-queryselector) * [Linking JavaScript to HTML](#linking-javascript-to-html) * [Events](#events) * [addEventListener: Listen and Handle](#addeventlistener-listen-and-handle) * [Event Types and Handling Multiple Events](#event-types-and-handling-multiple-events) * [The Event Object](#the-event-object) * [Event Bubbling (Propagation) and `currentTarget`](#event-bubbling-propagation-and-currenttarget) * [Challenge: Put It All Together](#challenge-put-it-all-together) ## Key Concepts * **DOM (Document Object Model)** — the tree-like structure of JavaScript objects that the browser creates when it loads an HTML page. It maps the hierarchical relationships between elements. * **` ``` {% endcode %} Now, when your browser loads this HTML page, it will automatically run the JavaScript file after the body content has loaded.

Q: Why does the <script> tag need to go at the end of the body?

JavaScript runs as soon as it loads. If your script tries to select an element that hasn't been added to the page yet, `querySelector` will return `null` and your code will break. Try it out! The script will try to reference the balloon element before it exists. By placing the `