Documentation

Class: $Node

$Node

new $Node()

Used to represent a node in better-dom

Methods

clone(deepCopy)

Clone element

Parameters:
Name Type Description
deepCopy Boolean

true when all children should also be cloned, otherwise false
Returns:

A clone of the current element

Type
$Node
Example
ul.clone(true);  // => clone of <ul> with all it's children
ul.clone(false); // => clone of <ul> element ONLY

contains(element)

Check if an element is inside of the current context

Parameters:
Name Type Description
element $Node

Element to check
Returns:

true if success and false otherwise

Type
Boolean
Example
DOM.contains(DOM.find("body")); // => true
DOM.find("body").contains(DOM); // => false

find(selector)

Find the first matched element in the current context by a CSS selector

Parameters:
Name Type Description
selector String

CSS selector
Returns:

The first matched element

Type
$Element
Example
var body = DOM.find("body");  // => <body> wrapper
var foo  = body.find(".foo"); // => the first element with class "foo"
foo.find(".bar>span");        // => the first element that matches ".bar>span"

findAll(selector)

Find all matched elements in the current context by a CSS selector

Parameters:
Name Type Description
selector String

CSS selector
Returns:

An array of matched elements

Type
Array.<$Element>
Example
DOM.findAll("a");         // => all links in the document
context.findAll("ol>li"); // => all <li> inside of <ol>

fire(type [, detail])

Trigger an event of specific type with optional data

Parameters:
Name Type Argument Description
type String

Type of event
detail Object <optional>

Custom event data
Returns:

true if default event action was NOT prevented

Type
Boolean
Example
link.fire("click");              // fire click event
link.fire("my:event", {a: "b"}); // fire "my:event" with custom data

get(name [, defaultValue])

Get property or attribute value by name

Parameters:
Name Type Argument Description
name String | Array

Property or attribute name or array of names
defaultValue Object <optional>

Default value if returned is null
Returns:

Value of property or attribute

Type
Object
Example
link.get("title");       // => property title
link.get("data-custom"); // => custom attribute data-custom

on(type [, options] [, args], callback)

Bind a DOM event listener

Parameters:
Name Type Argument Description
type String

Event type
options Object | String <optional>

Event options object or css selector to match on
args Array <optional>

Array of handler arguments to pass into the callback
callback function

Event listener callback
Returns:

Functor to cancel the listener

Type
function
Example
link.on("focus", function() {
    // do something on focus
});

link.on("click", "i", function() {
    // do something on internal <i> click
});

link.on("click", "span", ["currentTarget"], function(span) {
    // <span> is the element was clicked
});

link.on("blur", {once: true}, function() {
    // event fired only once
});

link.on("mousedown", {capture: true}, function() {
    // event fired on capturing phase
});

set(name, value)

Set property/attribute value by name

Parameters:
Name Type Description
name String | Object | Array | function

property/attribute name
value String | function

property/attribute value or functor
Returns:

Self

Type
$Node
Example
link.set("title", "mytitle");   // set title property
link.set("data-custom", "foo"); // set custom attribute data-custom