flyweight-dom

npm install --save-prod flyweight-dom

The extremely fast DOM implementation.

• DOM can be extended with custom nodes;
• Low memory consumption;
• 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 to streamlines DOM authoring:

import dsl from 'flyweight-dom/dsl';

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

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 ParenNode:

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

interface MyNode extends ChildNode, ParentNode {}

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

ChildNode.extend(MyNode);
ParentNode.extend(MyNode);

Performance considerations

For better performance, prefer nextSibling and previousSibling over childNodes and children whenever possible.

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

When you read the childNodes or children properties for the first time an array of nodes is created and then stored on the node instance. Later when you modify child nodes using appendChild, removeChild or any other method, these arrays are updated which may introduce a performance impact.