DOM Element
Definition
Every tag in your HTML becomes an object in memory when the browser parses the page, and each of those objects is a DOM element. A div, an h1, a button, an img — each one is a node with a parent, possibly children, and a set of properties JavaScript can read and write. You reach one with document.getElementById('total') or document.querySelector('.price'), and what comes back is not the text of the tag but a live handle on it. Change element.textContent and the words on screen change immediately. The element is part of the DOM, the tree the browser keeps for the open page, so it exists only while the page is open and is thrown away on reload.
Why It Matters
Most JavaScript failures on a page you did not write come down to an element that was not there when the script looked for it. document.querySelector returns null rather than throwing, so the trouble shows up a line later as Cannot read properties of null. A script in the head runs before the body has been parsed, which means every element below it is missing at that moment. The same thing happens when a typo turns the id total into totals — the selector is valid, it simply matches nothing. Knowing that null means not found, rather than broken, is usually half the fix.
How It Works
The browser reads the HTML top to bottom and builds one element object per tag, attaching it to its parent as it goes. document.getElementById returns a single element or null; document.querySelector takes a CSS selector and returns the first match or null; document.querySelectorAll returns a NodeList, which can be empty and has a length you can check. Once you hold an element, textContent sets plain text, innerHTML parses whatever you give it as HTML, classList.add and classList.remove switch a class on and off, and setAttribute writes an attribute onto the tag. New elements come from document.createElement('li') and go onto the page with parent.appendChild. Anything a script adds this way lives only in the DOM — it is not in the HTML file on disk, which is why it does not show up in view-source.
Real-World Example
A one-page sales dashboard generated by an AI tool is published at q3-figures.99helpers.site and the total never fills in. The console reports Cannot read properties of null. The script sits in the head and calls document.getElementById('grand-total'), while the span carrying that id is three hundred lines further down and has not been parsed yet. Moving the script tag to just before the closing body tag fixes it, and on 99helpers that is one re-upload with the previous version still a click away.
Common Mistakes
- ✕Querying an element from a script in the head — the tag has not been parsed yet, so querySelector returns null and the next line throws
- ✕Using innerHTML to insert text that came from a URL or a form field — the content is parsed as HTML, which is one of the ways cross-site scripting gets in
- ✕Treating the result of querySelectorAll as an array — it is a NodeList, so array methods are not all there until you spread it
Related Terms
The DOM
The DOM, short for Document Object Model, is the live tree of objects the browser builds from an HTML file. It is what CSS styles and what JavaScript reads and changes — and after a script has run it can differ from the source you wrote.
HTML Element
An HTML element is a single named piece of a page — a heading, a paragraph, an image — written as a start tag, its content and an end tag. Elements nest inside one another to form the structure the browser draws.
Event Listener
An event listener is a function attached to an element so that it runs when something happens to it — a click, a keypress, a form submit. It is how a static page becomes interactive.
View Source
View source shows the raw HTML the server sent for a page, before any JavaScript has run. On a client-rendered page that can be almost empty even though the page in front of you looks full.
Client-Side Rendering
A model where the server sends a nearly empty HTML file and JavaScript builds the page in the browser. Nothing is visible until the script has downloaded and run.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →