DOM

Methods

# (static) addClass(selector, newClass)

Adds one or more classes to the element(s) matching the selector.

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
newClass string | Array.<string>

Can either be a string if you only want to add one class or an array if you want to add multiple.
Since:
  • 1.0.0

# (static) find(selector, inElementopt) → {Element|null}

Finds and returns the first matching Node in the document.

Returns either an Element or null if nothing was found.

Parameters:
Name Type Attributes Default Description
selector string

The selector can be any valid CSS-selector, but no Element.
inElement Element | null <optional>
 null

You can pass an HTMLElement as second parameter to perform the query only on that element.
Since:
  • 1.0.0
Returns:
Type
Element | null

# (static) findAll(selector, inElementopt) → {NodeList}

Finds and returns all matching Nodes in the document.

Always returns a NodeListOf<Element>. If no matches were found, this list will be empty.

Parameters:
Name Type Attributes Default Description
selector string

The selector can be any valid CSS-selector, but no Element.
inElement Element | null <optional>
 null

You can pass an HTMLElement as second parameter to perform the query only on that element.
Since:
  • 1.0.0
Returns:
Type
NodeList

# (static) findAllOrNull(selector, inElement) → {NodeList|null}

Finds and returns all matching Nodes in the document.

Returns a NodeListOf<Element> or null if no matches were found.

This is an alternative to {@see DOM.findAll}, in case you need the same return value on not-found selectors as {@see DOM.find}.

Parameters:
Name Type Default Description
selector string

The selector can be any valid CSS-selector, but no Element.
inElement Element | null null

[inElement=null] - You can pass an HTMLElement as second parameter to perform the query only on that element.
Since:
  • 1.0.0
Returns:
Type
NodeList | null

# (static) getAttr(selector, attrName) → {any}

Gets the value of the specified attribute for a matching element.

Returns undefined if the attribute doesn't exist.

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
attrName string

Name of the attribute to get.
Since:
  • 1.0.0
Returns:
Type
any

# (static) getCSS(selector, property, pseudoElementopt) → {string|CSSStyleDeclaration|null}

Returns either the computed CSS-property of the first matching element as string or null if no element was found.

If you pass "*" as property, this function will return the whole CSSStyleDeclaration object instead

NOTE: Most properties return a string of their value with the according unit.

See DOM.getCSSInt or DOM.getCSSFloat if you want to return a numeric value.

Parameters:
Name Type Attributes Default Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
property string

The property to return the computed value of.
pseudoElement string | null <optional>
 null

Can be used to get properties of pseudo-elements like :after or :before.
Since:
  • 1.0.0
Returns:
Type
string | CSSStyleDeclaration | null

# (static) getCSSFloat(selector, property, pseudoElement) → {float|null}

Returns either the computed CSS-property of the first matching element as float/decimal or null if no element was found.

Parameters:
Name Type Default Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
property string

The property to return the computed value of.
pseudoElement null

Can be used to get properties of pseudo-elements like :after or :before.
Since:
  • 1.0.0
Returns:
Type
float | null

# (static) getCSSInt(selector, property, pseudoElement) → {int|null}

Returns either the computed CSS-property of the first matching element as integer or null if no element was found.

Parameters:
Name Type Default Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
property string

The property to return the computed value of.
pseudoElement null

Can be used to get properties of pseudo-elements like :after or :before.
Since:
  • 1.0.0
Returns:
Type
int | null

# (static) getDataAttr(selector, dataName) → {string|undefined}

Gets the value of the specified data-attribute on matching elements.

Returns undefined, if the attribute doesn't exist.

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
dataName string

Name of the data-attribute to get.
Since:
  • 1.0.0
Returns:
Type
string | undefined

# (static) hasAttr(selector, attrName) → {boolean}

Returns whether the matching element has the given attribute defined.

Returns true as long as it is defined, even if it is empty.

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
attrName string

Name of the attribute to check for.
Since:
  • 1.0.0
Returns:
Type
boolean

# (static) hasDataAttr(selector, dataName) → {boolean}

Returns whether the element has the given data-attribute.

Returns true as long as the name is defined, even if it is empty.

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
dataName string

Name of the data-attribute to check for.
Since:
  • 1.0.0
Returns:
Type
boolean

# (static) isAudioElement(element) → {boolean}

Returns whether the passed Element is an audio element.

Parameters:
Name Type Description
element Element

The Element to check. Can not be a selector.
Since:
  • 1.0.0
Returns:
Type
boolean

# (static) isHTMLElement(node) → {boolean}

Returns whether the passed Node is an HTMLElement.

Parameters:
Name Type Description
node Node

The Node object to check. Can not be a selector.
Since:
  • 1.0.0
Returns:
Type
boolean

# (static) isImageElement(element) → {boolean}

Returns whether the passed Element is either an img or picture element.

Parameters:
Name Type Description
element Element

The Element to check. Can not be a selector.
Since:
  • 1.0.0
Returns:
Type
boolean

# (static) isImgElement(element) → {boolean}

Returns whether the passed Element is an img element.

Parameters:
Name Type Description
element Element

The Element to check. Can not be a selector.
Since:
  • 1.0.0
Returns:
Type
boolean

# (static) isMediaElement(element) → {boolean}

Returns whether the passed Element is any type of media-node. This can either be an image, a video or an audio element.

Checks for DOM.isAudioElement, DOM.isImageElement and DOM.isVideoElement internally.

Parameters:
Name Type Description
element Element

The Element to check.
Since:
  • 1.0.0
Returns:
Type
boolean

# (static) isPictureElement(element) → {boolean}

Returns whether the passed Element is a picture element.

Parameters:
Name Type Description
element Element

The Element to check. Can not be a selector.
Since:
  • 1.0.0
Returns:
Type
boolean

# (static) isVideoElement(element) → {boolean}

Returns whether the passed Element is a video element.

Parameters:
Name Type Description
element Element

The Element to check. Can not be a selector.
Since:
  • 1.0.0
Returns:
Type
boolean

# (static) onEach(selector, exec)

Finds a matching NodeListOf<Element> for the selector and executes the given function with each Element in the list as parameter.

These will execute after each other, not all of them at once.

If no matches were found, the function will not be executed.

Make sure your given function expects the passed Element as parameter.

Parameters:
Name Type Description
selector string | NodeList

The selector can either be a valid CSS-selector or a DOM-Element.
exec function

The function to execute on each element.
Since:
  • 1.0.0

# (static) onFirst(selector, exec)

Finds the first matching Element for the selector and executes the given function with it as parameter.

If no matching element was found, the function will not be executed.

Make sure your given function expects the passed Element as parameter.

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
exec function

The function to execute with the found element as first parameter.
Since:
  • 1.0.0

# (static) remAttr(selector, attrName)

Removes the given attribute of every element matching the selector.

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
attrName string

Name of the attribute to remove.
Since:
  • 1.0.0

# (static) remDataAttr(selector, dataName)

Removes the specified data-attribute of matching elements.

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
dataName string

Name of the data-attribute to remove.
Since:
  • 1.0.0

# (static) removeClass(selector, remClass)

Removes one or more classes from the element(s) matching the selector.

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
remClass string | Array.<string>

Can either be a string, if you only want to remove one class, or an array if you want to remove multiple.
Since:
  • 1.0.0

# (static) setAttr(selector, attrName, attrValue)

Sets the value of the specified attribute for every matching element.

If the attribute didn't exist before it will be added, else updated.

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
attrName string

Name of the attribute to set.
attrValue string | number

New value of the attribute.
Since:
  • 1.0.0

# (static) setCSS(selector, cssObj)

Sets multiple CSS-properties on an matching element.

The passed object should have the form of { "propName1": "newValueWithUnit", "prop2": "123px", ... }

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
cssObj object

The objects with key-value-pairs of properties you want to update.
Since:
  • 1.0.0

# (static) setCSSProp(selector, property, value)

Sets the value for a given property on an matching element.

The value should be a string with units and you can only change one property. To update multiple properties at once see DOM.setCSS.

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
property string

The property name you want to change.
value string | number

The property value you want to set.
Since:
  • 1.0.0

# (static) setDataAttr(selector, dataName, dataValue)

Sets the value for the specified data-attribute on matching elements.

If the data-attribute didn't exist before it will be added, else updated.

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
dataName string

Name of the data-attribute to set.
dataValue string

New value of the data-attribute.
Since:
  • 1.0.0

# (static) setHTML(selector, htmlString)

Finds the first matching element for the given selector and replaces the innerHTML with the htmlString parameter. NOTE: Only use this method if you need to render trusted HTML-content. For just names and user-generated messages, please use the DOM.setText function instead.

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
htmlString string

The new HTML to execute and insert.
Since:
  • 1.0.0

# (static) setText(selector, text)

Finds the first matching element for the given selector and replaces the innerText with the text parameter.

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
text string

The new text to insert.
Since:
  • 1.0.0

# (static) setVolume(selector, volume)

Sets the volume for <audio> and <video> elements.

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
volume number

The volume should be a whole number between 0 and 100.
Since:
  • 1.0.0

# (static) swapClass(selector, remClass, newClass)

Removes one or more classes from the element(s) matching the selector and then adds one or more classes afterwards.

Shorter form of DOM.removeClass and DOM.addClass on the same element/selector.

Parameters:
Name Type Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
remClass string | Array.<string>

Can either be a string, if you only want to add one class, or an array if you want to add multiple.
newClass string | Array.<string>

Can either be a string, if you only want to remove one class, or an array if you want to remove multiple.
Since:
  • 1.0.0

# (static) updateAudioSrc(element, newSrc, type)

Updates the <source> children of an <audio> directly, depending on the given media-type.

NOTE: This is part of the {@see DOM.updateSrc} function and should not be called outside of that, unless you validated the parameters yourself before.

Parameters:
Name Type Description
element Element

The DOM-Element you want to update the source of.
newSrc string

The new source URL for the element
type string

Can be set, to only update the matching source tags.
Since:
  • 1.0.0

# (static) updateImgSrc(element, newSrc)

Updates the src attribute of an <img> directly.

NOTE: This is part of the {@see DOM.updateSrc} function and should not be called outside of that, unless you validated the parameters yourself before.

Parameters:
Name Type Description
element Element

The DOM-Element you want to update the source of.
newSrc string

The new source URL for the element
Since:
  • 1.0.0

# (static) updatePictureSrc(element, newSrc, media)

Updates the <source> children of a <picture> directly, depending on the given media-type.

NOTE: This is part of the {@see DOM.updateSrc} function and should not be called outside of that, unless you validated the parameters yourself before.

Parameters:
Name Type Description
element Element

The DOM-Element you want to update the source of.
newSrc string

The new source URL for the element
media string

Can be set, to only update the matching source tags.
Since:
  • 1.0.0

# (static) updateSrc(selector, newSrc, typeopt)

Updates the src attribute for image, audio and video elements.

If an element has multiple sources for different types defined, only the matching type will be updated.

The most commonly used types are video/mp4, video/webm, audio/mpeg & audio/ogg depending on the type of media you want to change.

If the media-type mismatches the element-type (e.g. you try to update an audio source to video/mpeg) the function will just exit without changing anything.

Parameters:
Name Type Attributes Default Description
selector string | Element

The selector can either be a valid CSS-selector or a DOM-Element.
newSrc string

The new source URL for the element
type string <optional>
 ""

Can be set to only update the matching source tags.
Since:
  • 1.0.0

# (static) updateVideoSrc(element, newSrc, type)

Updates the <source> children of a <video> directly, depending on the given media-type.

NOTE: This is part of the {@see DOM.updateSrc} function and should not be called outside of that, unless you validated the parameters yourself before.

Parameters:
Name Type Description
element Element

The DOM-Element you want to update the source of.
newSrc string

The new source URL for the element
type string

Can be set, to only update the matching source tags.
Since:
  • 1.0.0