ndom

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

Collection ⇐ Array ndom

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.