TL;DR: what is the DOM
- The DOM (Document Object Model) is the browser’s live, structured representation of a web page as an object tree that JavaScript can read and modify.
- Every script your page loads (first-party bundles, tag manager, analytics, chat, ad-tech) has full read and write access to the same DOM by default. That is why a compromised third-party script can read a login form or a checkout field.
- Client-side security monitors what scripts actually do to the DOM in real user sessions, which is the only place where PCI DSS 4.0.1 §6.4.3 script inventory and §11.6.1 tamper detection can be validated for real.
When building a website, you’ll often encounter the term DOM - which stands for the Document Object Model. The DOM is a programming interface that represents a webpage as a structured tree of nodes, with each node correlating to an HTML element (like a heading tag, paragraph, and link). This allows programmatic access to navigate and modify content on a page dynamically.
What is the DOM?
When your browser loads the HTML code, it parses through it and builds a tree of objects made from elements on the page. The element at the top would be the root of the tree, and under that you’d find the and nodes, and within that their child objects. The DOM is a standardized API for HTML content. If a program needs to update the content of your page, it would interface with the DOM.
The DOM itself is language-neutral. It’s not a part of JavaScript, but JavaScript happens to be the best way to interact with it.
See it in your own site
If you care about what actually runs in the browser (not just what your server sent), you need visibility into every DOM mutation your third-party scripts make. cside monitors client-side script behavior across every visitor session in real time. Free tier covers the baseline.
DOM behind the scenes
When a browser loads a website, the HTML is parsed into a DOM tree and the CSS into the CSSOM (CSS Object Model), which represents all of the style rules of your objects. Once complete, the browser combines the DOM and CSSOM to figure out what nodes should look like, where they should appear, and their exact position and size.
The DOM is a live, dynamic structure, so JavaScript and other code can change nodes after a page loads. The site updates instantly, without needing a reload.
Interacting with the DOM
The browser exposes the DOM via the `document` object, which JavaScript can then use to interact with it. Using the DOM API, you can perform a variety of actions to make a static page more dynamic and interactive. Some things include:
- Selecting elements by doing `document.getElementById`, which returns the button or element for that ID
- Reading or modifying content on a page by changing the `element.textContent` or `element.innerHTML`.
- Dynamically applying or altering the CSS for an element by changing the property styles (for example, doing `element.style.backgroundColor = “yellow”` to set something yellow)
- Adding or removing elements on a page by doing `document.createElement` or `element.removeChild`
Why the DOM matters
Without the DOM, dynamic websites wouldn’t be possible. It enables everything from a simple script to a complex application to read and change page content, and it’s the main interface between HTML and JavaScript.
