MODULES Uize.Web.xDom
1. Introduction
The Uize.Web.xDom module extends the Uize.Web object by adding functionality for manipulating the DOM.
DEVELOPERS: Ben Ilegbodu, original code contributed by Zazzle Inc.
The Uize.Web.xDom module is an extension module that extends the Uize.Web class. Pages that want to leverage the syntax-friendly nature of Uize.Web may not need to leverage any DOM manipulation. Therefore, the DOM manipulation functionality is not implemented in the Uize.Web class in order to reduce the need for loading the extra code. Instead, in order to include the DOM manipulation functionality, one needs to require the Uize.Web.xDom extension module.
1.1. Key Features
The Uize.Web.xDom extension module provides the following features...
1.1.1. Insertion Methods
document...
1.1.2. Removal Methods
document...
1.2. Examples
There are no dedicated showcase example pages for the Uize.Web.xDom module.
SEARCH FOR EXAMPLES
Use the link below to search for example pages on the UIZE Web site that reference the Uize.Web.xDom module...
SEARCH
1.3. Implementation Info
The Uize.Web.xDom module defines the Uize.Web.xDom extension module under the Uize.Web namespace.
1.3.1. Features Introduced in This Module
The features listed in this section have been introduced in this module.
STATIC PROPERTIES
1.3.2. Features Overridden in This Module
No features have been overridden in this module.
1.3.3. Features Inherited From Other Modules
This module has no inherited features.
1.3.4. Modules Directly Under This Namespace
There are no modules directly under this namespace.
1.3.5. Unit Tests
There is no dedicated unit tests module for the Uize.Web.xDom module.
2. Instance Methods
2.1. after
Inserts HTML string, DOM node, array of DOM nodes or Uize.Web object after each node in the set of matched DOM nodes.
SYNTAX
myWeb = myWeb.after(contentBLOB);
VARIATION 1
myWeb = myWeb.after(contentFUNC);
VARIATION 2
myWeb = myWeb.after(content1BLOB, content2BLOB, ...);
VARIATION 3
myWeb = myWeb.after(content1FUNC, content2FUNC, ...);
NOTES
Returns a reference to the same Uize.Web object |
|
| If a DOM node (or an array of DOM nodes) is specified as an argument, but is being added after a single DOM node (i.e. there is only one DOM node in the set of matched DOM nodes), that DOM node will be moved and not cloned. | |
| If a DOM node (or an array of DOM nodes) is specified as an argument, but is being added after multiple DOM nodes (i.e. there is more than one DOM node in the set of matched DOM nodes), that DOM node will be cloned before being inserted. |
2.2. append
Inserts HTML string, DOM node, array of DOM nodes or Uize.Web object to the end of each node in the set of matched DOM nodes.
SYNTAX
myWeb = myWeb.append(contentBLOB);
VARIATION 1
myWeb = myWeb.append(contentFUNC);
VARIATION 2
myWeb = myWeb.append(content1BLOB, content2BLOB, ...);
VARIATION 3
myWeb = myWeb.append(content1FUNC, content2FUNC, ...);
NOTES
Returns a reference to the same Uize.Web object |
|
| If a DOM node (or an array of DOM nodes) is specified as an argument, but is being appended to a single DOM node (i.e. there is only one DOM node in the set of matched DOM nodes), that DOM node will be moved and not cloned. | |
| If a DOM node (or an array of DOM nodes) is specified as an argument, but is being appended to multiple DOM nodes (i.e. there is more than one DOM node in the set of matched DOM nodes), that DOM node will be cloned before being inserted. |
2.3. appendTo
Inserts every DOM node in the set of matched DOM nodes to the end of each node in the target.
SYNTAX
newWeb = myWeb.appendTo(targetBLOB);
NOTES
Returns a reference to the target wrapped in a new Uize.Web object |
|
If targetBLOB is a single DOM node, the DOM nodes in the matched set of DOM nodes will be moved to the target (not cloned) |
|
If targetBLOB is multiple DOM nodes, the DOM nodes in the matched set of DOM nodes will be cloned for each target after the first. |
2.4. before
Inserts HTML string, DOM node, array of DOM nodes or Uize.Web object before each node in the set of matched DOM nodes.
SYNTAX
myWeb = myWeb.before(contentSTR);
VARIATION 1
myWeb = myWeb.before(contentFUNC);
VARIATION 2
myWeb = myWeb.before(content1STR, content2STR, ...);
VARIATION 3
myWeb = myWeb.before(content1FUNC, content2FUNC, ...);
NOTES
Returns a reference to the same Uize.Web object |
|
| If a DOM node (or an array of DOM nodes) is specified as an argument, but is being added before a single DOM node (i.e. there is only one DOM node in the set of matched DOM nodes), that DOM node will be moved and not cloned. | |
| If a DOM node (or an array of DOM nodes) is specified as an argument, but is being added before multiple DOM nodes (i.e. there is more than one DOM node in the set of matched DOM nodes), that DOM node will be cloned before being inserted. |
2.5. detach
Removes the set of matched DOM nodes that match a (optional) selector, keeping all of the wired events.
SYNTAX
myWeb = myWeb.detach();
VARIATION 1
myWeb = myWeb.detach(selectorSTR);
VARIATION 2
myWeb = myWeb.detach(node);
NOTES
Returns a reference to the same Uize.Web object |
|
| All events wired on the detached DOM nodes are retained, which is useful when the detached DOM nodes are to be reinserted into the DOM at a later time | |
See related remove and empty methods |
2.6. empty
Iterates over the set of matched DOM nodes, removing all of the child DOM nodes (i.e. "emptying") of each one.
SYNTAX
myWeb = myWeb.empty();
NOTES
Returns a reference to the same Uize.Web object |
|
| All wired events are also removed from the child DOM nodes before removing the DOM nodes themselves | |
See also related detatch and remove methods |
2.7. insertAfter
Inserts every DOM node in the set of matched DOM nodes after each node in the target.
SYNTAX
newWeb = myWeb.insertAfter(targetBLOB);
NOTES
Returns a reference to the target wrapped in a new Uize.Web object |
|
If targetBLOB is a single DOM node, the DOM nodes in the matched set of DOM nodes will be moved to the target (not cloned) |
|
If targetBLOB is multiple DOM nodes, the DOM nodes in the matched set of DOM nodes will be cloned for each target after the first. |
2.8. insertBefore
Inserts every DOM node in the set of matched DOM nodes before each node in the target.
SYNTAX
newWeb = myWeb.insertBefore(targetBLOB);
NOTES
Returns a reference to the target wrapped in a new Uize.Web object |
|
If targetBLOB is a single DOM node, the DOM nodes in the matched set of DOM nodes will be moved to the target (not cloned) |
|
If targetBLOB is multiple DOM nodes, the DOM nodes in the matched set of DOM nodes will be cloned for each target after the first. |
2.9. prepend
Inserts HTML string, DOM node, array of DOM nodes or Uize.Web object to the beginning of each node in the set of matched DOM nodes.
SYNTAX
myWeb = myWeb.prepend(contentSTR);
VARIATION 1
myWeb = myWeb.prepend(contentFUNC);
VARIATION 2
myWeb = myWeb.prepend(content1STR, content2STR, ...);
VARIATION 3
myWeb = myWeb.prepend(content1FUNC, content2FUNC, ...);
NOTES
Returns a reference to the same Uize.Web object |
|
| If a DOM node (or an array of DOM nodes) is specified as an argument, but is being prepended to a single DOM node (i.e. there is only one DOM node in the set of matched DOM nodes), that DOM node will be moved and not cloned. | |
| If a DOM node (or an array of DOM nodes) is specified as an argument, but is being prepended to multiple DOM nodes (i.e. there is more than one DOM node in the set of matched DOM nodes), that DOM node will be cloned before being inserted. |
2.10. prependTo
Inserts every DOM node in the set of matched DOM nodes to the beginning of each node in the target.
SYNTAX
newWeb = myWeb.prependTo(targetBLOB);
NOTES
Returns a reference to the target wrapped in a new Uize.Web object |
|
If targetBLOB is a single DOM node, the DOM nodes in the matched set of DOM nodes will be moved to the target (not cloned) |
|
If targetBLOB is multiple DOM nodes, the DOM nodes in the matched set of DOM nodes will be cloned for each target after the first. |
2.11. remove
Iterates over the set of matched DOM nodes, removing each from the DOM.
SYNTAX
myWeb = myWeb.remove();
VARIATION
myWeb = myWeb.remove(selector);
NOTES
Returns a reference to the same Uize.Web object |
|
| All wired events are also removed from the DOM nodes before removing the DOM nodes themselves | |
See also related detatch and empty methods |
2.12. replaceAll
Replaces every DOM node in the set of matched DOM nodes with each node in the target.
SYNTAX
newWeb = myWeb.replaceAll(targetBLOB);
NOTES
Returns a reference to the target wrapped in a new Uize.Web object |
|
If targetBLOB is a single DOM node, the DOM nodes in the matched set of DOM nodes will be moved to replace the target (not cloned) |
|
If targetBLOB is multiple DOM nodes, the DOM nodes in the matched set of DOM nodes will be cloned for each target after the first. |
2.13. replaceWith
Replaces each node in the set of matched DOM nodes with the specified HTML string, DOM node, or Uize.Web object.
SYNTAX
myWeb = myWeb.replaceWith(contentSTR);
VARIATION 1
myWeb = myWeb.replaceWith(contentFUNC);
NOTES
Returns a reference to the same Uize.Web object |
|
| If a DOM node (or an array of DOM nodes) is specified as an argument, but is replacing a single DOM node (i.e. there is only one DOM node in the set of matched DOM nodes), that DOM node will be moved and not cloned. | |
| If a DOM node (or an array of DOM nodes) is specified as an argument, but is replacing multiple DOM nodes (i.e. there is more than one DOM node in the set of matched DOM nodes), that DOM node will be cloned before replacing. |