Element Class
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/
Item Index
Methods
- append
- appendChild
- cloneNode
- compareDocumentPosition
- contains
- createTreeWalker
- defineInlineStyle
- empty
- first
- firstOfChildren
- forceIntoNodeView
- forceIntoView
- getAll
- getAttr
- getAttribute
- getAttrs
- getCascadeStyle
- getChildren
- getClassList
- getData
- getElement
- getElementById
- getElementOnAvailable
- getHTML
- getId
- getInlineStyle
- getInlineTransition
- getOuterHTML
- getParent
- getTagName
- getText
- getTransition
- getValue
- hasAttr
- hasAttribute
- hasAttributes
- hasChildren
- hasClass
- hasData
- hasFocus
- hasFocusInside
- hasInlineStyle
- hasInlineTransition
- hasTransition
- hide
- inDOM
- insertBefore
- inside
- insidePos
- isItag
- isItag
- last
- lastOfChildren
- matches
- matchesSelector
- next
- prepend
- previous
- querySelector
- querySelectorAll
- rectangleInside
- remove
- removeAttr
- removeAttr
- removeAttributeNS
- removeAttrs
- removeChild
- removeClass
- removeData
- removeId
- removeInlineStyle
- removeInlineStyles
- removeInlineTransition
- removeInlineTransitions
- replace
- replaceChild
- replaceClass
- scrollTo
- setAttr
- setAttribute
- setAttributeNS
- setAttrs
- setClass
- setData
- setHTML
- setId
- setInlineStyle
- setInlineStyles
- setOuterHTML
- setStyle
- setStyle
- setText
- setValue
- setXY
- show
- toggleAttr
- toggleClass
- toggleClass
Properties
Events
Methods
append
-
content -
[escape] -
[refElement] -
[silent=false] -
[allowScripts=false]
Appends an Element or an Element's string-representation at the end of Element's innerHTML, or before the refElement.
Parameters:
-
contentElement | ElementArray | Stringcontent to append
-
[escape]Boolean optionalwhether to insert
escapedcontent, leading it into only text inserted -
[refElement]Element optionalreference Element where the content should be appended
-
[silent=false]Boolean optionalprevent node-mutation events by the Event-module to emit
-
[allowScripts=false]Boolean optionalwhether scripts are allowed --> these should be defined with
xscriptinstead ofscript
Returns:
the created Element (or the last when multiple)
appendChild
-
content -
[escape]
Adds a node to the end of the list of childNodes of a specified parent node.
Parameters:
-
contentElement | ElementArray | Stringcontent to append
-
[escape]Boolean optionalwhether to insert
escapedcontent, leading it into only text inserted
Returns:
the Element that was appended
cloneNode
-
[deep]
Returns a duplicate of the node. Use cloneNode(true) for a deep clone.
Parameters:
-
[deep]Boolean optionalwhether to perform a
deepclone: with all descendants
Returns:
a clone of this Element
compareDocumentPosition
-
otherElement
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:
-
otherElementElement
Returns:
A bitmask, use it this way: if (thisNode.compareDocumentPosition(otherNode) & Node.DOCUMENT_POSITION_FOLLOWING) {// otherNode is following thisNode}
contains
-
otherElement -
[excludeItself=false] -
[inspectProtectedNodes=false]
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:
Returns:
whether this Element contains OR equals otherElement.
createTreeWalker
-
root -
[whatToShow] -
[filter]
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:
-
rootElementThe root node at which to begin the NodeIterator's traversal.
-
[whatToShow]Number optionalFilter 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 optionalAn object implementing the NodeFilter interface or a function. See https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter
Returns:
defineInlineStyle
-
value
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:
-
valueStringthe style string to be set
empty
-
[silent=false] -
[full=false]
Empties the content of the Element. Alias for thisNode.vTextContent = '';
first
-
[cssSelector] -
[container]
Reference to the first of sibbling vNode's, where the related dom-node is an Element(nodeType===1).
Parameters:
-
[cssSelector]String optionalto return the first Element that matches the css-selector
-
[container]HTMLElement optionalthe container-element to search within --> this lead into searching out of the same level
Returns:
firstOfChildren
-
[cssSelector]
Reference to the first child-Element, where the related dom-node an Element (nodeType===1).
Parameters:
-
[cssSelector]String optionalto return the first Element that matches the css-selector
Returns:
forceIntoNodeView
-
[ancestor]
Forces the Element to be inside an ancestor-Element that has the `overfow="scroll" set.
Parameters:
-
[ancestor]Element optionalthe 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]
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 optionalset 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
truewould miscalculate the position. -
[rectangle]Object optionalSet this if you have already calculated the window-rectangle (used for preformance within drag-drop)
getAll
-
cssSelector -
[inspectProtectedNodes=false]
Gets an ElementArray of Elements that lie within this Element and match the css-selector.
Parameters:
Returns:
ElementArray of Elements that match the css-selector
getAttr
-
attributeName
Gets an attribute of the Element.
Alias for getAttribute().
Parameters:
-
attributeNameString
Returns:
value of the attribute
getAttribute
-
attributeName
Gets an attribute of the Element.
Same as getAttr().
Parameters:
-
attributeNameString
Returns:
value of the attribute
getAttrs
-
attributeName
Returns all attributes as defined as an key/value object.
Parameters:
-
attributeNameString
Returns:
all attributes as on Object
getCascadeStyle
-
cssProperty -
[pseudo]
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-leftinstead ofmargin. - Note3: no need to camelCase cssProperty: both
margin-leftas well asmarginLeftare fine. - Note4: you can query
transition,transform,perspectiveandtransform-origininstead of their vendor-specific properties. - Note5:
transitionortransformreturn an Object instead of a String.
Parameters:
getClassList
()
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
Returns data set specified by key. If not set, undefined will be returned.
The data is efficiently stored on the vnode.
Parameters:
-
keyStringname of the key
Returns:
data set specified by key
getElement
-
cssSelector -
[inspectProtectedNodes=false]
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:
Returns:
the Element that was search for
getElementById
-
id -
[inspectProtectedNodes=false]
Returns the Element matching the specified id, which should should be a descendant of this Element.
Parameters:
Returns:
getElementOnAvailable
-
cssSelector -
[inspectProtectedNodes=false]
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:
Returns:
with the Element that was search for as variable.
getHTML
-
[exclude] -
[includeSystemNodes=false]
Gets innerHTML of the dom-node. Goes through the vdom, so it's superfast.
Use this method instead of innerHTML
Parameters:
-
[exclude]Array | HTMLElement optionalan array of HTMLElements - or just 1 - to be excluded
-
[includeSystemNodes=false]Boolean optionalwhether system-nodes and i-tag inner-content should be returned. By default, they stay hidden.
Returns:
getInlineStyle
-
cssProperty -
[pseudo]
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:
Returns:
css-style
getInlineTransition
-
[transitionProperty] -
[pseudo]
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:
Returns:
the transition-object, with the properties:
- duration {Number}
- timingFunction {String}
- delay {Number}
getOuterHTML
-
[exclude] -
[includeSystemNodes=false]
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 optionalan array of HTMLElements - or just 1 - to be excluded
-
[includeSystemNodes=false]Boolean optionalwhether system-nodes and i-tag inner-content should be returned. By default, they stay hidden.
Returns:
getText
()
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]
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:
Returns:
the transition-object, with the properties:
- duration {Number}
- timingFunction {String}
- delay {Number}
getValue
()
String
Gets the value of the following Elements:
- input
- textarea
- select
- any container that is
contenteditable
Returns:
hasAttr
-
attributeName
Whether the Element has the attribute set.
Alias for hasAttribute().
Parameters:
-
attributeNameString
Returns:
Whether the Element has the attribute set.
hasAttribute
-
attributeName
Whether the Element has the attribute set.
Same as hasAttr().
Parameters:
-
attributeNameString
Returns:
Whether the Element has the attribute set.
hasAttributes
()
Boolean
Indicating if the current element has any attributes or not.
Returns:
Whether the current element has any attributes or not.
hasChildren
()
Boolean
Indicating if the Element has any children (childNodes with nodeType of 1).
Returns:
whether the Element has children
hasClass
-
className
Checks whether the className is present on the Element.
Parameters:
Returns:
whether the className (or classNames) is present on the Element
hasData
-
key
If the Element has data set specified by key. The data could be set with setData().
Parameters:
-
keyStringname of the key
Returns:
hasFocus
-
[inside]
Indicates whether Element currently has the focus.
Parameters:
-
[inside]Object optionalwhether focus may also lie on a descendent inside
Returns:
hasFocusInside
()
Boolean
Indicates whether the current focussed Element lies inside this Element (on a descendant Element).
Returns:
hasInlineStyle
-
cssProperty -
[pseudo]
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:
Returns:
whether the inlinestyle was present
hasInlineTransition
-
transitionProperty -
[pseudo]
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:
Returns:
whether the inline transform-css-property was present
hasTransition
-
transitionProperty -
[pseudo]
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:
Returns:
whether the inlinestyle was present
hide
-
[fade]
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 optionalsec to fade (you may use
0.1)
Returns:
fulfilled when the element is ready hiding, or rejected when showed up again (using node.show) before fully hided.
inDOM
()
Boolean
Indicates whether the Element currently is part if the DOM.
Returns:
whether the Element currently is part if the DOM.
insertBefore
-
domNode -
refDomNode -
[escape]
Inserts domNode before refDomNode.
Parameters:
Returns:
the Element being inserted (equals domNode)
inside
-
selector
Checks whether the Element lies within the specified selector (which can be a CSS-selector or a Element)
Returns:
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
Checks whether a point specified with x,y is within the Element's region.
Parameters:
Returns:
whether there is a match
last
-
[cssSelector] -
[container]
Reference to the last of sibbling vNode's, where the related dom-node is an Element(nodeType===1).
Parameters:
-
[cssSelector]String optionalto return the last Element that matches the css-selector
-
[container]HTMLElement optionalthe container-element to search within --> this lead into searching out of the same level
Returns:
lastOfChildren
-
[cssSelector]
Reference to the last child-Element, where the related dom-node an Element (nodeType===1).
Parameters:
-
[cssSelector]String optionalto return the last Element that matches the css-selector
Returns:
matches
-
[cssSelector]
Indicates if the element would be selected by the specified selector string. Alias for matchesSelector()
Parameters:
-
[cssSelector]String optionalthe css-selector to check for
Returns:
matchesSelector
-
[cssSelector]
Indicates if the element would be selected by the specified selector string. Alias for matches()
Parameters:
-
[cssSelector]String optionalthe css-selector to check for
Returns:
next
-
[cssSelector] -
[container]
Reference to the next of sibbling Element, where the related dom-node is an Element(nodeType===1).
Parameters:
-
[cssSelector]String optionalcss-selector to be used as a filter
-
[container]HTMLElement optionalthe container-element to search within --> this lead into searching out of the same level
Returns:
prepend
-
content -
[escape] -
[refElement] -
[silent=false] -
[allowScripts=false]
Prepends a Element or text at the start of Element's innerHTML, or before the refElement.
Parameters:
-
contentElement | Element | ElementArray | Stringcontent to prepend
-
[escape]Boolean optionalwhether to insert
escapedcontent, leading it into only text inserted -
[refElement]Element optionalreference Element where the content should be prepended
-
[silent=false]Boolean optionalprevent node-mutation events by the Event-module to emit
-
[allowScripts=false]Boolean optionalwhether scripts are allowed --> these should be defined with
xscriptinstead ofscript
Returns:
the created Element (or the last when multiple)
previous
-
[cssSelector] -
[container]
Reference to the previous of sibbling Element, where the related dom-node is an Element(nodeType===1).
Parameters:
-
[cssSelector]String optionalcss-selector to be used as a filter
-
[container]HTMLElement optionalthe container-element to search within --> this lead into searching out of the same level
Returns:
querySelector
-
selectors -
[inspectProtectedNodes=false] -
[refNode] -
[domPosition]
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:
-
selectorsStringCSS-selector(s) that should match
-
[inspectProtectedNodes=false]Boolean optionalno deepsearch in protected Nodes or iTags --> by default, these elements should be hidden
-
[refNode]HTMLElement optionalreference-node where the found node should be
beforeorafter: specified by domPosition -
[domPosition]Number optionalThe 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]
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:
-
selectorsStringCSS-selector(s) that should match
-
[inspectProtectedNodes=false]Boolean optionalno deepsearch in protected Nodes or iTags --> by default, these elements should be hidden
-
[refNode]HTMLElement optionalreference-node where the found nodes should be
beforeorafter: specified by domPosition -
[domPosition]Number optionalThe 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:
non-life Array (snapshot) with Elements
rectangleInside
-
outboundElement
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:
-
outboundElementElementthe Element where this element should lie inside
Returns:
whether the Element lies inside the outboundElement
remove
-
[silent=false]
Removes the Element from the DOM. Alias for thisNode.parentNode.removeChild(thisNode);
Parameters:
-
[silent=false]Boolean optionalprevent node-mutation events by the Event-module to emit
Returns:
the DOM-node that was removed. You could re-insert it at a later time.
removeAttr
-
attributeName -
[silent=false]
Removes the attribute from the Element.
Use removeAttr() to be able to chain.
removeAttr
-
attributeName -
[silent=false]
Removes the attribute from the Element.
Alias for removeAttribute() BUT is chainable instead (removeAttribute is not).
removeAttributeNS
-
nameSpace -
attributeName -
[silent=false]
Removes the attribute of the Elementinside a specified namespace
removeAttrs
-
attributeData -
[silent=false]
Removes multiple attributes on the Element. The argument should be one ore more AttributeNames.
Parameters:
Example:
instance.removeAttrs(['tabIndex', 'style']);
removeChild
-
domNode
Removes the Element's child-Node from the DOM.
Parameters:
-
domNodeNodethe child-Node to remove
Returns:
the DOM-node that was removed. You could re-insert it at a later time.
removeClass
-
className -
[returnPromise] -
[transitionFix] -
[silent=false]
Removes a className from the Element.
Parameters:
-
classNameString | Arraythe className that should be removed. May be an Array of classNames.
-
[returnPromise]Boolean optionalwhether 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 optionalset this to
trueif you experience transition-problems due to wrong calculated css (mostly because of theautovalue) 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 whenreturnPromiseis set --> returnPromise always handles the transitionFix. -
[silent=false]Boolean optionalprevent node-mutation events by the Event-module to emit
Returns:
In case returnPromise is set, a Promise returns with the next handles:
- cancel() {Promise}
- freeze() {Promise}
- unfreeze()
- finish() {Promise}
elapsed-time as first argument of the callbackFn
removeData
-
[key] -
[deep]
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.
removeId
()
chainable
Removes the Elment's id.
removeInlineStyle
-
cssProperty -
[pseudo] -
[returnPromise]
Removes a css-property (inline) out of the Element. No need to use camelCase.
Parameters:
-
cssPropertyStringthe css-property to remove
-
[pseudo]String optionalto look inside a pseudo-style
-
[returnPromise]Boolean optionalwhether 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]
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:
-
cssPropertiesArray | ObjectArray 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 optionalwhether 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]
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
removeInlineTransitions
-
transitionProperties
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:
- property {String}
- pseudo {String}
See more about tranform-properties: https://developer.mozilla.org/en-US/docs/Web/CSS/transform
replace
-
content -
[escape]
Replaces the Element with a new Element.
Parameters:
-
contentElement | Element | ElementArray | Stringcontent to replace
-
[escape]Boolean optionalwhether to insert
escapedcontent, leading it into only text inserted
Returns:
the created Element (or the last when multiple)
replaceChild
-
newElement -
oldVChild -
[escape]
Replaces the Element's child-Element with a new Element.
Parameters:
Returns:
the Element that was removed (equals oldVChild)
replaceClass
-
prevClassName -
newClassName -
[force -
[returnPromise] -
[transitionFix] -
[silent=false]
Replaces the className of the Element with a new className. If the previous className is not available, the new className is set nevertheless.
Parameters:
-
prevClassNameStringthe className to be replaced
-
newClassNameStringthe className to be set
-
[forceBoolean] whether the new className should be set, even is the previous className isn't there
-
[returnPromise]Boolean optionalwhether 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 optionalset this to
trueif you experience transition-problems due to wrong calculated css (mostly because of theautovalue) 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 whenreturnPromiseis set --> returnPromise always handles the transitionFix. -
[silent=false]Boolean optionalprevent node-mutation events by the Event-module to emit
Returns:
In case returnPromise is set, a Promise returns with the next handles:
- cancel() {Promise}
- freeze() {Promise}
- unfreeze()
- finish() {Promise}
elapsed-time as first argument of the callbackFn
scrollTo
-
x -
y
Scrolls the content of the Element into the specified scrollposition. Only available when the Element has overflow.
setAttr
-
attributeName -
value -
[silent=false]
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.
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.
setAttributeNS
-
nameSpace -
attributeName -
value -
[silent=false]
Sets the attribute on the Element with the specified value inside a specified namespace
setAttrs
-
attributeData -
[silent=false]
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:
Example:
instance.setAttrs([ {name: 'tabIndex', value: '0'}, {name: 'style', value: 'color: #000;'} ]);
setClass
-
className -
[returnPromise] -
[transitionFix] -
[silent=false]
Adds a class to the Element. If the class already exists it won't be duplicated.
Parameters:
-
classNameString | ArrayclassName to be added, may be an array of classNames
-
[returnPromise]Boolean optionalwhether 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 optionalset this to
trueif you experience transition-problems due to wrong calculated css (mostly because of theautovalue) 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 whenreturnPromiseis set --> returnPromise always handles the transitionFix. -
[silent=false]Boolean optionalprevent node-mutation events by the Event-module to emit
Returns:
In case returnPromise is set, a Promise returns with the next handles:
- cancel() {Promise}
- freeze() {Promise}
- unfreeze()
- finish() {Promise}
elapsed-time as first argument of the callbackFn
setData
-
key -
value -
[deep]
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().
setHTML
-
val -
[silent=false] -
[allowScripts=false]
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.
setInlineStyle
-
cssProperty -
value -
[pseudo] -
[returnPromise]
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:
-
cssPropertyStringthe css-property to be set
-
valueStringthe css-value
-
[pseudo]String optionalto look inside a pseudo-style
-
[returnPromise]Boolean optionalwhether 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:
setInlineStyles
-
cssProperties -
[returnPromise]
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:
-
cssPropertiesArray | Objectthe 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 optionalwhether 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:
setOuterHTML
-
val -
[silent=false]
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.
setStyle
-
transitionProperties -
[pseudo]
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:
-
transitionPropertiesArraythe 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 optionalto look inside a pseudo-style
setStyle
-
setInlineTransition -
duration -
[timingFunction] -
delay -
[pseudo]
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:
-
setInlineTransitionStringthe css-property to be set, f.e.
translateX -
durationNumberthe duration in seconds (may be a broken number, like
0.5) -
[timingFunction]String optional -
delayNumberthe delay in seconds (may be a broken number, like
0.5) -
[pseudo]String optionalto look inside a pseudo-style
setText
-
val -
[silent=false]
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.
setValue
-
val -
[silent=false]
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.
setXY
-
x -
y -
[constrain] -
[notransition=false]
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:
-
xNumberx-value for new position (coordinates are page-based)
-
yNumbery-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 optionalset 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
truewould miscalculate the position. The return-value will bethisin casenotransition===true, making setXY to be chainable.
Returns:
show
-
[fade]
Shows a previously hidden node.
Shows immediately without fade, or will fade-in when fade is specified.
Parameters:
-
[fade]Number optionalsec to fade-in (you may use
0.1)
Returns:
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]
Toggles the attribute on the Element with the specified value (giving it the value, or removes the attribute)
toggleClass
-
to -
[from]
Transitions one ore more properties of the Element.
Parameters:
-
toArraythe 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 optionalstarting 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:
The promise has the handles:
- cancel() {Promise}
- freeze() {Promise}
- finish() {Promise}
elapsed-time as first argument of the callbackFn
toggleClass
-
className -
forceState -
[returnPromise] -
[transitionFix] -
[silent=false]
Toggles the className of the Element.
Parameters:
-
classNameString | ArrayclassName that should be toggled, may be an array of classNames
-
forceStateBooleanto force toggling into this specific state
-
[returnPromise]Boolean optionalwhether 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 optionalset this to
trueif you experience transition-problems due to wrong calculated css (mostly because of theautovalue) 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 whenreturnPromiseis set --> returnPromise always handles the transitionFix. -
[silent=false]Boolean optionalprevent node-mutation events by the Event-module to emit
Returns:
In case returnPromise is set, a Promise returns with the next handles:
- cancel() {Promise}
- freeze() {Promise}
- unfreeze()
- finish() {Promise}
elapsed-time as first argument of the callbackFn
Properties
bottom
Unknown
Gets the bottom y-position (in the DOCUMENT) of the element in pixels. DOCUMENT-related: regardless of the window's scroll-position.
height
Number
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
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
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
Gets the x-position (in the DOCUMENT) of the element in pixels. DOCUMENT-related: regardless of the window's scroll-position.
right
Unknown
Gets the right-position (in the DOCUMENT) of the element in pixels. DOCUMENT-related: regardless of the window's scroll-position.
top
Unknown
Gets the y-position (in the DOCUMENT) of the element in pixels. DOCUMENT-related: regardless of the window's scroll-position.
width
Number
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.
