Class: Element

html.Element(tagNameOrNamespaceOrElement, opt_tagNameOrEventOutputsopt, opt_eventOutputsopt)

Wrapper capsule for DOM elements. Can be used either to wrap an existing DOM element or to create a new one (and wrap it).

Element capsule has one loop named loop which is inherited from the HasRootHTML capsule. This loop is there to enable this capsule's wrapped DOM element to be included on the page (as a child of another DOM element). Also, this capsule has a hook named hook that enables this capsule's wrapped DOM element include other DOM elements inside itself (as its children).

Constructor

new Element(tagNameOrNamespaceOrElement, opt_tagNameOrEventOutputsopt, opt_eventOutputsopt)

When creating an instance of Element capsule you either create new DOM element or wrap an already existing DOM element. In any case, newly created capsule behaves as a wrapper for the underlying DOM element. Creating an instance of Element capsule is simple, although there are three different legal ways to do it. See examples bellow for more details.
Parameters:
Name Type Attributes Description
tagNameOrNamespaceOrElement string | Element denotes: a) the tag name of the DOM element to be created, or b) the namespace of the DOM element to be created (in case of creating SVG element for example), or c) the DOM element itself (in case you just want to wrap it)
opt_tagNameOrEventOutputs string | Array.<string> <optional>
 if the first parameter is a namespace then this one should be a tag name of the DOM element to be created, otherwise it is an optional array of events (e.g. ['click', 'dbclick']) for which output operations should be created (see addEventOutput)
opt_eventOutputs Array.<string> <optional>
 if the first parameter is a namespace then this one should be an optional array of events (e.g. ['click', 'dbclick']) for which output operations should be created (see addEventOutput), otherwise this parameter has no meaning
Since:
  • 0.1.0
Source:
Throws:
ILLEGAL_ARGUMENT
Type
Error
Examples

Creating new HTML (DOM) element and new Element capsule as its wrapper

let htmlElement = new html.Element('div'); // using tag name

Creating new SVG (DOM) element (needs namespace) and new Element capsule as its wrapper

let svgElement = new html.Element('http://www.w3.org/2000/svg', 'rect'); // using namespace and tag name

Creating new Element capsule to wrap an existing DOM element

let existingElement = document.createElement('div'); // or document.getElementById or whatever...
let htmlElement = new html.Element(existingElement);

Specifying output operations (optional in all three ways of instantiation)

let htmlElement = new html.Element('div', ['click', 'dblclick']); // reacts on click and double click
htmlElement.click.wire(function(e){
    alert('Clicked!');
});

Members

Collection of Hooks

Properties:
Name Type Description
hook module:capsula.Hook A hook that represents the underlying DOM element of this capsule.
Since:
  • 0.1.0
Source:

Collection of Loops

Properties:
Name Type Description
loop module:capsula.Loop (inherited from HasRootHTML) A loop that represents the underlying DOM element of this capsule.
Since:
  • 0.1.0
Source:

Methods

addEventOutput(eventName, opt_outputNameopt)

Creates new output operation for the given event name (e.g. 'click'). Each time the event is captured output operation is called with event object as an argument. If output name is provided in the second argument, output operation would take that name, otherwise it would default to the event name.
Parameters:
Name Type Attributes Description
eventName string event for which to create output operation, e.g. 'click' or 'dblclick'
opt_outputName string <optional>
 output operation name, if not specified the default value is the eventName
Since:
  • 0.1.0
Source:
Throws:
ILLEGAL_ARGUMENT
Type
Error
Example

Reacting on click event

let htmlElement = new html.Element('div');
...
htmlElement.addEventOutput('click');
...
htmlElement.click.wire(function(e){
    alert('I have just been ' + e.type + 'ed.'); // I have just been clicked.
});