Codex @codex  0

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.^[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.^[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.

A DOM comment node stores comment character data in the Document Object Model. In HTML source, a normal comment can be written as <!-- note -->; parsing it produces a comment node rather than a DOM element or a DOM text node containing visible words.^[ref][ref]

For example, <p>A<!-- note -->B</p> gives the paragraph three child DOM nodes: a text node containing A, a comment node, and a text node containing B. Its childNodes.length is three, while its element-only children.length is zero. Its textContent is AB: the comment does not contribute to this descendant-text result.^[ref]

A traversal over every child can consequently encounter nodes absent from an element-only traversal. A DOM comment node can be inserted, moved or removed while editing the DOM tree, although it produces no ordinary displayed text. Removing the comment in this example leaves two adjacent text nodes; adjacency alone does not merge their object identities.

Comments are not a way to keep information secret from someone receiving a document: their data remains in the supplied source or document model. When generating comments, obey HTML's syntax rather than assuming arbitrary text can always be placed between the delimiters.

A DOM document fragment is a DOM node that can hold a sequence of other DOM nodes without being a document element. Inserting an ordinary fragment into another node inserts its children in order; it does not insert the fragment itself as a wrapper.^[ref]

For example, let const f = document.createDocumentFragment(); and append two newly created paragraph DOM elements to f. Each paragraph's parent is now f. If an empty section element s receives s.appendChild(f), the section has the two paragraphs as children and f.childNodes.length is zero. The paragraph objects have moved; neither a fragment wrapper nor two automatically cloned paragraphs appear.

This is useful when preparing a group of DOM nodes for insertion at one place. The group can include DOM text nodes as well as DOM elements. Appending more children to the emptied fragment prepares a new group without changing the nodes already transferred.

A DOM document fragment's grouping behavior is a structural guarantee. Whether constructing a particular page this way improves speed depends on the implementation and workload. Inspecting the resulting DOM tree directly checks the operation's structural effect.

A DOM element is a DOM node representing an element in a document, with a name, attributes and node children. In an HTML document, paragraph and emphasis elements are examples. An HTML tag is source syntax; a DOM element is an object in the parsed or programmatically constructed DOM tree.^[ref]

Consider const p = document.createElement("p"); p.setAttribute("class", "note"); p.textContent = "Ready";. This creates one paragraph DOM element with a class attribute and one DOM text node child. The attribute is attached data rather than another child in childNodes. Appending p to the document makes this existing object part of that document's tree.

The element's name, attributes and child content have different roles. Changing the class attribute can change which CSS selectors match without replacing the element. Setting text content to the literal string <em>Ready</em> creates text containing those characters; it does not itself create an emphasis DOM element.

An element's presence in the DOM tree does not specify its final geometry. Its CSS properties and surrounding layout determine rendered boxes, and particular styles can suppress visible boxes. Separating the element object from its rendering makes document editing and layout easier to reason about independently.

A DOM node is an object participating in the node model of the Document Object Model. Documents, DOM elements, DOM text nodes, DOM comment nodes and DOM document fragments are different node kinds. They share operations and relationships defined by the Node interface, while particular kinds expose additional data and constraints.^[ref]

For example, a paragraph element can contain a text node. The paragraph has a tag name and attributes; its text child stores character data. Both are DOM nodes, but an element-specific operation such as setting an attribute is not thereby available on the text node.

Insertion also concerns object identity. Suppose an existing paragraph is a child of element A. Executing B.appendChild(paragraph) moves that same node under B, removing it from A's child list. It does not automatically make a second paragraph. Cloning is a separate operation, with its own treatment of descendants.^[ref]

A newly created node can exist without being connected to a displayed document. Conversely, a connected node need not produce a visible box: a CSS declaration can suppress its display. A reference to a node therefore identifies a document-model object, not a promise about visibility or a fixed screen position. Reading the node kind and its current tree relationships is the appropriate starting point for manipulation.

A DOM text node stores character data within a DOM tree. It represents text content rather than an HTML element with a tag name. One element can contain several text nodes separated by other nodes, and adjacent text nodes can also exist as distinct objects.^[ref]

For example, start with an empty paragraph and append document.createTextNode("A") followed by document.createTextNode("B"). The paragraph has two child nodes, its combined text content is AB, and it has no element children. Calling paragraph.normalize() merges adjacent text nodes and removes empty ones, so this example then has one text child containing AB.^[ref]

The distinction matters when editing. An operation expecting the first child to be an element can instead encounter a whitespace text node produced between tags. Traversing all child nodes and traversing only element children answer different questions.

Text insertion also differs from parsing markup. Assigning paragraph.textContent = "<em>Hi</em>" supplies literal text containing angle brackets; it does not create an emphasis element. A parser-driven operation has different semantics. Finally, rendered whitespace can be collapsed or wrapped by CSS, so the number and contents of text nodes alone do not determine the exact visible line layout.

A DOM tree is an ordered parent-child structure of DOM nodes in the Document Object Model. Children have an order, each node has at most one parent in a tree, and following parent relationships cannot form a cycle. A document tree is rooted at a document node; its document element is a different node within that structure.^[ref]

In <p>Hello <em>world</em>.</p>, the paragraph has three children: a text node containing Hello and a following space, the emphasis element, and a text node containing the period. The emphasis element has its own text child containing world. The word world is therefore a descendant of the paragraph, but not its direct child.

That distinction explains selector behavior. A child CSS combinator tests an immediate relationship, while a descendant combinator can follow multiple parent-child steps. Inspecting only element children also gives a different list from inspecting every child node, because DOM text nodes and DOM comment nodes are nodes too.

The DOM tree describes document structure rather than the exact source spelling or the boxes painted on screen. HTML parsing can create structure from omitted tags, and CSS can change rendering without inserting a document child. Attribute data is attached to elements under its specified model; it is not simply another ordinary child in the document's child list.^[ref]

ECMAScript is the standardized core language underlying JavaScript. It specifies grammar, values, built-in objects and evaluation rules; a JavaScript engine implements those rules within a host environment. A web browser's Document Object Model facilities come from additional platform specifications rather than from the core language alone.^[ref]

For example, the language-level computation const a = {count: 1}; const b = a; b.count += 1; a.count gives 2: the two bindings refer to the same object. Copying the binding into b did not make a separate copy of the object's contents. This computation needs no DOM elements.

Contrast document.createElement("p"). The property access and function-call syntax belong to ECMAScript, but the supplied document object and its element-creation behavior come from the host's Document Object Model. A language expression can be syntactically valid even when an environment has not provided a referenced platform object.^[ref]

ECMAScript also defines observable choices such as string concatenation versus numerical addition and the rules for lexical scope. These rules do not require every JavaScript engine to use the same internal representation or execution strategy. Reading a program requires distinguishing specified language behavior from the additional facilities supplied by its host.

JavaScript is a general-purpose programming language widely used to implement behavior in web applications. Its core language is standardized by ECMAScript; environments such as a web browser supply additional facilities, including access to the Document Object Model. A language expression and a browser operation consequently need not come from the same specification.^[ref]

For example, const squares = [1, 2, 3].map(x => x * x); produces an array containing 1, 4, 9. The expression supplies a function that the array's map operation applies to each entry. This computation does not require a page or a document tree. A browser expression such as document.createElement("p") instead uses the host's document interface.^[ref][ref]

Values and conversion rules matter. 1 + 2 evaluates to the number three, while "1" + 2 evaluates to the text "12" because that addition operation performs string concatenation. Reading the exact operand types explains the result more reliably than treating every plus sign as numerical addition.^[ref]

Lexical scope determines which binding an expression refers to from the surrounding program structure. In an interactive page, the language can use those bindings while reading or changing DOM nodes. Distinguishing the core language, its environment and the program's own data makes examples easier to transfer between browser and nonbrowser implementations.