= Document Object Model
{c}
The <Document Object Model> represents a document as a <DOM tree> of <DOM nodes> and defines operations for examining and changing that tree. In an <HTML> document, elements and text are different node kinds. The model gives programs access to document structure independently of how a source file happened to spell that structure.<DOM Standard by WHATWG>[§4, Nodes, node trees and the Node, Document, Element and Text interfaces]{ref}
For example, `<p>Hello <em>world</em>.</p>` creates a paragraph element with a text child, an emphasis element and another text child. The emphasis element itself contains the text world. Looking only for element children would miss the text nodes between and inside those elements.
A short <JavaScript> example constructs a paragraph directly:
`const p = document.createElement("p"); p.textContent = "Hello"; document.body.appendChild(p);`
The first operation creates an element, assigning `textContent` supplies its text, and appending it inserts it into the document. Creating an element alone does not place it on the page.<DOM Standard by WHATWG>[Document.createElement; Node.textContent; Node.appendChild and insertion algorithms]{ref}
The <Document Object Model> is also different from the geometry computed for display. A <CSS declaration> can change line wrapping or hide an element without deleting that element from the tree. Conversely, inserting a <DOM node> can alter the tree before or without making a visible change. Separating document structure from rendered boxes helps explain both programmatic editing and browser layout.
Back to article page
