API Docs for: 0.0.1
Show:

Element Class

Module: extend-element
Parent Module: vdom

Provides several methods that override native Element-methods to work with the vdom.

Copyright (c) 2014 ITSA - https://github.com/itsa
New BSD License - http://choosealicense.com/licenses/bsd-3-clause/

Methods

append

(
  • content
  • [escape]
  • [refElement]
  • [silent=false]
  • [allowScripts=false]
)
Element

Defined in src/vdom/partials/extend-element.js:982

Available since 0.0.1

Appends an Element or an Element's string-representation at the end of Element's innerHTML, or before the refElement.

Parameters:

  • content Element | ElementArray | String

    content to append

  • [escape] Boolean optional

    whether to insert escaped content, leading it into only text inserted

  • [refElement] Element optional

    reference Element where the content should be appended

  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

  • [allowScripts=false] Boolean optional

    whether scripts are allowed --> these should be defined with xscript instead of script

Returns:

Element:

the created Element (or the last when multiple)

appendChild

(
  • content
  • [escape]
)
Element

Adds a node to the end of the list of childNodes of a specified parent node.

Parameters:

Returns:

Element:

the Element that was appended

cloneNode

(
  • [deep]
)
Element

Defined in src/vdom/partials/extend-element.js:1069

Available since 0.0.1

Returns a duplicate of the node. Use cloneNode(true) for a deep clone.

Parameters:

  • [deep] Boolean optional

    whether to perform a deep clone: with all descendants

Returns:

Element:

a clone of this Element

compareDocumentPosition

(
  • otherElement
)
Number

Compares the position of the current node against another node in any other document.

Returnvalues are a composition of the following bitwise values:

  • Node.DOCUMENT_POSITION_DISCONNECTED === 1 (one of the Elements is not part of the dom)
  • Node.DOCUMENT_POSITION_PRECEDING === 2 (this Element comes before otherElement)
  • Node.DOCUMENT_POSITION_FOLLOWING === 4 (this Element comes after otherElement)
  • Node.DOCUMENT_POSITION_CONTAINS === 8 (otherElement trully contains -not equals- this Element)
  • Node.DOCUMENT_POSITION_CONTAINED_BY === 16 (Element trully contains -not equals- otherElement)

Parameters:

Returns:

Number:

A bitmask, use it this way: if (thisNode.compareDocumentPosition(otherNode) & Node.DOCUMENT_POSITION_FOLLOWING) {// otherNode is following thisNode}

contains

(
  • otherElement
  • [excludeItself=false]
  • [inspectProtectedNodes=false]
)
Boolean

Indicating whether this Element contains OR equals otherElement. If you need only to be sure the other Element lies inside, but not equals itself, set excludeItself true.

Parameters:

  • otherElement Element
  • [excludeItself=false] Boolean optional

    to exclude itself as a hit

  • [inspectProtectedNodes=false] Boolean optional

    no deepsearch in protected Nodes or iTags --> by default, these elements should be hidden

Returns:

Boolean:

whether this Element contains OR equals otherElement.

createTreeWalker

(
  • root
  • [whatToShow]
  • [filter]
)
TreeWalker

Defined in src/vdom/partials/extend-element.js:1240

Available since 0.0.1

Returns a newly created TreeWalker object with this Element as root.

The TreeWalker is life presentation of the dom. It gets updated when the dom changes.

Parameters:

  • root Element

    The root node at which to begin the NodeIterator's traversal.

  • [whatToShow] Number optional

    Filter specification constants from the NodeFilter DOM interface, indicating which nodes to iterate over. You can use or sum one of the next properties:

    • window.NodeFilter.SHOW_ALL === -1
    • window.NodeFilter.SHOW_ELEMENT === 1
    • window.NodeFilter.SHOW_COMMENT === 128
    • window.NodeFilter.SHOW_TEXT === 4

    A treewalker has the next methods:

    • treewalker.firstChild()
    • treewalker.lastChild()
    • treewalker.nextNode()
    • treewalker.nextSibling()
    • treewalker.parentNode()
    • treewalker.previousNode()
    • treewalker.previousSibling()

    A treewalker has the next properties:

    • treewalker.currentNode
    • treewalker.filter
    • treewalker.root
    • treewalker.whatToShow
  • [filter] NodeFilter | Function optional

    An object implementing the NodeFilter interface or a function. See https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter

Returns:

TreeWalker:

defineInlineStyle

(
  • value
)
chainable

Defined in src/vdom/partials/extend-element.js:1285

Available since 0.0.1

Sets the inline-style of the Element exactly to the specified value, overruling previous values. Making the Element's inline-style look like: style="value".

This is meant for a quick one-time setup. For individually inline style-properties to be set, you can use setInlineStyle().

Parameters:

  • value String

    the style string to be set

empty

(
  • [silent=false]
  • [full=false]
)
chainable

Defined in src/vdom/partials/extend-element.js:1300

Available since 0.0.1

Empties the content of the Element. Alias for thisNode.vTextContent = '';

Parameters:

  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

  • [full=false] Boolean optional

    whether system-nodes should be removed as well

first

(
  • [cssSelector]
  • [container]
)
Element

Defined in src/vdom/partials/extend-element.js:1317

Available since 0.0.1

Reference to the first of sibbling vNode's, where the related dom-node is an Element(nodeType===1).

Parameters:

  • [cssSelector] String optional

    to return the first Element that matches the css-selector

  • [container] HTMLElement optional

    the container-element to search within --> this lead into searching out of the same level

Returns:

firstOfChildren

(
  • [cssSelector]
)
Element

Defined in src/vdom/partials/extend-element.js:1336

Available since 0.0.1

Reference to the first child-Element, where the related dom-node an Element (nodeType===1).

Parameters:

  • [cssSelector] String optional

    to return the first Element that matches the css-selector

Returns:

forceIntoNodeView

(
  • [ancestor]
)
chainable

Defined in src/vdom/partials/extend-element.js:1349

Available since 0.0.1

Forces the Element to be inside an ancestor-Element that has the `overfow="scroll" set.

Parameters:

  • [ancestor] Element optional

    the Element where it should be forced into its view. Only use this when you know the ancestor and this ancestor has an overflow="scroll" property when not set, this method will seek through the doc-tree upwards for the first Element that does match this criteria.

forceIntoView

(
  • [notransition=false]
  • [rectangle]
)
chainable

Defined in src/vdom/partials/extend-element.js:1413

Available since 0.0.2

Forces the Element to be inside the window-view. Differs from scrollIntoView() in a way that forceIntoView() doesn't change the position when it's inside the view, whereas scrollIntoView() sets it on top of the view.

Parameters:

  • [notransition=false] Boolean optional

    set true if you are sure positioning is without transition. this isn't required, but it speeds up positioning. Only use when no transition is used: when there is a transition, setting this argument true would miscalculate the position.

  • [rectangle] Object optional

    Set this if you have already calculated the window-rectangle (used for preformance within drag-drop)

    • [x] Number optional

      scrollLeft of window

    • [y] Number optional

      scrollTop of window

    • [w] Number optional

      width of window

    • [h] Number optional

      height of window

getAll

(
  • cssSelector
  • [inspectProtectedNodes=false]
)
ElementArray

Defined in src/vdom/partials/extend-element.js:1474

Available since 0.0.1

Gets an ElementArray of Elements that lie within this Element and match the css-selector.

Parameters:

  • cssSelector String

    css-selector to match

  • [inspectProtectedNodes=false] Boolean optional

    no deepsearch in protected Nodes or iTags --> by default, these elements should be hidden

Returns:

ElementArray:

ElementArray of Elements that match the css-selector

getAttr

(
  • attributeName
)
String | Null

Defined in src/vdom/partials/extend-element.js:1487

Available since 0.0.1

Gets an attribute of the Element.

Alias for getAttribute().

Parameters:

Returns:

String | Null:

value of the attribute

getAttribute

(
  • attributeName
)
String | Null

Defined in src/vdom/partials/extend-element.js:1513

Available since 0.0.1

Gets an attribute of the Element.

Same as getAttr().

Parameters:

Returns:

String | Null:

value of the attribute

getAttrs

(
  • attributeName
)
Object

Defined in src/vdom/partials/extend-element.js:1501

Available since 0.0.1

Returns all attributes as defined as an key/value object.

Parameters:

Returns:

Object:

all attributes as on Object

getCascadeStyle

(
  • cssProperty
  • [pseudo]
)
String | Object

Defined in src/vdom/partials/extend-element.js:1710

Available since 0.0.1

Returns cascaded style of the specified property. Cascaded means: the actual present style, the way it is visible (calculated through the DOM-tree).

  • Note1: values are absolute: percentages and points are converted to absolute values, sizes are in pixels, colors in rgb/rgba-format.
  • Note2: you cannot query shotcut-properties: use margin-left instead of margin.
  • Note3: no need to camelCase cssProperty: both margin-left as well as marginLeft are fine.
  • Note4: you can query transition, transform, perspective and transform-origin instead of their vendor-specific properties.
  • Note5: transition or transform return an Object instead of a String.

Parameters:

  • cssProperty String

    property that is queried

  • [pseudo] String optional

    to query pseudo-element, fe: :before or :first-line

Returns:

String | Object:

value for the css-property: this is an Object for the properties transition or transform

getChildren

() ElementArray

Defined in src/vdom/partials/extend-element.js:1528

Available since 0.0.1

Returns a live collection of the Element-childNodes.

Returns:

getClassList

()

Defined in src/vdom/partials/extend-element.js:1546

Available since 0.0.1

Returns a token list of the class attribute of the element. See: https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList

Returns:

DOMTokenList

getData

(
  • key
)
Any | Undefined

Defined in src/vdom/partials/extend-element.js:1564

Available since 0.0.1

Returns data set specified by key. If not set, undefined will be returned. The data is efficiently stored on the vnode.

Parameters:

Returns:

Any | Undefined:

data set specified by key

getElement

(
  • cssSelector
  • [inspectProtectedNodes=false]
)
Element | Null

Defined in src/vdom/partials/extend-element.js:1578

Available since 0.0.1

Gets one Element, specified by the css-selector. To retrieve a single element by id, you need to prepend the id-name with a #. When multiple Element's match, the first is returned.

Parameters:

  • cssSelector String

    css-selector to match

  • [inspectProtectedNodes=false] Boolean optional

    no deepsearch in protected Nodes or iTags --> by default, these elements should be hidden

Returns:

Element | Null:

the Element that was search for

getElementById

(
  • id
  • [inspectProtectedNodes=false]
)
Element | Null

Returns the Element matching the specified id, which should should be a descendant of this Element.

Parameters:

  • id String

    id of the Element

  • [inspectProtectedNodes=false] Boolean optional

    no deepsearch in protected Nodes or iTags --> by default, these elements should be hidden

Returns:

Element | Null:

getElementOnAvailable

(
  • cssSelector
  • [inspectProtectedNodes=false]
)
Promise

Provided by the event-dom module.

Defined in src/event-dom/event-dom.js:778

Available since 0.0.1

Gets one Element, specified by the css-selector. Either when alreasy available, or when it gets inserted in the dom. To retrieve a single element by id, you need to prepend the id-name with a #. When multiple Element's match, the first is returned.

Returns a Promise with the Element as variable.

Parameters:

  • cssSelector String

    css-selector to match

  • [inspectProtectedNodes=false] Boolean optional

    no deepsearch in protected Nodes or iTags --> by default, these elements should be hidden

Returns:

Promise:

with the Element that was search for as variable.

getHTML

(
  • [exclude]
  • [includeSystemNodes=false]
)
String

Defined in src/vdom/partials/extend-element.js:1605

Available since 0.0.1

Gets innerHTML of the dom-node. Goes through the vdom, so it's superfast.

Use this method instead of innerHTML

Parameters:

  • [exclude] Array | HTMLElement optional

    an array of HTMLElements - or just 1 - to be excluded

  • [includeSystemNodes=false] Boolean optional

    whether system-nodes and i-tag inner-content should be returned. By default, they stay hidden.

Returns:

getId

() String | Undefined

Defined in src/vdom/partials/extend-element.js:1621

Available since 0.0.1

Returns the Elments id

Returns:

String | Undefined:

Elements id

getInlineStyle

(
  • cssProperty
  • [pseudo]
)
String | Undefined

Defined in src/vdom/partials/extend-element.js:1632

Available since 0.0.1

Returns inline style of the specified property. Inline means: what is set directly on the Element, this doesn't mean necesairy how it is looked like: when no css is set inline, the Element might still have an appearance because of other CSS-rules.

In most cases, you would be interesting in using getStyle() instead.

Note: no need to camelCase cssProperty: both margin-left as well as marginLeft are fine

Parameters:

  • cssProperty String

    the css-property to look for

  • [pseudo] String optional

    to look inside a pseudo-style

Returns:

String | Undefined:

css-style

getInlineTransition

(
  • [transitionProperty]
  • [pseudo]
)
Object

Defined in src/vdom/partials/extend-element.js:1658

Available since 0.0.1

Returns inline transition-css-property. Inline means: what is set directly on the Element, When transition is set inline, no parent transition-rules apply.

Parameters:

  • [transitionProperty] String optional

    the css-property to look for

  • [pseudo] String optional

    to look inside a pseudo-style

Returns:

Object:

the transition-object, with the properties:

  • duration {Number}
  • timingFunction {String}
  • delay {Number}

getOuterHTML

(
  • [exclude]
  • [includeSystemNodes=false]
)
String

Defined in src/vdom/partials/extend-element.js:1683

Available since 0.0.1

Gets the outerHTML of the dom-node. Goes through the vdom, so it's superfast.

Use this method instead of outerHTML

Parameters:

  • [exclude] Array | HTMLElement optional

    an array of HTMLElements - or just 1 - to be excluded

  • [includeSystemNodes=false] Boolean optional

    whether system-nodes and i-tag inner-content should be returned. By default, they stay hidden.

Returns:

getParent

() Element

Returns the Element's parent Element.

Returns:

getTagName

() String

Defined in src/vdom/partials/extend-element.js:1820

Available since 0.0.1

Elements tag-name in uppercase (same as nodeName).

Returns:

getText

()

Defined in src/vdom/partials/extend-element.js:1831

Available since 0.0.1

Gets the innerContent of the Element as plain text. Goes through the vdom, so it's superfast.

Use this method instead of textContent

Returns:

String

getTransition

(
  • transitionProperty
  • [pseudo]
)
Object

Defined in src/vdom/partials/extend-element.js:1741

Available since 0.0.1

Returns cascaded "transition" style of the specified trandform-property. Cascaded means: the actual present style, the way it is visible (calculated through the DOM-tree).

Note1: When "transition" is set inline, ONLY inline transtition is active! Thus, if parentNode has "transition: width 2s" and inline has "transition: height 3s", then the transition will be "transition: height 3s" --> returning "undefined" for transitionProperty=width. Note2: in case of "transition: all" --> these values will be returned for every "transitionProperty" (even when querying "width")

Parameters:

  • transitionProperty String

    transform property that is queried, f.e. "width", or "all"

  • [pseudo] String optional

    to query pseudo-element, fe: :before or :first-line

Returns:

Object:

the transition-object, with the properties:

  • duration {Number}
  • timingFunction {String}
  • delay {Number}

getValue

() String

Defined in src/vdom/partials/extend-element.js:1845

Available since 0.0.1

Gets the value of the following Elements:

  • input
  • textarea
  • select
  • any container that is contenteditable

Returns:

hasAttr

(
  • attributeName
)
Boolean

Defined in src/vdom/partials/extend-element.js:1869

Available since 0.0.1

Whether the Element has the attribute set.

Alias for hasAttribute().

Parameters:

Returns:

Boolean:

Whether the Element has the attribute set.

hasAttribute

(
  • attributeName
)
Boolean

Defined in src/vdom/partials/extend-element.js:1883

Available since 0.0.1

Whether the Element has the attribute set.

Same as hasAttr().

Parameters:

Returns:

Boolean:

Whether the Element has the attribute set.

hasAttributes

() Boolean

Indicating if the current element has any attributes or not.

Returns:

Boolean:

Whether the current element has any attributes or not.

hasChildren

() Boolean

Defined in src/vdom/partials/extend-element.js:1908

Available since 0.0.1

Indicating if the Element has any children (childNodes with nodeType of 1).

Returns:

Boolean:

whether the Element has children

hasClass

(
  • className
)
Boolean

Defined in src/vdom/partials/extend-element.js:1919

Available since 0.0.1

Checks whether the className is present on the Element.

Parameters:

  • className String | Array

    the className to check for. May be an Array of classNames, which all needs to be present.

Returns:

Boolean:

whether the className (or classNames) is present on the Element

hasData

(
  • key
)
Boolean

Defined in src/vdom/partials/extend-element.js:1931

Available since 0.0.1

If the Element has data set specified by key. The data could be set with setData().

Parameters:

Returns:

hasFocus

(
  • [inside]
)
Boolean

Defined in src/vdom/partials/extend-element.js:1944

Available since 0.0.1

Indicates whether Element currently has the focus.

Parameters:

  • [inside] Object optional

    whether focus may also lie on a descendent inside

Returns:

hasFocusInside

() Boolean

Defined in src/vdom/partials/extend-element.js:1956

Available since 0.0.1

Indicates whether the current focussed Element lies inside this Element (on a descendant Element).

Returns:

hasInlineStyle

(
  • cssProperty
  • [pseudo]
)
Boolean

Defined in src/vdom/partials/extend-element.js:1967

Available since 0.0.1

Returns whether the inline style of the specified property is present. Inline means: what is set directly on the Element.

Note: no need to camelCase cssProperty: both margin-left as well as marginLeft are fine

Parameters:

  • cssProperty String

    the css-property to look for

  • [pseudo] String optional

    to look inside a pseudo-style

Returns:

Boolean:

whether the inlinestyle was present

hasInlineTransition

(
  • transitionProperty
  • [pseudo]
)
Boolean

Defined in src/vdom/partials/extend-element.js:1982

Available since 0.0.1

Returns whether the specified inline transform-css-property is present. Inline means: what is set directly on the Element.

See more about tranform-properties: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Parameters:

  • transitionProperty String

    the css-property to look for

  • [pseudo] String optional

    to look inside a pseudo-style

Returns:

Boolean:

whether the inline transform-css-property was present

hasTransition

(
  • transitionProperty
  • [pseudo]
)
Boolean

Defined in src/vdom/partials/extend-element.js:1997

Available since 0.0.1

Returns whether the specified transform-property is active.

Note1: When "transition" is set inline, ONLY inline transtition is active! Thus, if parentNode has "transition: width 2s" and inline has "transition: height 3s", then hasTransition('width') will return false. Note2: in case of "transition: all" --> hasTransition() will always true for every transitionProperty.

Parameters:

  • transitionProperty String

    the css-property to look for

  • [pseudo] String optional

    to look inside a pseudo-style

Returns:

Boolean:

whether the inlinestyle was present

hide

(
  • [fade]
)
This | Promise

Defined in src/vdom/partials/extend-element.js:2015

Available since 0.0.1

Hides a node by making it floated and removing it out of the visible screen. Hides immediately without fade, or will fade when fade is specified.

Parameters:

  • [fade] Number optional

    sec to fade (you may use 0.1)

Returns:

This | Promise:

fulfilled when the element is ready hiding, or rejected when showed up again (using node.show) before fully hided.

inDOM

() Boolean

Defined in src/vdom/partials/extend-element.js:2075

Available since 0.0.1

Indicates whether the Element currently is part if the DOM.

Returns:

Boolean:

whether the Element currently is part if the DOM.

insertBefore

(
  • domNode
  • refDomNode
  • [escape]
)
Node

Inserts domNode before refDomNode.

Parameters:

  • domNode Node | Element | ElementArray | String

    content to insert

  • refDomNode Element

    The Element before which newElement is inserted.

  • [escape] Boolean optional

    whether to insert escaped content, leading it into only text inserted

Returns:

Node:

the Element being inserted (equals domNode)

inside

(
  • selector
)
Element | False

Defined in src/vdom/partials/extend-element.js:2089

Available since 0.0.1

Checks whether the Element lies within the specified selector (which can be a CSS-selector or a Element)

Parameters:

  • selector Element | String

    the selector, specified by a Element or a css-selector

Returns:

Element | False:

the nearest Element that matches the selector, or false when not found

Example:

var divnode = childnode.inside('div.red');

var divnode = childnode.inside(containerNode);

insidePos

(
  • x
  • y
)
Boolean

Defined in src/vdom/partials/extend-element.js:2119

Available since 0.0.1

Checks whether a point specified with x,y is within the Element's region.

Parameters:

  • x Number

    x-value for new position (coordinates are page-based)

  • y Number

    y-value for new position (coordinates are page-based)

Returns:

Boolean:

whether there is a match

isItag

() Boolean

Defined in src/vdom/partials/extend-element.js:2151

Available since 0.0.1

Whether the element is an Itag-element

Returns:

isItag

() Boolean

Defined in src/vdom/partials/extend-element.js:2179

Available since 0.0.1

Whether the element is an Itag-element

Returns:

last

(
  • [cssSelector]
  • [container]
)
Element

Defined in src/vdom/partials/extend-element.js:2190

Available since 0.0.1

Reference to the last of sibbling vNode's, where the related dom-node is an Element(nodeType===1).

Parameters:

  • [cssSelector] String optional

    to return the last Element that matches the css-selector

  • [container] HTMLElement optional

    the container-element to search within --> this lead into searching out of the same level

Returns:

lastOfChildren

(
  • [cssSelector]
)
Element

Defined in src/vdom/partials/extend-element.js:2210

Available since 0.0.1

Reference to the last child-Element, where the related dom-node an Element (nodeType===1).

Parameters:

  • [cssSelector] String optional

    to return the last Element that matches the css-selector

Returns:

matches

(
  • [cssSelector]
)
Boolean

Defined in src/vdom/partials/extend-element.js:2223

Available since 0.0.1

Indicates if the element would be selected by the specified selector string. Alias for matchesSelector()

Parameters:

  • [cssSelector] String optional

    the css-selector to check for

Returns:

matchesSelector

(
  • [cssSelector]
)
Boolean

Defined in src/vdom/partials/extend-element.js:2236

Available since 0.0.1

Indicates if the element would be selected by the specified selector string. Alias for matches()

Parameters:

  • [cssSelector] String optional

    the css-selector to check for

Returns:

next

(
  • [cssSelector]
  • [container]
)
Element | Null

Defined in src/vdom/partials/extend-element.js:2249

Available since 0.0.1

Reference to the next of sibbling Element, where the related dom-node is an Element(nodeType===1).

Parameters:

  • [cssSelector] String optional

    css-selector to be used as a filter

  • [container] HTMLElement optional

    the container-element to search within --> this lead into searching out of the same level

Returns:

Element | Null:

prepend

(
  • content
  • [escape]
  • [refElement]
  • [silent=false]
  • [allowScripts=false]
)
Element

Defined in src/vdom/partials/extend-element.js:2288

Available since 0.0.1

Prepends a Element or text at the start of Element's innerHTML, or before the refElement.

Parameters:

  • content Element | Element | ElementArray | String

    content to prepend

  • [escape] Boolean optional

    whether to insert escaped content, leading it into only text inserted

  • [refElement] Element optional

    reference Element where the content should be prepended

  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

  • [allowScripts=false] Boolean optional

    whether scripts are allowed --> these should be defined with xscript instead of script

Returns:

Element:

the created Element (or the last when multiple)

previous

(
  • [cssSelector]
  • [container]
)
Element | Null

Defined in src/vdom/partials/extend-element.js:2370

Available since 0.0.1

Reference to the previous of sibbling Element, where the related dom-node is an Element(nodeType===1).

Parameters:

  • [cssSelector] String optional

    css-selector to be used as a filter

  • [container] HTMLElement optional

    the container-element to search within --> this lead into searching out of the same level

Returns:

Element | Null:

querySelector

(
  • selectors
  • [inspectProtectedNodes=false]
  • [refNode]
  • [domPosition]
)
Element

Returns the first Element within the Element, that matches the CSS-selectors. You can pass one, or multiple CSS-selectors. When passed multiple, they need to be separated by a comma.

Parameters:

  • selectors String

    CSS-selector(s) that should match

  • [inspectProtectedNodes=false] Boolean optional

    no deepsearch in protected Nodes or iTags --> by default, these elements should be hidden

  • [refNode] HTMLElement optional

    reference-node where the found node should be before or after: specified by domPosition

  • [domPosition] Number optional

    The position to accept, compared to refNode. Should be either:

    • Node.DOCUMENT_POSITION_PRECEDING === 2 (this Element comes before otherElement)
    • Node.DOCUMENT_POSITION_FOLLOWING === 4 (this Element comes after otherElement)

Returns:

querySelectorAll

(
  • selectors
  • [inspectProtectedNodes=false]
  • [refNode]
  • [domPosition]
)
ElementArray

Returns an ElementArray of all Elements within the Element, that match the CSS-selectors. You can pass one, or multiple CSS-selectors. When passed multiple, they need to be separated by a comma.

querySelectorAll is a snapshot of the dom at the time this method was called. It is not updated when changes of the dom are made afterwards.

Parameters:

  • selectors String

    CSS-selector(s) that should match

  • [inspectProtectedNodes=false] Boolean optional

    no deepsearch in protected Nodes or iTags --> by default, these elements should be hidden

  • [refNode] HTMLElement optional

    reference-node where the found nodes should be before or after: specified by domPosition

  • [domPosition] Number optional

    The position to accept, compared to refNode. Should be either:

    • Node.DOCUMENT_POSITION_PRECEDING === 2 (this Element comes before otherElement)
    • Node.DOCUMENT_POSITION_FOLLOWING === 4 (this Element comes after otherElement)

Returns:

ElementArray:

non-life Array (snapshot) with Elements

rectangleInside

(
  • outboundElement
)
Boolean

Defined in src/vdom/partials/extend-element.js:2526

Available since 0.0.1

Checks whether the Element has its rectangle inside the outbound-Element. This is no check of the DOM-tree, but purely based upon coordinates.

Parameters:

  • outboundElement Element

    the Element where this element should lie inside

Returns:

Boolean:

whether the Element lies inside the outboundElement

remove

(
  • [silent=false]
)
Node

Defined in src/vdom/partials/extend-element.js:2545

Available since 0.0.1

Removes the Element from the DOM. Alias for thisNode.parentNode.removeChild(thisNode);

Parameters:

  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

Returns:

Node:

the DOM-node that was removed. You could re-insert it at a later time.

removeAttr

(
  • attributeName
  • [silent=false]
)

Defined in src/vdom/partials/extend-element.js:2603

Available since 0.0.1

Removes the attribute from the Element.

Use removeAttr() to be able to chain.

Parameters:

  • attributeName String
  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

removeAttr

(
  • attributeName
  • [silent=false]
)
chainable

Defined in src/vdom/partials/extend-element.js:2565

Available since 0.0.1

Removes the attribute from the Element.

Alias for removeAttribute() BUT is chainable instead (removeAttribute is not).

Parameters:

  • attributeName String
  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

removeAttributeNS

(
  • nameSpace
  • attributeName
  • [silent=false]
)

Removes the attribute of the Elementinside a specified namespace

Parameters:

  • nameSpace String

    the namespace where to attribuyte should be set in

  • attributeName String
  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

removeAttrs

(
  • attributeData
  • [silent=false]
)
chainable

Defined in src/vdom/partials/extend-element.js:2581

Available since 0.0.1

Removes multiple attributes on the Element. The argument should be one ore more AttributeNames.

Parameters:

  • attributeData Array | String
  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

Example:

instance.removeAttrs(['tabIndex', 'style']);

removeChild

(
  • domNode
)
Node

Removes the Element's child-Node from the DOM.

Parameters:

  • domNode Node

    the child-Node to remove

Returns:

Node:

the DOM-node that was removed. You could re-insert it at a later time.

removeClass

(
  • className
  • [returnPromise]
  • [transitionFix]
  • [silent=false]
)
Promise | This

Defined in src/vdom/partials/extend-element.js:2648

Available since 0.0.1

Removes a className from the Element.

Parameters:

  • className String | Array

    the className that should be removed. May be an Array of classNames.

  • [returnPromise] Boolean optional

    whether to return a Promise instead of this, which might be useful in case of transition-properties. The promise will fullfil when the transition is ready, or immediately when no transitioned.

  • [transitionFix] Object optional

    set this to true if you experience transition-problems due to wrong calculated css (mostly because of the auto value) Setting this parameter, will calculate the true css of the transitioned properties and set this temporarely inline, to fix the issue. Don't use it when not needed, it has a slightly performancehit. No need to set when returnPromise is set --> returnPromise always handles the transitionFix.

  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

Returns:

Promise | This:

In case returnPromise is set, a Promise returns with the next handles:

  • cancel() {Promise}
  • freeze() {Promise}
  • unfreeze()
  • finish() {Promise}
These handles resolve with the elapsed-time as first argument of the callbackFn

removeData

(
  • [key]
  • [deep]
)
chainable

Defined in src/vdom/partials/extend-element.js:2691

Available since 0.0.1

Removes data specified by key that was set by using setData(). When no arguments are passed, all node-data (key-value pairs) will be removed.

Parameters:

  • [key] String optional

    name of the key, when not set, all data is removed

  • [deep] Boolean optional

    whether to set the data to all descendants recursively

removeId

() chainable

Defined in src/vdom/partials/extend-element.js:2721

Available since 0.0.1

Removes the Elment's id.

removeInlineStyle

(
  • cssProperty
  • [pseudo]
  • [returnPromise]
)
chainable

Defined in src/vdom/partials/extend-element.js:2732

Available since 0.0.1

Removes a css-property (inline) out of the Element. No need to use camelCase.

Parameters:

  • cssProperty String

    the css-property to remove

  • [pseudo] String optional

    to look inside a pseudo-style

  • [returnPromise] Boolean optional

    whether to return a Promise instead of this, which might be useful in case of transition-properties. The promise will fullfil when the transition is ready, or immediately when no transitioned.

removeInlineStyles

(
  • cssProperties
  • [returnPromise]
)
chainable

Defined in src/vdom/partials/extend-element.js:2748

Available since 0.0.1

Removes multiple css-properties (inline) out of the Element. You need to supply an Array of Objects, with the properties:

  • property {String}
  • pseudo {String}
    • No need to use camelCase.

Parameters:

  • cssProperties Array | Object

    Array of objects, Strings (or 1 Object/String). When String, then speduo is considered as undefined. When Objects, they need the properties:

    • property {String}
    • pseudo {String}
  • [returnPromise] Boolean optional

    whether to return a Promise instead of this, which might be useful in case of transition-properties. The promise will fullfil when the transition is ready, or immediately when no transitioned.

removeInlineTransition

(
  • transitionProperty
  • [pseudo]
)
chainable

Defined in src/vdom/partials/extend-element.js:2914

Available since 0.0.1

Removes a subtype transform-css-property of (inline) out of the Element. This way you can sefely remove partial transform-properties while remaining the other inline transform css=properties.

See more about tranform-properties: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Parameters:

  • transitionProperty String

    the css-transform property to remove

  • [pseudo] String optional

    to look inside a pseudo-style

removeInlineTransitions

(
  • transitionProperties
)
chainable

Defined in src/vdom/partials/extend-element.js:2931

Available since 0.0.1

Removes multiple subtype transform-css-property of (inline) out of the Element. This way you can sefely remove partial transform-properties while remaining the other inline transform css=properties. You need to supply an Array of Objects, with the properties:

Parameters:

  • transitionProperties Array | Object

    the css-transform properties to remove

replace

(
  • content
  • [escape]
)
Element

Defined in src/vdom/partials/extend-element.js:2978

Available since 0.0.1

Replaces the Element with a new Element.

Parameters:

Returns:

Element:

the created Element (or the last when multiple)

replaceChild

(
  • newElement
  • oldVChild
  • [escape]
)
Element

Defined in src/vdom/partials/extend-element.js:2999

Available since 0.0.1

Replaces the Element's child-Element with a new Element.

Parameters:

  • newElement Element

    the new Element

  • oldVChild Element

    the Element to be replaced

  • [escape] Boolean optional

    whether to insert escaped content, leading it into only text inserted

Returns:

Element:

the Element that was removed (equals oldVChild)

replaceClass

(
  • prevClassName
  • newClassName
  • [force
  • [returnPromise]
  • [transitionFix]
  • [silent=false]
)
Promise | This

Defined in src/vdom/partials/extend-element.js:3014

Available since 0.0.1

Replaces the className of the Element with a new className. If the previous className is not available, the new className is set nevertheless.

Parameters:

  • prevClassName String

    the className to be replaced

  • newClassName String

    the className to be set

  • [force Boolean

    ] whether the new className should be set, even is the previous className isn't there

  • [returnPromise] Boolean optional

    whether to return a Promise instead of this, which might be useful in case of transition-properties. The promise will fullfil when the transition is ready, or immediately when no transitioned.

  • [transitionFix] Object optional

    set this to true if you experience transition-problems due to wrong calculated css (mostly because of the auto value) Setting this parameter, will calculate the true css of the transitioned properties and set this temporarely inline, to fix the issue. Don't use it when not needed, it has a slightly performancehit. No need to set when returnPromise is set --> returnPromise always handles the transitionFix.

  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

Returns:

Promise | This:

In case returnPromise is set, a Promise returns with the next handles:

  • cancel() {Promise}
  • freeze() {Promise}
  • unfreeze()
  • finish() {Promise}
These handles resolve with the elapsed-time as first argument of the callbackFn

scrollTo

(
  • x
  • y
)
chainable

Defined in src/vdom/partials/extend-element.js:3063

Available since 0.0.1

Scrolls the content of the Element into the specified scrollposition. Only available when the Element has overflow.

Parameters:

  • x Number

    left-offset in pixels

  • y Number

    top-offset in pixels

setAttr

(
  • attributeName
  • value
  • [silent=false]
)
chainable

Defined in src/vdom/partials/extend-element.js:3080

Available since 0.0.1

Sets the attribute on the Element with the specified value.

Alias for setAttribute(), BUT differs in a way that setAttr is chainable, setAttribute is not.

Parameters:

  • attributeName String
  • value Any

    the value that belongs to key

  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

setAttribute

(
  • attributeName
  • value
  • [silent=false]
)

Sets the attribute on the Element with the specified value.

Alias for setAttr(), BUT differs in a way that setAttr is chainable, setAttribute is not.

Parameters:

  • attributeName String
  • value String

    the value for the attributeName

  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

setAttributeNS

(
  • nameSpace
  • attributeName
  • value
  • [silent=false]
)

Sets the attribute on the Element with the specified value inside a specified namespace

Parameters:

  • nameSpace String

    the namespace where to attribuyte should be set in

  • attributeName String
  • value String

    the value for the attributeName

  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

setAttrs

(
  • attributeData
  • [silent=false]
)
chainable

Defined in src/vdom/partials/extend-element.js:3133

Available since 0.0.1

Sets multiple attributes on the Element with the specified value. The argument should be one ore more Objects with the properties: name and value

Parameters:

  • attributeData Array | Object
  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

Example:

instance.setAttrs([ {name: 'tabIndex', value: '0'}, {name: 'style', value: 'color: #000;'} ]);

setClass

(
  • className
  • [returnPromise]
  • [transitionFix]
  • [silent=false]
)
Promise | This

Defined in src/vdom/partials/extend-element.js:3158

Available since 0.0.1

Adds a class to the Element. If the class already exists it won't be duplicated.

Parameters:

  • className String | Array

    className to be added, may be an array of classNames

  • [returnPromise] Boolean optional

    whether to return a Promise instead of this, which might be useful in case of transition-properties. The promise will fullfil when the transition is ready, or immediately when no transitioned.

  • [transitionFix] Object optional

    set this to true if you experience transition-problems due to wrong calculated css (mostly because of the auto value) Setting this parameter, will calculate the true css of the transitioned properties and set this temporarely inline, to fix the issue. Don't use it when not needed, it has a slightly performancehit. No need to set when returnPromise is set --> returnPromise always handles the transitionFix.

  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

Returns:

Promise | This:

In case returnPromise is set, a Promise returns with the next handles:

  • cancel() {Promise}
  • freeze() {Promise}
  • unfreeze()
  • finish() {Promise}
These handles resolve with the elapsed-time as first argument of the callbackFn

setData

(
  • key
  • value
  • [deep]
)
chainable

Defined in src/vdom/partials/extend-element.js:3201

Available since 0.0.1

Stores arbitary data at the Element (actually at vnode). This has nothing to do with node-attributes whatsoever, it is just a way to bind any data to the specific Element so it can be retrieved later on with getData().

Parameters:

  • key String

    name of the key

  • value Any

    the value that belongs to key

  • [deep] Boolean optional

    whether to set the data to all descendants recursively

setHTML

(
  • val
  • [silent=false]
  • [allowScripts=false]
)
chainable

Defined in src/vdom/partials/extend-element.js:3227

Available since 0.0.1

Sets the innerHTML of both the vnode as well as the representing dom-node. Goes through the vdom, so it's superfast.

Use this method instead of innerHTML

Syncs with the DOM.

Parameters:

  • val String

    the new value to be set

  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

  • [allowScripts=false] Boolean optional

    whether scripts are allowed --> these should be defined with xscript instead of script

setId

(
  • val
)
chainable

Defined in src/vdom/partials/extend-element.js:3254

Available since 0.0.1

Sets the Elments id

Parameters:

setInlineStyle

(
  • cssProperty
  • value
  • [pseudo]
  • [returnPromise]
)
Promise | This

Defined in src/vdom/partials/extend-element.js:3266

Available since 0.0.1

Sets a css-property (inline) for the Element.

Note1: Do not use vendor-specific properties, but general (like transform instead of -webkit-transform) This method will use the appropriate css-property. Note2: no need to camelCase cssProperty: both margin-left as well as marginLeft are fine

Parameters:

  • cssProperty String

    the css-property to be set

  • value String

    the css-value

  • [pseudo] String optional

    to look inside a pseudo-style

  • [returnPromise] Boolean optional

    whether to return a Promise instead of this, which might be useful in case of transition-properties. The promise will fullfil when the transition is ready, or immediately when no transitioned.

Returns:

Promise | This:

setInlineStyles

(
  • cssProperties
  • [returnPromise]
)
Promise | This

Defined in src/vdom/partials/extend-element.js:3290

Available since 0.0.1

Sets multiple css-properties (inline) for the Element at once.

Note1: Do not use vendor-specific properties, but general (like transform instead of -webkit-transform) This method will use the appropriate css-property. Note2: no need to camelCase cssProperty: both margin-left as well as marginLeft are fine

Parameters:

  • cssProperties Array | Object

    the css-properties to be set, specified as an Array of Objects, or 1 Object. The objects should have the next properties:

    • property {String}
    • value {String}
    • pseudo {String} (optional) --> not: not supported yet in browsers

  • [returnPromise] Boolean optional

    whether to return a Promise instead of this, which might be useful in case of transition-properties. The promise will fullfil when the transition is ready, or immediately when no transitioned.

Returns:

Promise | This:

setOuterHTML

(
  • val
  • [silent=false]
)
chainable

Defined in src/vdom/partials/extend-element.js:3539

Available since 0.0.1

Gets or sets the outerHTML of both the Element as well as the representing dom-node. Goes through the vdom, so it's superfast.

Use this property instead of outerHTML

Syncs with the DOM.

Parameters:

  • val String

    the new value to be set

  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

setStyle

(
  • transitionProperties
  • [pseudo]
)
chainable

Defined in src/vdom/partials/extend-element.js:3492

Available since 0.0.1

Sets a transform-css-property (inline) for the Element.

See more about transitions: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Parameters:

  • transitionProperties Array

    the css-transition-properties to be set, specified as an Array of Objects. The objects should have the next properties:

    • property {String}
    • duration {Number}
    • timingFunction {String} (optional)
    • delay {Number} (optional)
    • pseudo {String} (optional)

  • [pseudo] String optional

    to look inside a pseudo-style

setStyle

(
  • setInlineTransition
  • duration
  • [timingFunction]
  • delay
  • [pseudo]
)
chainable

Defined in src/vdom/partials/extend-element.js:3473

Available since 0.0.1

Sets a transform-css-property (inline) for the Element.

See more about transitions: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Parameters:

setText

(
  • val
  • [silent=false]
)
chainable

Defined in src/vdom/partials/extend-element.js:3562

Available since 0.0.1

Sets the innerContent of the Element as plain text. Goes through the vdom, so it's superfast.

Use this method instead of textContent

Syncs with the DOM.

Parameters:

  • val String

    the textContent to be set

  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

setValue

(
  • val
  • [silent=false]
)
chainable

Defined in src/vdom/partials/extend-element.js:3585

Available since 0.0.1

Sets the value of the following Elements:

  • input
  • textarea
  • select
  • any container that is contenteditable

Will emit a valuechange-event when a new value is set and ITSA's event-module is active.

Parameters:

  • val String

    thenew value to be set

  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit. Only appropriate for contenteditable nodes.

setXY

(
  • x
  • y
  • [constrain]
  • [notransition=false]
)
Promise | This

Defined in src/vdom/partials/extend-element.js:3644

Available since 0.0.1

Set the position of an html element in page coordinates. The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).

If the Element has the attribute xy-constrian set, then its position cannot exceed any matching container it lies within.

Parameters:

  • x Number

    x-value for new position (coordinates are page-based)

  • y Number

    y-value for new position (coordinates are page-based)

  • [constrain] 'window', Element, Object, String optional
    • 'window' to constrain to the visible window
    • Element to constrain to a specified Element
    • Object to constrain to an object with the properties: {x, y, w, h} where x and y are absolute pixels of the document (like calculated with getX() and getY()).
    • String to constrain to a specified css-selector, which should be an ancestor
  • [notransition=false] Boolean optional

    set true if you are sure positioning is without transition. this isn't required, but it speeds up positioning. Only use when no transition is used: when there is a transition, setting this argument true would miscalculate the position. The return-value will be this in case notransition===true, making setXY to be chainable.

Returns:

Promise | This:

show

(
  • [fade]
)
This | Promise

Defined in src/vdom/partials/extend-element.js:3790

Available since 0.0.1

Shows a previously hidden node. Shows immediately without fade, or will fade-in when fade is specified.

Parameters:

  • [fade] Number optional

    sec to fade-in (you may use 0.1)

Returns:

This | Promise:

fulfilled when the element is ready showing up, or rejected when hidden again (using node.hide) before fully showed.

toggleAttr

(
  • attributeName
  • value
  • forceState
  • [silent=false]
)
chainable

Defined in src/vdom/partials/extend-element.js:4070

Available since 0.0.1

Toggles the attribute on the Element with the specified value (giving it the value, or removes the attribute)

Parameters:

  • attributeName String
  • value Any

    the value that belongs to key

  • forceState Boolean

    to force toggling into this specific state

  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

toggleClass

(
  • to
  • [from]
)
Promise

Defined in src/vdom/partials/extend-element.js:3852

Available since 0.0.1

Transitions one ore more properties of the Element.

Parameters:

  • to Array

    the css-properties to be set, specified as an Array of Objects. The objects should have the next properties:

    • property {String}
    • value {String}
    • duration {Number} (optional)
    • timingFunction {String} (optional)
    • delay {String} (optional)
    • pseudo {String} (optional) --> not: not supported yet in browsers

  • [from] Array optional

    starting the css-properties to be set, specified as an Array of Objects. If disguarded, then the current style is used as startingpoint. You may specify a subset of the to-properties. The objects should have the next properties:

    • property {String}
    • value {String}
    • duration {Number} (optional)
    • timingFunction {String} (optional)
    • delay {String} (optional)
    • pseudo {String} (optional) --> not: not supported yet in browsers

Returns:

Promise:

The promise has the handles:

  • cancel() {Promise}
  • freeze() {Promise}
  • finish() {Promise}
These handles resolve with the elapsed-time as first argument of the callbackFn

toggleClass

(
  • className
  • forceState
  • [returnPromise]
  • [transitionFix]
  • [silent=false]
)
Promise | This

Defined in src/vdom/partials/extend-element.js:4092

Available since 0.0.1

Toggles the className of the Element.

Parameters:

  • className String | Array

    className that should be toggled, may be an array of classNames

  • forceState Boolean

    to force toggling into this specific state

  • [returnPromise] Boolean optional

    whether to return a Promise instead of this, which might be useful in case of transition-properties. The promise will fullfil when the transition is ready, or immediately when no transitioned.

  • [transitionFix] Object optional

    set this to true if you experience transition-problems due to wrong calculated css (mostly because of the auto value) Setting this parameter, will calculate the true css of the transitioned properties and set this temporarely inline, to fix the issue. Don't use it when not needed, it has a slightly performancehit. No need to set when returnPromise is set --> returnPromise always handles the transitionFix.

  • [silent=false] Boolean optional

    prevent node-mutation events by the Event-module to emit

Returns:

Promise | This:

In case returnPromise is set, a Promise returns with the next handles:

  • cancel() {Promise}
  • freeze() {Promise}
  • unfreeze()
  • finish() {Promise}
These handles resolve with the elapsed-time as first argument of the callbackFn

Properties

bottom

Unknown

Defined in src/vdom/partials/extend-element.js:4138

Available since 0.0.1

Gets the bottom y-position (in the DOCUMENT) of the element in pixels. DOCUMENT-related: regardless of the window's scroll-position.

height

Number

Defined in src/vdom/partials/extend-element.js:4154

Available since 0.0.1

Gets or set the height of the element in pixels. Included are padding and border, not any margins.

The getter is calculating through offsetHeight, the setter will set inline css-style for the height.

Values are numbers without unity.

innerHeight

Number

Defined in src/vdom/partials/extend-element.js:4180

Available since 0.0.1

Gets or set the innerHeight of the element in pixels. Excluded the borders. Included are padding.

The getter is calculating through offsetHeight, the setter will set inline css-style for the height.

Values are numbers without unity.

innerWidth

Number

Defined in src/vdom/partials/extend-element.js:4207

Available since 0.0.1

Gets or set the innerHeight of the element in pixels. Excluded the borders. Included are padding.

The getter is calculating through offsetHeight, the setter will set inline css-style for the height.

Values are numbers without unity.

left

Unknown

Defined in src/vdom/partials/extend-element.js:4234

Available since 0.0.1

Gets the x-position (in the DOCUMENT) of the element in pixels. DOCUMENT-related: regardless of the window's scroll-position.

right

Unknown

Defined in src/vdom/partials/extend-element.js:4250

Available since 0.0.1

Gets the right-position (in the DOCUMENT) of the element in pixels. DOCUMENT-related: regardless of the window's scroll-position.

top

Unknown

Defined in src/vdom/partials/extend-element.js:4266

Available since 0.0.1

Gets the y-position (in the DOCUMENT) of the element in pixels. DOCUMENT-related: regardless of the window's scroll-position.

width

Number

Defined in src/vdom/partials/extend-element.js:4282

Available since 0.0.1

Gets or set the width of the element in pixels. Included are padding and border, not any margins.

The getter is calculating through offsetHeight, the setter will set inline css-style for the width.

Values are numbers without unity.

Events

valuechange

Event Payload:

  • e.value String

    new value

  • e.sourceTarget Element

    Element whare the valuechange occured