= DOM element
{c}
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>.<DOM Standard by WHATWG>[§4.9, Element; Node tree definitions and element attributes]{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.
Back to article page
