DOM.md

@squirrel-forge/ui-util

Back to table of contents

Documentation

Javascript / DOM

Dev <[ DOM ]> Error

Table of contents

• appendAfter()
• appendHTML()
• attributeJSON()
• getElementTagType()
• getPropertyValues()
• prependChild()
• uniqid()
• requireUniqid()
• unwrap()
• wrap()

---

appendAfter

appendAfter - Append node after a specific node

Description

appendAfter( newNode, referenceNode ) // void

Appends a node after a specified node.

Parameters

Parameter	Type	Default	Description
newNode	Node	-	The node to append
referenceNode	Node	-	The node after which we want to append

Return Values

Type/Value	Description
void	None.

Examples

appendAfter( document.getElementById( 'move-me' ), document.getElementById( 'after-this' ) );

---

appendHTML

appendHTML - Append HTML string as one or multiple elements

Description

appendHTML( element, str ) // void

Append HTML string as one or multiple elements, uses str2node() to convert the string.

Parameters

Parameter	Type	Default	Description
element	HTMLElement	-	Element to append to
str	String	-	The html string

Return Values

Type/Value	Description
void	Node.

Examples

appendHTML( document.getElementById( 'target' ), '<section>...</section>' );

---

attributeJSON

attributeJSON - Get json object from element data attribute

Description

attributeJSON( name, element, silent = true ) // Object

Get json object from element data attribute, can optionally throw exceptions on error.

Parameters

Parameter	Type	Default	Description
name	String	-	Attribute name
element	HTMLElement	-	Element to read
silent	Boolean	true	False to throw error on parse Error

Return Values

Type/Value	Description
null	Invalid or empty attribute
Object	Parsed json object data

Examples

<div id="json-data" data-config='{"foo":1}'></div>

attributeJSON( 'data-config', document.getElementById( 'json-data' ) ); // { foo : 1 }

---

getElementTagType

getElementTagType - Get element tag type string

Description

getElementTagType( element ) // string

Get element tag type string, compiled from tagName + type.

Parameters

Parameter	Type	Default	Description
element	HTMLElement	-	Element to get type string from

Return Values

Type/Value	Description
String	Tag type string

Examples

getElementTagType( document.getElementById( 'input[type="hidden"]' ) ); // input-hidden

---

getPropertyValues

getPropertyValues - Get custom property values from given context

Description

getPropertyValues( values, context = null, assoc = true ) // string|Object|Array<string>

Get values from custom properties in given context, returns the actual computed value.

Parameters

Parameter	Type	Default	Description
values	string/Array	-	Property name/s excluding the double dash
context	Body/HTMLElement	null/:root	Context to read values from, default: html/root element
assoc	boolean	true	Return associative object with property names

Return Values

Type/Value	Description
String	Single property value
Object	Associative object with props
Array	List of values

Examples

:root {
   --prop-name: 10px; 
}

getPropertyValues( 'prop-name' ); // '10px'

---

prependChild

prependChild - Prepend node to node

Description

prepend( newNode, referenceNode ) // void

Prepend node as child of node, newNode is inserted before the firstChild of referenceNode.

Parameters

Parameter	Type	Default	Description
newNode	HTMLElement	-	Element to prepend
referenceNode	HTMLElement	-	Element to prepend to

Return Values

Type/Value	Description
void	None.

Examples

prepend( document.getElementById( 'node-to-insert' ), document.getElementById( 'node-to-prepend-to' ) );

---

uniqid

uniqid - Unique html attribute id

Description

uniqid( prefix = '', entropy = false ) // string

Get a unique html attribute id that is unused.

Parameters

Parameter	Type	Default	Description
prefix	String	''	Prefix the id with given string
entropy	Boolean	false	Increase the id entropy

Return Values

Type/Value	Description
String	Unique unused string id

Examples

uniqid( 'prefix-' ); // 'prefix-npnm623gm2'

---

requireUniqid

requireUniqid - Require unique html attribute id

Description

requireUniqid( element, prefix = '', entropy = false ) // string

Get a unique html attribute id that is unused.

Parameters

Parameter	Type	Default	Description
element	HTMLElement	-	Element that requires a unique id
prefix	String	''	Prefix the id with given string
entropy	Boolean	false	Increase the id entropy

Return Values

Type/Value	Description
String	Unique string id set for the element

Examples

requireUniqid( document.querySelector( '.requires-id' ), 'prefix-' ); // 'prefix-npnm623gm2'

---

unwrap

unwrap - Unwrap element

Description

unwrap( element ) // void

Removes the given element and preserves any children.

Parameters

Parameter	Type	Default	Description
element	HTMLElement	-	Element wrapper to remove

Return Values

Type/Value	Description
void	None.

Examples

unwrap( document.getElementById( 'element-to-unwrap' ) ); // void

---

wrap

wrap - Wrap element/s

Description

unwrap( elements, wrapper = 'div', strict = true ) // HTMLElement

Wraps given element or elements with a given element

Parameters

Parameter	Type	Default	Description
elements	HTMLElement/NodeList	-	Element/s to wrap
wrapper	HTMLElement/String	'div'	Element to wrap around elements
strict	Boolean	true	Throw error if wrapper is already connected

Return Values

Type/Value	Description
HTMLElement	The wrapper element reference

Examples

wrap( document.querySelectorAll( '.selector' ) ); // HTMLDivElement

---

Dev <[ DOM ]> Error