DOM node

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