UIZE JavaScript Framework

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

Uize.Web.xDom.moduleName | Uize.Web.xDom.pathToResources

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.

3. Static Properties

3.1. Uize.Web.xDom.moduleName

IMPLEMENTATION INFO

this feature was introduced in this module

3.2. Uize.Web.xDom.pathToResources

IMPLEMENTATION INFO

this feature was introduced in this module