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:
-
content
Element | ElementArray | Stringcontent to append
-
[escape]
Boolean optionalwhether to insert
escaped
content, 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
xscript
instead 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:
-
content
Element | ElementArray | Stringcontent to append
-
[escape]
Boolean optionalwhether to insert
escaped
content, 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
deep
clone: 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:
-
otherElement
Element
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:
-
root
ElementThe 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:
-
value
Stringthe 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
true
would 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:
-
attributeName
String
Returns:
value of the attribute
getAttribute
-
attributeName
Gets an attribute of the Element.
Same as getAttr().
Parameters:
-
attributeName
String
Returns:
value of the attribute
getAttrs
-
attributeName
Returns all attributes as defined as an key/value object.
Parameters:
-
attributeName
String
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-left
instead ofmargin
. - Note3: no need to camelCase cssProperty: both
margin-left
as well asmarginLeft
are fine. - Note4: you can query
transition
,transform
,perspective
andtransform-origin
instead of their vendor-specific properties. - Note5:
transition
ortransform
return 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:
-
key
Stringname 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:
-
attributeName
String
Returns:
Whether the Element has the attribute set.
hasAttribute
-
attributeName
Whether the Element has the attribute set.
Same as hasAttr().
Parameters:
-
attributeName
String
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:
-
key
Stringname 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:
-
content
Element | Element | ElementArray | Stringcontent to prepend
-
[escape]
Boolean optionalwhether to insert
escaped
content, 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
xscript
instead 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:
-
selectors
StringCSS-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
before
orafter
: 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:
-
selectors
StringCSS-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
before
orafter
: 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:
-
outboundElement
Elementthe 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:
-
domNode
Nodethe 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:
-
className
String | 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
true
if you experience transition-problems due to wrong calculated css (mostly because of theauto
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 whenreturnPromise
is 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:
-
cssProperty
Stringthe 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:
-
cssProperties
Array | 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:
-
content
Element | Element | ElementArray | Stringcontent to replace
-
[escape]
Boolean optionalwhether to insert
escaped
content, 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:
-
prevClassName
Stringthe className to be replaced
-
newClassName
Stringthe className to be set
-
[force
Boolean] 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
true
if you experience transition-problems due to wrong calculated css (mostly because of theauto
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 whenreturnPromise
is 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:
-
className
String | 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
true
if you experience transition-problems due to wrong calculated css (mostly because of theauto
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 whenreturnPromise
is 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:
-
cssProperty
Stringthe css-property to be set
-
value
Stringthe 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:
-
cssProperties
Array | 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:
-
transitionProperties
Arraythe 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:
-
setInlineTransition
Stringthe css-property to be set, f.e.
translateX
-
duration
Numberthe duration in seconds (may be a broken number, like
0.5
) -
[timingFunction]
String optional -
delay
Numberthe 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:
-
x
Numberx-value for new position (coordinates are page-based)
-
y
Numbery-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
true
would miscalculate the position. The return-value will bethis
in 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:
-
to
Arraythe 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:
-
className
String | ArrayclassName that should be toggled, may be an array of classNames
-
forceState
Booleanto 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
true
if you experience transition-problems due to wrong calculated css (mostly because of theauto
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 whenreturnPromise
is 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.