dom_utils.md

Functions

toArray(nodes) ⇒ Array

Converts NodeList to array

$(Element, [selector]) ⇒ function | Array

Select nodes

attr(key, [value], [element]) ⇒ function | String | HTMLElement

Get/set element attribute

addClass(className, [element]) ⇒ function | HTMLElement

Add a class to the element

removeClass(className, [element]) ⇒ function | HTMLElement

Remove a class from the element

toggleClass(className, [element]) ⇒ function | HTMLElement

Toggle a class at the element

hasClass(className, element) ⇒ function | Boolean

Check if the element has a class

append(parent, [element]) ⇒ HTMLElement | function

appends one HTML Element to another HTML Element

prepend(parent, [element]) ⇒ HTMLElement | function

prepends one HTML Element to another HTML Element

walkDOM(node, filter, skipNode) ⇒ Array

Traverse DOM node

fireEvent(eventName, target, [eventData])

Fires an event on element

html(target, [content]) ⇒ Array | function

Set the HTML content of element, or generate DocumentFragment

isNode(element) ⇒ Boolean

Check if element is HTMLElement or DocumentFragment

empty(element) ⇒ HTMLElement

Empty element

getRefs(element) ⇒ Object

Find refs

createElement(name, [attributes], [content]) ⇒ HTMLElement

creates HTML Element

toArray(nodes) ⇒ Array

Converts NodeList to array

Kind: global function
Returns: Array - Collection of nodes

Param	Type	Description
nodes	NodeList	Elements collection

Example

toArray(document.querySelectorAll('body')) //=> [document.body]

$(Element, [selector]) ⇒ function | Array

Select nodes

Kind: global function
Returns: function | Array - Curried function (if selector is not provided) or collection of nodes

Param	Type	Description
Element	HTMLElement
[selector]	String	Selector

attr(key, [value], [element]) ⇒ function | String | HTMLElement

Get/set element attribute

Kind: global function
Returns: function | String | HTMLElement - Curried function (if element is not provided) or attribute value

Param	Type	Description
key	String	Attribute name
[value]	String	Attribute value
[element]	HTMLElement	Element

addClass(className, [element]) ⇒ function | HTMLElement

Add a class to the element

Kind: global function
Returns: function | HTMLElement - Curried function (if element is not provided) or element

Param	Type	Description
className	String	Class name
[element]	HTMLElement	Element

removeClass(className, [element]) ⇒ function | HTMLElement

Remove a class from the element

Kind: global function
Returns: function | HTMLElement - Curried function (if element is not provided) or element

Param	Type	Description
className	String	Class name
[element]	HTMLElement	Element

toggleClass(className, [element]) ⇒ function | HTMLElement

Toggle a class at the element

Kind: global function
Returns: function | HTMLElement - Curried function (if element is not provided) or element

Param	Type	Description
className	String	Class name
[element]	HTMLElement	Element

hasClass(className, element) ⇒ function | Boolean

Check if the element has a class

Kind: global function
Returns: function | Boolean - Curried function (if element is not provided) or boolean

Param	Type	Description
className	String	Class name
element	HTMLElement	Element

append(parent, [element]) ⇒ HTMLElement | function

appends one HTML Element to another HTML Element

Kind: global function
Returns: HTMLElement | function - parent

Param	Type	Description
parent	HTMLElement	element to attach to
[element]	HTMLElement	new node

prepend(parent, [element]) ⇒ HTMLElement | function

prepends one HTML Element to another HTML Element

Kind: global function
Returns: HTMLElement | function - parent

Param	Type	Description
parent	HTMLElement	element to attach to
[element]	HTMLElement	new node

walkDOM(node, filter, skipNode) ⇒ Array

Traverse DOM node

Kind: global function
Returns: Array - Collection of nodes

Param	Type	Description
node	HTMLElement	Element
filter	function	Filter child nodes function
skipNode	function	Skip child nodes function

fireEvent(eventName, target, [eventData])

Fires an event on element

Kind: global function

Param	Type	Description
eventName	String	Event name
target	HTMLElement	Element to trigger event on
[eventData]	*	Data to attach to event

html(target, [content]) ⇒ Array | function

Set the HTML content of element, or generate DocumentFragment

Kind: global function
Returns: Array | function - tuple [target || DocumentFragment, refs object] or render function

Param	Type	Description
target	HTMLElement | String	Element to set content or html string
[content]	String | HTMLElement | DocumentFragment	HTML content string

Example

// set content of element
const $el = document.createElement('div');
const result = html($el, `<div></div>`); //=> [$el, {}];

Example

// create element renderer
const $el = document.createElement('div');
const render = html($el);
const result = render(`<div></div>`); //=> [$el, {}];

Example

// generate document fragment from string
const result = html(`<div id="some_id"></div>`) //=> [<HTMLElement#some_id>, {}]

Example

// get refs
const refs = html(`
  <div id="some_id" ref="some_ref">
    <span refs="span_elements" id="span_1"></span>
    <span refs="span_elements" id="span_2"></span>
  </div>
`)[1] //=> { some_ref: <HTMLElement#some_id>, span_elements: [<HTMLElement#span_1>, <HTMLElement#span_2>] }

isNode(element) ⇒ Boolean

Check if element is HTMLElement or DocumentFragment

Kind: global function

Param	Type	Description
element	HTMLElement	Element to check

empty(element) ⇒ HTMLElement

Empty element

Kind: global function
Returns: HTMLElement - element

Param	Type	Description
element	HTMLElement	Element to empty

getRefs(element) ⇒ Object

Find refs

Kind: global function
Returns: Object - refs object

Param	Type	Description
element	HTMLElement	Element to find refs on

createElement(name, [attributes], [content]) ⇒ HTMLElement

creates HTML Element

Kind: global function
Returns: HTMLElement - created element

Param	Type	Description
name	String	tag name
[attributes]	Object	element attributes
[content]	String	element content