Skip to main content

Binh.ElementNode

Binh.ElementNode is the base constructor generating instances of function, so called enode, which are wrappers managing HTML elements and can act on behalf of them.

Syntax​

JavaScript
new Binh.ElementNode(element: HTMLElement)

or, without new keyword:

JavaScript
Binh.ElementNode(element: HTMLElement)

Parameters​

element

  • A node of HTML element which is designated to be associated with an enode

Return value​

A function, so called enode, acting as a HTML element in JavaScript code, also having built-in methods to manipulate element(s) associated with it.

Examples​

Try to create enodes and use them on behalf of elements:

JavaScript
var div = new Binh.ElementNode(document.createElement('div'));
var span = Binh.ElementNode(document.createElement('span')); // Not require keyword "new"

div({ class: 'example', style: 'color: red;' });

div(
    span('A span of '),
    'some texts'
);

Functions div() and span() are enodes which are constructed and returned by Binh.ElementNode.

The above code will construct a piece of HTML as follows:

HTML
<div class="example" style="color: red;">
    <span>A span of </span>some texts
</div>

Caution​

IMPORTANT CAUTION

Although an enode is returned by Binh.ElementNode, it is NOT actually an instance of Binh.ElementNode.

It is an instance of Function.

Thus, an enode is basically a function with built-in methods.

Which means:

JavaScript
var enode = new Binh.ElementNode(document.createElement('div'));

enode instanceof Binh.ElementNode; // return FALSE

enode instanceof Function; // return TRUE

However, the property enode.constructor is forced with Binh.ElementNode:

JavaScript
var enode = new Binh.ElementNode(document.createElement('div'));

enode.constructor === Binh.ElementNode; // return TRUE

enode.constructor === Function; // return FALSE

It is crucial to be aware of the different among UI Component, Binh.ElementNode, and enode.

  • Binh.ElementNode is a funtion that generates instances of function known as enode.
  • enode is a standalone function with built-in methods to manipulate its associated HTML element, interacting with DOM and other enode(s).
  • UI Component is a function that defines how enode(s) is created, used, or compounded with each other, and then returns the final version of enode.