Class: HasRootHTML

(abstract) html.HasRootHTML()

Abstract generalization for all capsules that have single root HTML element. Accordingly, this capsule has one loop named loop that represents the root HTML element as well as a number of methods that work with the root element.

To create a specialized concrete capsule (class), extend this capsule and override the getElement method to return the root HTML (DOM) element.

Methods provided by this capsule enable both inspection and modification of the root element. For example, to inspect the root element use getAttribute, getStyle, getInnerHTML, etc. To modify it, use setAttribute, setStyle, addClass, etc.

Constructor

(abstract) new HasRootHTML()

Since:
  • 0.1.0
Source:
Example

Concrete Specialization Example of HasRootHTML Capsule

let HTMLElement = capsula.defCapsule({
    base: html.HasRootHTML,
    hooks: 'hook',
    root: { // part declaration
        capsule: capsula.ElementRef,
        deferredArgs: function(htmlTagName){
            return document.createElement(htmlTagName);
        }
    },
    '+ getElement': function () { // must override HasRootHTML.getElement method
        return this.root.getElement();
    },
    'this.hook': 'root.hook',
    'this.loop': 'root.loop' // this.loop is inherited from HasRootHTML
});
let span = new HTMLElement('span'), // create an instance of HTMLElement
text = new html.Text('Hello world'); // create an instance of Text
span.hook.hook(text.loop); // put the text inside the span
span.loop.renderInto(document.body); // put the span into the body
console.log(span.getInnerHTML()); // Hello world

Members

Collection of Loops

Properties:
Name Type Description
loop module:capsula.Loop A loop that represents the root HTML element of this capsule.
Since:
  • 0.1.0
Source:

Methods

addClass(className)

Adds new class to the root element's class attribute.
Parameters:
Name Type Description
className string the new class to be added
Since:
  • 0.1.0
Source:

getAttribute(name) → {string}

Returns the value of the root element's attribute specified by the name parameter.
Parameters:
Name Type Description
name string the name of the attribute whose value is to be returned
Since:
  • 0.1.0
Source:
Returns:
the root element's attribute value
Type
string

(abstract) getElement() → {Element}

Returns this capsule's root HTML (DOM) element. Meant to be overridden.
Since:
  • 0.1.0
Source:
Returns:
the root HTML (DOM) element
Type
Element

getId() → {string}

Returns the value of the root element's id attribute.
Since:
  • 0.1.0
Source:
Returns:
the root element's id
Type
string

getInnerHTML() → {string}

Returns the root element's inner HTML.
Since:
  • 0.1.0
Source:
Returns:
the root element's inner HTML
Type
string

getProperty(name) → {string}

Returns the value of the root element's (DOM object's) property specified by the name parameter.
Parameters:
Name Type Description
name string the name of the property whose value is to be returned
Since:
  • 0.1.0
Source:
Returns:
the root element's property value
Type
string

getStyle(name) → {string}

Returns the value of the root element's style specified by the name parameter.
Parameters:
Name Type Description
name string the style name whose value is to be returned
Since:
  • 0.1.0
Source:
Returns:
the root element's style
Type
string

getTagName() → {string}

Returns the root element's tag name.
Since:
  • 0.1.0
Source:
Returns:
the root element's tag name
Type
string

hasAttribute(name) → {boolean}

Checks whether the root element has an attribute with the given name.
Parameters:
Name Type Description
name string the name of the attribute to check
Since:
  • 0.1.0
Source:
Returns:
true if the root element has an attribute with the given name, false otherwise
Type
boolean

hasClass(className) → {boolean}

Checks whether the root element has a class with the given name.
Parameters:
Name Type Description
className string the name of the class to check
Since:
  • 0.1.0
Source:
Returns:
true if the root element has a class with the given name, false otherwise
Type
boolean

removeAttribute(name)

Removes the root element's attribute with the given name.
Parameters:
Name Type Description
name string the name of the attribute to remove
Since:
  • 0.1.0
Source:

removeClass(className)

Removes the class from the root element's class attribute.
Parameters:
Name Type Description
className string the class name to remove
Since:
  • 0.1.0
Source:

setAttribute(name, value)

Sets new value to the root element's attribute specified by the name parameter.
Parameters:
Name Type Description
name string the name of the attribute to be set
value string the value to set
Since:
  • 0.1.0
Source:

setId(id)

Sets new value to the root element's id attribute.
Parameters:
Name Type Description
id String new value for the id attribute
Since:
  • 0.1.0
Source:

setInnerHTML(innerHTML)

Sets the inner HTML to the root element.
Parameters:
Name Type Description
innerHTML string HTML markup to set into the root element
Since:
  • 0.1.0
Source:

setProperty(name, value)

Sets the value to the root element's (DOM object's) property specified by the name parameter.
Parameters:
Name Type Description
name string the name of the property to be set
value string the value to set
Since:
  • 0.1.0
Source:

setStyle(name, value)

Sets the value of style to the given root element's.
Parameters:
Name Type Description
name string name of the style to be set
value string new value to set
Since:
  • 0.1.0
Source: