npm install --save-prod flyweight-dom

The extremely fast DOM implementation.

• DOM can be extended with custom nodes;
• Low memory consumption, minimal amount of allocations;
• Zero dependencies;
• 4 kB gzipped.

Usage

🔰 API documentation is available here.

The implementation provides classes for all DOM nodes:

import { Element } from 'flyweight-dom';

const element = new Element('div').append('Hello, ', new Element('strong').append('world!'));

element.classList.add('red');

element.getAttribute('class');
// ⮕ 'red'

Use DSL streamline DOM authoring:

import { f } from 'flyweight-dom/dsl';

const element = f.div({ class: 'red' }, 'Hello, ', f.strong('world!'));

element.className;
// ⮕ 'red'

element.textContent;
// ⮕ 'Hello, world!'

Custom nodes

Create custom nodes:

import { Node } from 'flyweight-dom';

class MyNode extends Node {
  readonly nodeName = '#my-node';
  readonly nodeType = 100;
}

const myNode = new MyNode();
const element = new Element('div');

element.appendChild(myNode);

element.firstChild;
// ⮕ myNode

Custom nodes can extend ChildNode and ParentNode:

import { Node, ChildNode, ParentNode } from 'flyweight-dom';

class MyNode extends ParentNode(ChildNode()) {
  readonly nodeName = '#my-node';
  readonly nodeType = 100;
}

new MyNode() instanceof ChildNode();
// ✅ true

new MyNode() instanceof ParentNode(ChildNode());
// ✅ true

new MyNode() instanceof ParentNode();
// ❌ false

Performance considerations

For better performance, prefer nextSibling and previousSibling over childNodes and children:

for (let child = node.firstChild; child !== null; child = child.nextSibling) {
  // Process the child
}

When the childNodes or children properties are accessed for the first time, a NodeList is created and then stored on the node instance.