liveBook · Manning

DOM element

As explained in Build a Frontend Web Framework (From Scratch)

The browser API interface representing an element in the document tree.

A DOM element is a browser node representing an HTML element, such as a paragraph, input, or button. It has a tag name and can have attributes, children, styles, and event listeners. Unlike a text node, it can contain other nodes; unlike a fragment, it is itself an element in the document tree. section 3.4 section 8.2.5

It helps to separate the browser element from its virtual description. A virtual element node is a JavaScript object with a type of 'element', a tag, props, and ordered children. The h(tag, props, children) function builds that description; it does not create the browser element. Props and children default to an empty object and array. section 3.5 section 3.2

To turn the description into a browser element:

  • Call document.createElement(tag), then apply the props and retain the resulting element on the virtual node as el. section 8.1.3
  • Mount each child inside the new element, then insert the element into its parent. section 8.1.3
Listing 8.4 Using insert() inside createElementNode() (mount-dom.js)
function createElementNode(vdom, parentEl, index) {
  const { tag, props, children } = vdom

  const element = document.createElement(tag)
  addProps(element, props, vdom)
  vdom.el = element

  children.forEach((child) => mountDOM(child, element))
  parentEl.append(element)
  insert(element, parentEl, index)
}

The mounting function shows where a virtual description becomes a browser element and how its children are attached. section 8.1.3

When a view changes, reconciliation can reuse an existing element instead of creating another one. It carries the old browser element into the new virtual node, then patches attributes, CSS classes, styles, and event handlers separately. Child nodes require their own patching step. If the nodes are not considered equal, the algorithm destroys the old DOM and mounts the new description. section 8.2.5

Moving a list item

Suppose two <li> elements change positions. A key on each virtual element can help reconciliation recognize the move: equality compares both tag and key. The key guides the framework; it is removed from the props before attributes are applied to the browser element. section 12.2

How Build a Frontend Web Framework (From Scratch) covers it

How deep it goes
Builds virtual elements, mounts browser elements, and divides updates into attribute, class, style, and event patches.
Examples
Uses a form with inputs and a button, element-mounting code, and reordered list items.
What it assumes
Assumes basic HTML tags and JavaScript objects while introducing the virtual element shape and its creation function.
What you can do after
Build it from scratch by creating virtual element nodes, mounting their browser elements, and patching their properties.
How it connects
Connects DOM trees, virtual DOM, text nodes, fragments, reconciliation, event listeners, and keyed lists.
Cover of Build a Frontend Web Framework (From Scratch)
liveBookmanning.com
Read Build a Frontend Web Framework (From Scratch) on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Build a Frontend Web Framework (From Scratch). The section links point to the parts of the book it draws on.