vnode Class
Delivers the vnode prototype object, which is a virtualisation of an Element inside the Dom.
These Elements work smoothless with the vdom (see ...).
vnodes are much quicker to access and walk through than native dom-nodes. However, this is a module you don't need
by itself: Element-types use these features under the hood.
Copyright (c) 2014 ITSA - https://github.com/itsa
New BSD License - http://choosealicense.com/licenses/bsd-3-clause/
Item Index
Methods
- _appendChild
- _cleanData
- _cleanupStyle
- _deleteFromParent
- _destroy
- _findElementSibling
- _findNodeSibling
- _insertBefore
- _matchesOneSelector
- _matchesSelectorItem
- _matchNthChild
- _moveToParent
- _normalizable
- _normalize
- _noSync
- _removeAttr
- _replaceAtParent
- _setAttr
- _setAttrs
- _setChildNodes
- _splitSelector
- _tryRemoveDomNode
- _tryReplaceChild
- contains
- empty
- firstOfVChildren
- getHTML
- getOuterHTML
- hasClass
- hasVChildNodes
- hasVChildren
- lastOfVChildren
- matchesSelector
- matchesSelector
- removeChild
- serializeStyles
- setHTML
Properties
- attrs
- classNames
- domNode
- END_ATTRIBUTENAME
- id
- innerHTML
- isVoid
- NODESWITCH
- nodeType
- nodeValue
- outerHTML
- PSEUDO_REQUIRED_CHILDREN
- SELECTOR_IDENTIFIERS
- tag
- text
- textContent
- vChildNodes
- vChildren
- vFirst
- vFirstChild
- vFirstElement
- vFirstElementChild
- vLast
- vLastChild
- vLastElement
- vLastElementChild
- vNext
- vNextElement
- vParent
- vParent
- vPrevious
- vPreviousElement
Methods
_appendChild
-
VNode
Adds a vnode to the end of the list of vChildNodes.
Syncs with the DOM.
Parameters:
-
VNodeVnodevnode to append
Returns:
the Node that was appended
_cleanData
()
private
chainable
Cleans up (empties) vnode's _data
_cleanupStyle
()
private
chainable
Cleans up (removes) duplicated style definitions.
_deleteFromParent
()
private
chainable
Removes the vnode from its parent vChildNodes- and vChildren-list.
Does NOT sync with the dom.
_destroy
()
private
chainable
Destroys the vnode and all its vnode-vChildNodes. Removes it from its vParent.vChildNodes list,
Does NOT sync with the dom.
_findElementSibling
-
vnode -
[next]
Searches for the next -or previous- Element-sibling (nodeType of 1).
Parameters:
Returns:
the vnode that matches the search
_findNodeSibling
-
vnode -
[next]
Searches for the next -or previous- node-sibling (nodeType of 1, 3 or 8).
Parameters:
Returns:
the vnode that matches the search
_insertBefore
-
newVNode -
refVNode
Inserts newVNode before refVNode.
Syncs with the DOM.
Parameters:
-
newVNodeVnodevnode to insert
-
refVNodeVnodeThe vnode before which newVNode should be inserted.
Returns:
the Node being inserted (equals domNode)
_matchesOneSelector
-
vnode -
selector -
[relatedVNode]
Check whether the vnode matches the css-selector. the css-selector should be a single selector,
not multiple, so it shouldn't contain a comma.
Parameters:
-
vnodeVnodethe vnode to inspect
-
selectorStringthe selector-item to check the match for
-
[relatedVNode]Vnode optionala related vnode where to selectors starting with
>,~or+should be compared. If not specified, any of these three starting selector-characters will be ignored (leading to matching this first character).
Returns:
whether the vnode matches the css-selector
_matchesSelectorItem
-
vnode -
selectorItem
Check whether the vnode matches one specific selector-item. Suppose the css-selector: "#mynode li.red .blue" then there are 3 selector-items: "#mynode", "li.red" and ".blue"
This method also can handle the new selectors:
- [att^=val] –-> the “begins with” selector
- [att$=val] –-> the “ends with” selector
- [att*=val] –-> the “contains” selector (might be a substring)
- [att~=val] –-> the “contains” selector as a separate word, separated by spaces
- [att|=val] –-> the “contains” selector as a separate word, separated by
| - + --> (same level)
- ~ --> (same level)
Parameters:
Returns:
whether the vnode matches the selector-item
_matchNthChild
-
pseudoArg -
index
Check whether the vnode matches a "nth-child" test, which is used for css pseudoselectors like nth-child, nth-of-type etc.
Parameters:
Returns:
whether the vnode matches the nthChild test
_moveToParent
-
parentVNode -
[index]
Moves the vnode from its current parent.vChildNodes list towards a new parent vnode at the specified position.
Does NOT sync with the dom.
Parameters:
-
parentVNodeVnodethe parent-vnode
-
[index]Number optionalthe position of the child. When not specified, it will be appended.
_normalizable
-
value
Makes the vnode normalizable. Could be set to false when batch-inserting nodes, while normalizaing manually at the end.
Afterwards, you should always reset normalizable to true.
Parameters:
-
valueBooleanwhether the vnode should be normalisable.
_normalize
()
private
chainable
Removes empty TextNodes and merges following TextNodes inside the vnode.
Syncs with the dom.
_noSync
()
private
chainable
Prevents MutationObserver from making the dom sync with the vnode. Should be used when manipulating the dom from within the vnode itself (to preventing looping)
_removeAttr
-
attributeName
Removes the attribute of both the vnode as well as its related dom-node.
Syncs with the dom.
Parameters:
-
attributeNameString
_replaceAtParent
-
newVNode
Replaces the current vnode at the parent.vChildNode list by newVNode
Does NOT sync with the dom.
Parameters:
-
newVNodeObjectthe new vnode which should take over the place of the current vnode
_setAttr
-
attributeName -
value -
[force=false]
Sets the attribute of both the vnode as well as its related dom-node.
Syncs with the dom.
_setAttrs
-
newAttrs
Redefines the attributes of both the vnode as well as its related dom-node. The new
definition replaces any previous attributes (without touching unmodified attributes).
the is attribute cannot be changed for itags.
Syncs the new vnode's attributes with the dom.
_setChildNodes
-
newVChildNodes
Redefines the childNodes of both the vnode as well as its related dom-node. The new definition replaces any previous nodes. (without touching unmodified nodes).
Syncs the new vnode's childNodes with the dom.
Parameters:
-
newVChildNodesArrayarray with vnodes which represent the new childNodes
_splitSelector
-
selector
Splits the selector into separate subselector-items that should match different elements through the tree. Special characters '>' and '+' are added as separate items in the hash.
Parameters:
-
selectorStringthe selector-item to check the match for
Returns:
splitted selectors
_tryRemoveDomNode
-
parentDomNode -
childDomNode
A safe way to remove a dom-node, even if it is not present. Will not throw a JS error when the "to be removed" node isn't in the dom
Parameters:
-
parentDomNodeDOMNodethe parentNode that holds the node that needs to be removed
-
childDomNodeDOMNodethe node that needs to be removed
_tryReplaceChild
-
parentDomNode -
newChildDomNode -
oldChildDomNode
A safe way to replace a dom-node, even if the "to be replaced"-node it is not present. Will not throw a JS error when the "to be replaced" node isn't in the dom. in that case, the new node will be appended
Parameters:
-
parentDomNodeDOMNodethe parentNode that holds the node that needs to be removed
-
newChildDomNodeDOMNodethe node that needs to be replaced
-
oldChildDomNodeDOMNodethe node that needs to be inserted
contains
()
Boolean
Check whether the vnode's domNode is equal, or contains the specified Element.
Returns:
whether the vnode's domNode is equal, or contains the specified Element.
empty
-
[full=false]
Empties the vnode.
Syncs with the dom.
Parameters:
-
[full=false]Boolean optionalwhether system-nodes should be removed as well
firstOfVChildren
-
cssSelector
Returns the first child-vnode (if any). The child represents an Element (nodeType===1).
Parameters:
-
cssSelectorStringone or more css-selectors
Returns:
the first child-vnode or null when not present
getHTML
-
[exclude] -
[includeSystemNodes=false]
Gets the innerHTML of the vnode representing the dom-node.
You may exclude HTMLElement (node-type=1) by specifying exclude.
Only valid for nodetype=1 (HTMLElements)
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:
the innerHTML without the elements specified, or undefined when not an HTMLElement
getOuterHTML
-
[exclude] -
[includeSystemNodes=false]
Gets the outerHTML of the vnode representing the dom-node.
You may exclude HTMLElement (node-type=1) by specifying exclude.
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:
the outerHTML
hasClass
-
className
Checks whether the className is present on the vnode.
Parameters:
Returns:
whether the className (or classNames) is present on the vnode
hasVChildNodes
()
Boolean
Checks whether the vnode has any vChildNodes (nodeType of 1, 3 or 8).
Returns:
whether the vnode has any vChildNodes.
hasVChildren
()
Boolean
Checks whether the vnode has any vChildren (vChildNodes with nodeType of 1).
Returns:
whether the vnode has any vChildren.
lastOfVChildren
-
cssSelector
Returns the last child-vnode (if any). The child represents an Element (nodeType===1).
Parameters:
-
cssSelectorStringone or more css-selectors
Returns:
the last child-vnode or null when not present
matchesSelector
-
selectors -
[relatedVNode]
Checks whether the vnode matches one of the specified selectors. selectors can be one, or multiple css-selectors,
separated by a comma. For example: "#myid li.red blue" is one selector, "div.red, div.blue, div.green" are three selectors.
Parameters:
-
selectorsStringone or more css-selectors
-
[relatedVNode]Vnode optionala related vnode where to selectors starting with
>,~or+should be compared. If not specified, any of these three starting selector-characters will be ignored (leading to matching this first character).
Returns:
whether the vnode matches one of the selectors
matchesSelector
-
attributeName
Reloads the DOM-attribute into the vnode.
Parameters:
-
attributeNameStringthe name of the attribute to be reloaded.
Returns:
the domNode that was reloaded.
removeChild
-
VNode
Removes the vnode's child-vnode from its vChildren and the DOM.
Syncs with the DOM.
Parameters:
-
VNodeVnodethe child-vnode to remove
serializeStyles
()
String
Returns the vnode's style in a serialized form: the way it appears in the dom.
Returns:
vnode's style
setHTML
-
content -
[suppressItagRender] -
[allowScripts=false]
Sets the vnode's and dom-nodes inner HTML.
Syncs with the dom. Can be invoked multiple times without issues.
Properties
classNames
Object
Hash with all the classes of the vnode. Every class represents a key, all values are set true.
domNode
DomNode
The underlying dom-node that the vnode represents.
END_ATTRIBUTENAME
Object
protected
Object to gain quick access to attribute-name end-tokens.
Default: { '=': true, ']': true }
innerHTML
String
Gets or sets the innerHTML of both the vnode as well as the representing dom-node.
The setter syncs with the DOM.
isVoid
Boolean
Tells whether tag is a void Element. Examples are: br, img and input. Non-void Elements are f.e. div and table.
For TextNodes and CommentNodes, this property is undefined.
NODESWITCH
Object
protected
Object to gain quick access to different changes of Element nodeType changes.
Default: { 1: { 1: 1, 3: 2, 8: 3 }, 3: { 1: 4, 3: 5, 8: 6 }, 8: { 1: 7, 3: 8, 8: 9 } }
nodeType
Number
The nodeType of the vnode's representing dom-node (1===ElementNode, 3===TextNode, 8===CommentNode).
nodeValue
String
Gets or sets the innerHTML of both the vnode as well as the representing dom-node.
The setter syncs with the DOM.
outerHTML
String
Gets or sets the outerHTML of both the vnode as well as the representing dom-node.
The setter syncs with the DOM.
PSEUDO_REQUIRED_CHILDREN
Object
protected
Object to gain quick access to the selectors that required children
Default: { ':first-child': true, ':first-of-type': true, ':last-child': true, ':last-of-type': true, ':nth-child': true, ':nth-last-child': true, ':nth-last-of-type': true, ':nth-of-type': true, ':only-of-type': true, ':only-child': true }
SELECTOR_IDENTIFIERS
Object
protected
Object to gain quick access to selector start-tokens.
Default: { '#': 1, '.': 2, '[': 3 }
text
String
The content of the vnode's representing dom-node, in case it is a TextNode or CommentNode.
Equals dom-node.nodeValue.
Is undefined for ElementNodes.
textContent
String
Gets or sets the innerContent of the Node as plain text.
The setter syncs with the DOM.
vChildNodes
Array
Hash with all the childNodes (vnodes). vChildNodes are any kind of vnodes (nodeType===1, 3 or 8)
vChildren
Array
Hash with all the children (vnodes). vChildren are vnodes that have a representing dom-node that is an HtmlElement (nodeType===1)
vFirst
Vnode
Reference to the first of sibbling vNode's, where the related dom-node is either an Element, TextNode or CommentNode (nodeType===1, 3 or 8).
vFirstChild
Vnode
Reference to the first vChildNode, where the related dom-node is either an Element, TextNode or CommentNode (nodeType===1, 3 or 8).
vFirstElement
Vnode
Reference to the first of sibbling vNode's, where the related dom-node is an Element(nodeType===1).
vFirstElementChild
Vnode
Reference to the first vChild, where the related dom-node an Element (nodeType===1).
vLast
Vnode
Reference to the last of sibbling vNode's, where the related dom-node is either an Element, TextNode or CommentNode (nodeType===1, 3 or 8).
vLastChild
Vnode
Reference to the last vChildNode, where the related dom-node is either an Element, TextNode or CommentNode (nodeType===1, 3 or 8).
vLastElement
Vnode
Reference to the last of sibbling vNode's, where the related dom-node is an Element(nodeType===1).
vLastElementChild
Vnode
Reference to the last vChild, where the related dom-node an Element (nodeType===1).
vNext
Vnode
Reference to the next of sibbling vNode's, where the related dom-node is either an Element, TextNode or CommentNode (nodeType===1, 3 or 8).
vNextElement
Vnode
Reference to the next of sibbling vNode's, where the related dom-node is an Element(nodeType===1).
vParent
Vnode
vnode's parentNode (defined as a vnode itself).
vParent
Vnode
the Parent vnode
vPrevious
Vnode
Reference to the previous of sibbling vNode's, where the related dom-node is either an Element, TextNode or CommentNode (nodeType===1, 3 or 8).
vPreviousElement
Vnode
Reference to the previous of sibbling vNode's, where the related dom-node is an Element(nodeType===1).
Events
attributechange
Emitted by every Element that gets an attribute changed.
attributeinsert
Emitted by every Element that gets an attribute inserted.
attributeremove
Emitted by every Element that gets an attribute removed.
nodecontentchange
Emitted by every Element that gets its content changed (innerHTML/innerText).
Event Payload:
-
eObjecteventobject including:
-
targetHtmlElementthe HtmlElement that is being dragged
-
currentTargetHtmlElementthe HtmlElement that is delegating
-
nodeinsert
Emitted by every Element that gets inserted.
Event Payload:
-
eObjecteventobject including:
-
targetHtmlElementthe HtmlElement that is being dragged
-
currentTargetHtmlElementthe HtmlElement that is delegating
-
noderemove
Emitted by every Element that gets removed.
Event Payload:
-
eObjecteventobject including:
-
targetHtmlElementthe HtmlElement that is being dragged
-
currentTargetHtmlElementthe HtmlElement that is delegating
-