ndom

A DOM wrapper with IntelliSense.

Installation

npm install --save ndom

The UMD build is in the dist directory.

Short story

Why not any of the others? Because I like this syntax more, actual property getters for every get operation. The collection of elements extends a real Array object so you get all the methods of the Array prototype. Small code. Only necessary functions, maybe even missing some.

const ndom = require('ndom');

ndom('body').html = '<div id="div1">DIV IN BODY</div>';
ndom('#div1').html = '<a>l1</a><a>l2</a><a>l3</a>';

console.log(ndom('#div1').width, ndom('#div1').size.width === ndom('#div1').width);
console.log(ndom('#div1 a').html);

ndom('#div1 a').forEach((a, i) => {
    console.log(a);
    ndom(a).html += ' - <b>' + i + '</b>';
});

ndom('#div1 a').on('click', e => console.log('CLICK', e));
ndom('#div1 a').once('click', (e, node) => console.log('CLICK ONCE', node, e));
ndom('#div1 a').on('click', function(e) {
    console.log('Binds to: ', this);
});

// etc...

Long story

Classes

ndom

• ndom
  • ndom(selector, [parent])
  • .match(el, selector) ⇒ boolean
  • .onLoad(callback) ⇒ ndom
  • .onReady(callback) ⇒ ndom

ndom(selector, [parent])

| Param | Type | | --- | --- | | selector | * | | [parent] | * |

ndom.match(el, selector) ⇒ boolean

| Param | Type | | --- | --- | | el | * | | selector | * |

ndom.onLoad(callback) ⇒ ndom

| Param | Type | | --- | --- | | callback | function |

ndom.onReady(callback) ⇒ ndom

| Param | Type | | --- | --- | | callback | function |

Collection ⇐ Array

Kind: global class
Extends: Array

• Collection ⇐ Array
  • instance
    • .node ⇒ HTMLElement
    • .parent ⇒ Collection
    • .size ⇒ Object
    • .width ⇒ number
    • .height ⇒ number
    • .outerSize ⇒ Object
    • .offset ⇒ Object
    • .offsetParent ⇒ Collection
    • .offsetViewport ⇒ ClientRect
    • .position ⇒ Object
    • .left ⇒ number
    • .top ⇒ number
    • .html ⇒ string
    • .outerHtml ⇒ string
    • .text ⇒ string
    • .class ⇒ string
    • .classes ⇒ Array
    • .children ⇒ Collection
    • .length ⇒ number
    • .html
    • .text
    • .query(selector) ⇒ Collection
    • .queryParents(selector) ⇒ Collection
    • .contains(child) ⇒ boolean
    • .clone() ⇒ Collection
    • .getAttr(name) ⇒ string | null
    • .hasClass(name) ⇒ boolean
    • .setAttr(name, value) ⇒ Collection
    • .addClass(name) ⇒ Collection
    • .removeClass(name) ⇒ Collection
    • .setHtml(html) ⇒ Collection
    • .setText(text) ⇒ Collection
    • .serialize([asObject]) ⇒ string | object
    • .append(children) ⇒ Collection
    • .prepend(children) ⇒ Collection
    • .remove() ⇒ Collection
    • .replace(html) ⇒ Collection
    • .insertAfter(html) ⇒ Collection
    • .insertBefore(html) ⇒ Collection
    • .empty() ⇒ Collection
    • .on(type, [selector], handler) ⇒ Collection
    • .once(type, [selector], handler) ⇒ Collection
    • .off(type, [selector], handler) ⇒ Collection
    • .emit(eventName) ⇒ Collection
    • .dispatch(event) ⇒ Collection
  • static
    • .wrap(collection, ndom, window) ⇒ Collection

collection.node ⇒ HTMLElement

collection.parent ⇒ Collection

collection.size ⇒ Object

collection.width ⇒ number

collection.height ⇒ number

collection.outerSize ⇒ Object

collection.offset ⇒ Object

collection.offsetParent ⇒ Collection

collection.offsetViewport ⇒ ClientRect

collection.position ⇒ Object

collection.left ⇒ number

collection.top ⇒ number

collection.html ⇒ string

collection.outerHtml ⇒ string

collection.text ⇒ string

collection.class ⇒ string

collection.classes ⇒ Array

collection.children ⇒ Collection

collection.length ⇒ number

collection.html

| Param | Type | | --- | --- | | html | string |

collection.text

| Param | Type | | --- | --- | | text | string |

collection.query(selector) ⇒ Collection

| Param | Type | | --- | --- | | selector | string | Collection | HTMLElement | * |

collection.queryParents(selector) ⇒ Collection

| Param | Type | | --- | --- | | selector | string | Collection | HTMLElement | * |

collection.contains(child) ⇒ boolean

| Param | Type | | --- | --- | | child | string | Collection | HTMLElement | * |

collection.clone() ⇒ Collection

collection.getAttr(name) ⇒ string | null

| Param | Type | | --- | --- | | name | string |

collection.hasClass(name) ⇒ boolean

| Param | Type | | --- | --- | | name | string |

collection.setAttr(name, value) ⇒ Collection

| Param | Type | | --- | --- | | name | string | | value | * |

collection.addClass(name) ⇒ Collection

| Param | Type | | --- | --- | | name | string |

collection.removeClass(name) ⇒ Collection

| Param | Type | | --- | --- | | name | string |

collection.setHtml(html) ⇒ Collection

| Param | Type | | --- | --- | | html | string |

collection.setText(text) ⇒ Collection

| Param | Type | | --- | --- | | text | string |

collection.serialize([asObject]) ⇒ string | object

| Param | Type | | --- | --- | | [asObject] | boolean |

collection.append(children) ⇒ Collection

| Param | Type | | --- | --- | | children | Collection | HTMLElement | Array | * |

collection.prepend(children) ⇒ Collection

| Param | Type | | --- | --- | | children | Collection | HTMLElement | * |

collection.remove() ⇒ Collection

collection.replace(html) ⇒ Collection

| Param | Type | | --- | --- | | html | string | Collection | HTMLElement | * |

collection.insertAfter(html) ⇒ Collection

| Param | Type | | --- | --- | | html | string | Collection | HTMLElement | * |

collection.insertBefore(html) ⇒ Collection

| Param | Type | | --- | --- | | html | string | Collection | HTMLElement | * |

collection.empty() ⇒ Collection

collection.on(type, [selector], handler) ⇒ Collection

| Param | Type | | --- | --- | | type | string | | [selector] | string | function | | handler | function |

collection.once(type, [selector], handler) ⇒ Collection

| Param | Type | | --- | --- | | type | string | | [selector] | string | function | | handler | function |

collection.off(type, [selector], handler) ⇒ Collection

| Param | Type | | --- | --- | | type | string | | [selector] | string | function | | handler | function |

collection.emit(eventName) ⇒ Collection

| Param | Type | | --- | --- | | eventName | string |

collection.dispatch(event) ⇒ Collection

| Param | Type | | --- | --- | | event | Event | * |

Collection.wrap(collection, ndom, window) ⇒ Collection

| Param | Type | | --- | --- | | collection | Array | Collection | NodeList | | ndom | ndom | | window | Window |

TODO

Test test test.