flyweight-dom

Flyweight DOM 🍃 

The extremely fast DOM implementation.

• Zero dependencies;
• Just 3 kB gzipped;
• DOM can be extended with custom nodes;
• Low memory consumption.

npm install --save-prod flyweight-dom

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'

You can create custom nodes by extending Node class or its subclasses:

import { Element, Node } from 'flyweight-dom';

class MyNode extends Node {}

new Element('div').appendChild(new MyNode());

Or extend your already existing classes using a declaration merging:

// Your existing class
class MyClass {}

// Merge declarations
interface MyClass extends Node {}

// Extend the prototype
Node.extend(MyClass);

new Element('div').append(new MyClass());

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.