JavaScript and the DOM

This topic covers the JavaScript that changes a web page. Finding an element, putting text into it, reacting when somebody clicks or types, reading what they filled in, and taking your listeners back off again.

It is the half of JavaScript people picture when they picture JavaScript. It is also the half a framework hides from you, which is why framework users still land here when something behaves oddly and the framework has no opinion about it.

JavaScript DOM Topics

• Selecting Elements and Updating the Page covers querySelector and querySelectorAll, the difference between textContent and innerHTML and why the safe one is the default, adding and removing classes, reading attributes and data- values, and building or deleting elements.
• Events, Forms, and User Input covers addEventListener, what the event object hands you, cancelling a default behaviour with preventDefault, one listener that serves a whole list, reading a form with FormData, validation the browser already does, and the disabled and loading states a submit button needs.
• Listener Cleanup and Page Lifecycle covers removeEventListener and why it so often does nothing, cancelling a whole set of listeners with one AbortController, when your script actually runs against defer and DOMContentLoaded, and why these leaks survive a move to React.

The Rule Everything Here Depends On

The page you see is not the HTML file. The browser reads that file once and builds a tree of objects from it, and every line of JavaScript on these pages is reading or changing that tree.

Two consequences follow, and they explain most beginner DOM bugs. Your code cannot touch a part of the tree that has not been built yet, which is why a script placed too early finds nothing. And editing the tree is what changes the screen, at the browser's next chance to paint.

That is also why a reload discards the changes your script made to the tree. The browser goes back to the file and rebuilds it from scratch, so anything you want to survive has to be saved somewhere, such as storage or a server.

How the Three Guides Fit Together

The first guide is one direction of the conversation: your code talking to the page. Find the thing, change the thing, add a thing, remove a thing.

The second guide is the other direction: the page telling your code that a person did something. A click, a keystroke, a form submitted. Almost every real feature is a loop between the two, and the newsletter form on the JavaScript guide is exactly that loop.

The third guide is the part tutorials skip. A listener you attached stays attached, holding on to the data it refers to, until something takes it off or its target goes away. That is the difference between a demo and a feature that survives a user navigating around.

Where You Run These Examples

These examples need a browser rather than Node. Node has no page, no elements, and no clicks, so a DOM example pasted into a terminal fails on the first line.

Save an HTML file with a <script defer src="app.js"></script> tag in the head, put your JavaScript in app.js beside it, and open the file in a browser. Keep the browser tools open on the Console tab while you work, because that is where your errors and your console.log output appear.

A few things on these pages are not DOM specific and do run in Node, such as FormData and the listener machinery itself. Those are the examples that carry a labelled Node output block, and each one says so where it appears.

Common Pitfalls

• Running before the element exists: a plain script tag in the head, with no defer and no type="module", runs while the page is still being parsed, so querySelector returns null. Module scripts are deferred already and do not have this problem. The lifecycle guide covers the loading order.
• Reaching for innerHTML to show text: it parses whatever you give it as markup, so a value from a person or an API can bring behaviour with it. The selecting guide covers when the risk is real and what to use instead.
• Attaching a listener to every row: a hundred rows means a hundred listeners, and rows added later have none at all. One listener on the container solves both for events that reach it, such as click, and the events guide shows the pattern and its limits.
• Letting a form navigate while your code is mid request: native submission is a real option, but once your handler is taking over and doing its own async work, nothing cancels the navigation unless preventDefault does. The same guide covers reading the form properly with FormData.
• Adding listeners without removing them: attaching on every render, or every time a panel opens, quietly stacks duplicates that all fire together. The cleanup guide covers both cures.

Common Questions

Which guide should you read first?

Start with selecting elements and updating the page, because the other two assume you can find an element and change it. Events and forms comes next, since that is where a page starts responding to a person. Listener cleanup comes last, because it is about undoing what the first two set up.

Do you need any of this if you use React?

Yes, though you write less of it by hand, since a framework owns the updating. The event object, preventDefault, form data, and listener cleanup all still show up in framework code, and the DOM concepts behind them carry over unchanged. How a bug looks can differ, because a framework wraps events and runs its own cleanup.

Is jQuery still worth learning for this?

Not as a starting point. The features that made it essential, such as one-line selection and consistent events across browsers, are now built into the browser as querySelector and addEventListener. You will still meet it in older codebases, which is a reason to read it rather than a reason to reach for it first.

Why is my script saying the element is null?

The likeliest cause is timing: a classic script in the head runs during parsing, before the body exists, and defer fixes that, while a module script is deferred already. Check the other causes too, since null also means a wrong selector, a wrong search root, an iframe or shadow tree, or content that is not there yet.

Continue Learning JavaScript

• Return to the JavaScript guide for where the language fits, the full learning path, and what to build first.
• Read JavaScript Language Basics for the functions, closures, and objects every example here assumes.
• Read JavaScript Async for the promises and fetch calls a form handler makes once it has your data.
• Read HTML for the elements, attributes, and form controls this topic reaches into.