DOMUtils - Documentation

Methods

(inner) addChildrenListener(parentEl, childrenSelector, events, handler, bubble)

bind event listener to a parent

Source:

DOMUtils.js, line 547

Parameters:

Name	Type	Description
`parentEl`	`HTMLElement` \| `Document` \| `Window`
`childrenSelector`	`String`
`events`	`Array.<String>`
`handler`	`function`
`bubble`	`Boolean`

(inner) addListeners(el, cb, evts, bubble) → {HTMLElement|Window}

Even though for simplicity sake you can pass a single string as event I wouldn't recommend doing it as it adds unnecessary overhead

Source:

DOMUtils.js, line 31

Parameters:

Name	Type	Description
`el`	`HTMLElement` \| `Window`	element to be attached with events needs to implement addEventListener
`cb`	`function`	event handler function
`evts`	`String` \| `Array.<String>`	array of qualified event names
`bubble`	`Boolean`

Returns:

Type:: HTMLElement | Window

(inner) appendChildren(parentEl, …children) → {HTMLElement}

Append children element to parent element

Source:

DOMUtils.js, line 3

Parameters:

Name	Type	Attributes	Description
`parentEl`	`HTMLElement`		parent element
`children`	`HTMLElement`	<repeatable>	elements

Returns:

Type:: HTMLElement

parent element

(inner) attachEvts()

alias for DOMUtils.addListeners function

Source:

DOMUtils.js, line 595

See:

DOMUtils.addListeners

(inner) createElement(…options) → {HTMLElement}

Create a new HTMLElement

Source:

DOMUtils.js, line 105

Parameters:

Name	Type	Attributes	Description
`options`	`createElementOptions`	<repeatable>	descriptor the newly created element

Returns:

Type:: HTMLElement

instance of HTMLElement

(inner) detachEvts()

alias for DOMUtils.removeListeners function

Source:

DOMUtils.js, line 602

See:

DOMUtils.removeListeners

(inner) findElements(predicate) → {Array.<Element>}

Find elements matching predicate object properties Needs at least one of id, tag, classes, attributes prop to be valid

Source:

DOMUtils.js, line 473

Parameters:

Name Type Description

predicate

Object

object

Name	Type	Attributes	Default	Description
`root`	`HTMLElement` \| `Document`	<optional>	Document
`id`	`String`			matches #id
`tag`	`String`			matches
`classes`	`Array.<String>`			matches .classes
`attributes`	`Array.<String>`			matches [attr]

Returns:

Type:: Array.<Element>

elements matching predicate

(inner) getAttributes(el, attrs) → {Object.<string, any>}

Get attributes of an element

Source:

DOMUtils.js, line 260

Parameters:

Name	Type	Description
`el`	`HTMLElement`
`attrs`	`Array.<String>`	attributes to get

Returns:

Type:: Object.<string, any>

attribute/value object

(inner) getBoundEvents(el)

Returns every event properties bound to an handler

Source:

DOMUtils.js, line 135

Parameters:

Name	Type	Description
`el`	`HTMLElement`	element

Returns:

(inner) hasAttributes(targetEl, attributes) → {Boolean}

Returns true if element matches all attributes in array

Source:

DOMUtils.js, line 528

Parameters:

Name	Type	Description
`targetEl`	`HTMLElement`	element
`attributes`	`String` \| `Array.<String>`	attributes to be tested

Returns:

Type:: Boolean

true if element has attributes

(inner) hasClasses(targetEl, classes) → {Boolean}

Returns true if element matches all classes in array

Source:

DOMUtils.js, line 511

Parameters:

Name	Type	Description
`targetEl`	`HTMLElement`	element
`classes`	`String` \| `Array.<String>`	classes to be tested

Returns:

Type:: Boolean

true if element has classes

(inner) isChildrenOfn(childNode, parentNode)

Deprecated:

better directly using native method HTMLElement.contains

Source:

DOMUtils.js, line 153

Parameters:

Name	Type	Description
`childNode`	`HTMLElement`
`parentNode`	`HTMLElement`

(inner) moveNode(el, newParent) → {HTMLElement}

Change element parent

Source:

DOMUtils.js, line 162

Parameters:

Name	Type	Description
`el`	`HTMLElement`	element to move
`newParent`	`HTMLElement`	new parent element

Returns:

Type:: HTMLElement

element

(inner) removeAttributes(el, attrs) → {HTMLElement}

Remove attributes from an element

Source:

DOMUtils.js, line 280

Parameters:

Name	Type	Description
`el`	`HTMLElement`	element
`attrs`	`Array.<String>` \| `"all"`	attributes to be unset

Returns:

Type:: HTMLElement

element

(inner) removeClasses(el, classes) → {HTMLElement}

Remove classes from element.classList

Source:

DOMUtils.js, line 216

Parameters:

Name	Type	Description
`el`	`HTMLElement`	element
`classes`	`Array.<String>` \| `"all"`	classes to be unset

Returns:

Type:: HTMLElement

element

(inner) removeDataAttributes(el, attrs) → {HTMLElement}

Remove data- attributes from an element

Source:

DOMUtils.js, line 330

Parameters:

Name	Type	Description
`el`	`HTMLElement`	element
`attrs`	`Object.<string, string>`	data- attributes to be removed

Returns:

Type:: HTMLElement

element

(inner) removeListeners(el, cb, evts, bubble) → {HTMLElement|Window}

Even though for simplicity sake you can pass a single string as event I wouldn't recommend doing it as it adds unnecessary overhead

Source:

DOMUtils.js, line 63

Parameters:

Name	Type	Description
`el`	`HTMLElement` \| `Window`	element
`cb`	`function`	handler reference
`evts`	`String` \| `Array.<String>`	array of events
`bubble`	`Boolean`

Returns:

Type:: HTMLElement | Window

void

(inner) removeProperties(el, props) → {HTMLElement}

Remove custom properties of an element

Source:

DOMUtils.js, line 380

Parameters:

Name	Type	Description
`el`	`HTMLElement`	element
`props`	`String` \| `Array.<String>`	array of custom properties to unset

Returns:

Type:: HTMLElement

element

(inner) removeStyles(el, styles) → {HTMLElement}

Unset inline styles of an element

Source:

DOMUtils.js, line 425

Parameters:

Name	Type	Description
`el`	`HTMLElement`	element
`styles`	`Array.<String>` \| `"all"`	inline styles to be removed

Returns:

Type:: HTMLElement

element

(inner) setAttributes(el, attrs) → {HTMLElement}

Set element attributes

Source:

DOMUtils.js, line 238

Parameters:

Name	Type	Description
`el`	`HTMLElement`	element
`attrs`	`Object.<string, any>`	attributes to set

Returns:

Type:: HTMLElement

element

(inner) setClasses(el, classes) → {HTMLElement}

Adds an array of classes to an element

Source:

DOMUtils.js, line 187

Parameters:

Name	Type	Description
`el`	`HTMLElement`	element
`classes`	`Array.<String>`	classes to be set

Returns:

Type:: HTMLElement

element

(inner) setDataAttributes(el, attrs) → {HTMLElement}

Set data- attributes of an element

Source:

DOMUtils.js, line 311

Parameters:

Name	Type	Description
`el`	`HTMLElement`	element
`attrs`	`Object.<string, string>`	data- attributes to be set

Returns:

Type:: HTMLElement

element

(inner) setProperties(el, props) → {HTMLElement}

Set custom properties of an element

Source:

DOMUtils.js, line 358

Parameters:

Name	Type	Description
`el`	`HTMLElement`	element
`props`	`Object.<string, (String\|Number)>` \| `Object.<string, CSSPropertyObject>`	custom properties to be set

Returns:

Type:: HTMLElement

element

(inner) setStyles(el, styles) → {HTMLElement}

Set inline styles of an element

Source:

DOMUtils.js, line 404

Parameters:

Name	Type	Description
`el`	`HTMLElement`	element
`styles`	`Object.<string, (String\|Number)>`	inline styles to apply

Returns:

Type:: HTMLElement

element

(inner) wrapNode(el, …options) → {HTMLElement}

Wrap a node in a created element, returns wrapper

Source:

DOMUtils.js, line 453

Parameters:

Name	Type	Attributes	Description
`el`	`HTMLElement`		element to be wrapped
`options`	`createElementOptions`	<repeatable>	definitions for the created wrapper element

Returns:

Type:: HTMLElement

newly created wrapper element with element as children

Type Definitions

createElementOptions

Properties:

Name	Type	Attributes	Default	Description
`tag`	`String`	<optional>	div	type of the element to create, defaults to div
`attributes`	`Object.<string, any>`	<optional>		html attributes definition
`styles`	`Object.<string, any>`	<optional>		inline style object
`text`	`String`	<optional>		element inner text
`html`	`String`	<optional>		element inner html
`classes`	`String` \| `Array.<String>`	<optional>		html element classes

Source:

DOMUtils.js, line 96

Type:

Object

CSSPropertyObject

Properties:

Name	Type	Description
`value`	`String` \| `Number`	property value
`priority`	`"important"` \| `""`	css property priority

Source:

DOMUtils.js, line 353

Type:

Object