HACKER Q&A
📣 maksimur

What Is the DOM, Exactly?


Driven by a personal desire, by comments that (especially) front-end developers should fully understand how the DOM works, and knowing I'm not the only one in this position, I decided to ask this question to hopefully clarify such a crucial concept.

DOM is commonly described as a tree of objects (nodes) representing the items in an (XML/HTML) document, although the tree aspect is not mandatory but widespread, and the document object* is presumably representing the DOM. So for the following HTML document:

    
        
            
Hello World
I expect the document object to kind of look like:

    html (element): {
        \n\t (text),
        body (element): {
            \n\t (text),
            main (element): {Hello World (text)},
            \n (text)
        },
        \n (text)
    }
But what I get is more like a mix of nodes, properties, methods and prototypes:

    URL: ..., <-- a property
    activeElement: ..., <-- a property
    body: ..., <-- an element
    childElementCount: 1, <-- a property
    head: ..., <-- an element
    main: ..., <-- an element
    onclick: ..., <-- a method
    : ..., <-- a bunch of prototypes
    ...
Is the DOM actually a tree of objects representing the items in an HTML document PLUS extra data (properties) and the means to manipulate it (methods) or is it just an abstraction (after all it has model in its name) that differs from its implementation (document object)?

*what you get when typing document in the browser console or when calling it from Javascript

  👤 brudgers Accepted Answer ✓
The DOM is not part of Javascript (or rather ECMAscript).

The DOM is a different standard.

ECMAscript: https://en.wikipedia.org/wiki/ECMAScript

DOM: https://developer.mozilla.org/en-US/docs/Web/API/Document_Ob...

The 1998 DOM Specification includes a script binding API that intended for implementation within browsers using Javascript. https://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-b...

Good luck.

👤 skydhash
When you’re using a programming language and you want a nice data structure to understand the html page and it’s rendered version, you use a tree and that tree is what is called the DOM. It could have been a list, but manipulation would have been cumbersome. So the DOM is a tree, where each node is an object with direct connection to how it’s rendered on the screen.

(Most programming languages, including HTML, are transformed into a tree when you want to understand the semantics, or what each construct implies)

👤 maksimur
Thanks everyone for the answers. I researched this a little more and can summarize it as:

  - DOM is a language agnostic representation that models an XML/HTML document as an object (abstract) tree, though as I said above the tree part is not mandated by the specs.

  - The actual implementation can choose to expose extra data and methods for interacting with such objects. In the case of most browsers it's implemented as a Javascript document object (an actual Javascript object) "sitting" inside another Javascript object called window which exposes other properties and methods for interaction purposes.
👤 stop50
Its an model that abstracts the internals away. The prototype property is part of javascript.
👤 0xatul
Any article regarding this would be helpful
👤 throwaway0asd
The DOM is not HTML and not related to HTML. For the first several years of the web there was no DOM. At that time the web was just HTTP and HTML. A first DOM version was created by the W3C specifically for HTML. It was created in the proper spirit, but it was technically immature. It is now referred to as DOM level 0. The actual DOM that became the backbone of web technologies was the DOM Level 1 specification released by the W3C in 1998. It and every revision up to DOM Level 3 was released on the same day as a specification update for the XML Schema standard. The current DOM specification that is actively updated and used by the browsers comes from the WHATWG which is based upon DOM Level 4 from the W3C.

The DOM is a tree-based model for conveying information where points on that tree can reference each other in relational terms. The process of finding or describing a point on the DOM from another point on the DOM is called walking the DOM.

Since the DOM is not HTML, XML Schema, or any other specific language you must think of it as a compile target. As an example WASM is not a language, but a compile target for other languages.

Since the DOM is a tree each node on that tree knows: its parent, its children, and its siblings. In this manner the DOM is a living object because those relational properties on each node are always up to date as the DOM modifies. It seems a major point of confusion from your code examples is how the DOM is expressed. You appear to expect the DOM to be expressed as the tree itself. Most DOM trees are extremely large, so most people would find that unhelpful and illegible. The DOM is expressed from the perspective of a single node on that tree.

You also have to understand there are different node types that comprise the DOM, 12 actually. The most common are text, elements, and attributes. You mention document. There is a node type for that.