UIZE JavaScript Framework

TO DO - Uize.Dom.Node

This is a TO DO document for the proposed Uize.Dom.Node module.

1. Proposed Simplified Interface

The following proposed interface aims to address the desire amongst Web developers for easier and more concise ways to access and manipulate DOM elements.

1.1. The Uize.Dom.Node Object

A convenient proxy wrapper for DOM objects that allows methods to be called without always dereferencing the static methods on the Uize.Dom.* packages and having to specify the node blob in each call.

EXAMPLE

var myNode = Uize.Dom.Node ('#myNodeId');
myNode.style ({
  border:'1px',
  background:'#ccc'
});
myNode.display (false);
myNode.on (
  'click',
  function () {
    // do something
  }
);

EXAMPLE - WITH CHAINING

Uize.Dom.Node ('#myNodeId')
  .style ({
    border:'1px',
    background:'#ccc'
  })
  .display (false)
  .on (
    'click',
    function () {
      // do something
    }
  )
;

1.2. Node Blob Management

The Uize.Dom.Node object provides methods for managing the set of nodes that make up the node blob that the object represents.

nodeBlobOBJ.addToBlob - lets you add more nodes to a node blob
nodeBlobOBJ.clearBlob - clears the node blob of all its contents
nodeBlobOBJ.removeFromBlob - removes the specified nodes from the node blob
nodeBlobOBJ.setBlob - lets you set the nodes that make up the node blob

1.3. Combo Setter and Getter Methods

.

1.4. Method Chaining

To appease developers who are fond of method chaining, all modify type methods that don't need to return a result will return a reference to the node blob.

EXAMPLE

Uize.Dom.Node ('#myNodeId')
  .style ({display:'none',position:'absolute'})
  .on (
    'click',
    function () {
      // handle click event
    }
  )
;

1.5. Uize.Dom.Basics.style

Set or get style for a node blob.

BEFORE

Uize.Dom.Basics.style ('#myNodeId','display','none');
Uize.Dom.Basics.style ('#myNodeId',{display:'none',position:'absolute'});
var nodeDisplay = Uize.Dom.Basics.style ('#myNodeId','display');

AFTER

Uize.Dom.Node ('#myNodeId').style ('display','none');
Uize.Dom.Node ('#myNodeId').style ({display:'none',position:'absolute'});
var nodeDisplay = Uize.Dom.Node ('#myNodeId').style ('display');

1.6. Uize.Dom.Basics.on

A short form for the wire method.

BEFORE

Uize.Dom.Basics.on (
  '#myNodeId',
  'click',
  function () {
    // handle click event
  }
);

AFTER

Uize.Dom.Node ('#myNodeId').on (
  'click',
  function () {
    // handle click event
  }
);