implemented setters on attributes, styles, classname

dom.js

@@ -1,10 +1,16 @@
 /**
- * The Phi Technology LLC, Steve L. Nyemba <steve@the-phi.com>
+ * Javascript-x framework version 1.0, 
- * Javascript-x framework version 0.1
+ * (c) 2012 - 2014, The Phi Technology LLC, https://the-phi.com
+ * Steve L. Nyemba <steve@the-phi.com>
  * 
- * Handling of DOM objects will rely on DOM object identifiers (ID) with a few exceptions
+ * Handling of DOM objects will rely on DOM object identifiers (ID) with a few exceptions. 
- * This file handles DOM objects with a namespace implementation. 
+ * The focus of a dom object is mostly centered around a single DOM object, 
- * The basic design is a wrapper around WC3 standard interface for a dom
+ * We advise using utils.js in order to handle collections of DOM objects as utils.js implements various utilities and industry standard design patterns 
+ * 
+ * This implementation is designed by W3C specifications of HTML5 and will integrate well with other frameworks that do so.
+ * In addition we tried to mildly specify preconditions for executions of functions
+ * LICENSE: GPLv3
+ *  This program comes with absolute NO WARRANTY or implied warranty and is free to use for any purpose: modified, integrated, distributed at will.
  */
 
 if(!jx){
@@ -19,6 +25,20 @@ jx.dom = {} ;
 jx.dom.exists = function(id){
     return document.getElement(id) != null || document.getElementsByName(id) != null ;
 }
+/**
+ * This function will remove a node given it's identifier
+ * @param {type} id
+ * @returns {undefined}
+ */
+jx.dom.remove = function(id){
+    if (id.constructor == String){
+            item = jx.dom.get.instance(id)
+    }else{
+            item = id ;
+    }
+    item.parentNode.removeChild(item) ;
+    
+}
 /**
  * This function allow extraction from an select tag, if mutil selection is enabled an array is returned otherwise a scalar or string
  * The function also supports accessing a user defined attribute if specified otherwise it will use the default 'value', text can be specified
@@ -26,7 +46,7 @@ jx.dom.exists = function(id){
  * @param {type} field
  * @returns {Array|jx.dom.get.dropdown.value}
  */
-_dropdownvalue = function(id,field){
+_getdropdownvalue = function(id,field){
         var _dom = document.getElementById(id) ;
         field = (field)?field:'value'
         var value = null;
@@ -54,7 +74,7 @@ _dropdownvalue = function(id,field){
  * @param {type} id name of the checkboxes
  * @returns {value}
  */
-_checkboxvalue = function(id){
+_getcheckboxvalue = function(id){
     ldoms = document.getElementsByName(id) ;
     value = null;
     for(var i=0; i < ldoms.length; i++){
@@ -65,27 +85,50 @@ _checkboxvalue = function(id){
     }
     return value;    
 }
-_radiovalue = function(id){
+_getradiovalue = function(id){
-    return _checkboxvalue(id);
+    return _getcheckboxvalue(id);
 }
 /**
  * Returns the input value of an input with type == text|password
  * @param {type} id
  * @returns {document@call;getElementById.value}
  */
-_inputvalue = function(id){
+_getinputvalue = function(id){
     _input = document.getElementById(id) ;
     return _input.value ;
 }
-_spanvalue = function(id){
+_getspanvalue = function(id){
     _input = document.getElementById(id) ;
     return _input.innerHTML ;
 }
 
 jx.dom.get = {} ;
-
+/** 
+ * This function will return either a newly created dom object or an existing one if passed an identifier {name|id}
+ * @pre : jx.dom.exists(id) == true || id.match(/<htmlTag>/i)
+ * @post: jx.dom.get.instance(id) != null
+ * @returns {NodeList|obj|Element}
+ */
+jx.dom.get.instance = function(id){
+    if(jx.dom.exists(id)){
+        obj = (document.getElementById(id)) ;
+        if(obj == null){
+            obj = document.getElementsByName(id)
+            if(obj.length == 1){
+                obj = obj[0]
+            }else{
+                obj = null;
+            }
+        }
+    }else{
+        obj = document.createElement(id)
+    }
+    return obj ;
+}
 /**
  * This function will return the value of a dom object regardless of the object
+ * @pre : jx.dom.exists(id) == true
+ * @post: No Exception is Thrown 
  * @param {type} id
  * @returns {undefined}
  */
@@ -98,9 +141,7 @@ jx.dom.get.value = function(id){
         }
     }
     //-- at this point we've tried two methods 
-    if(obj == null){
+    
-        return null;
-    }
     tag = obj.tagName ;
     if(tag.match(/input/i)){
         if(obj.type.match(/text|password/i)){
@@ -115,28 +156,132 @@ jx.dom.get.value = function(id){
     key = key.toUpperCase();
    
     pointer = {} ;
-    pointer['SELECT']  = _dropdownvalue ;   
+    pointer['SELECT']  = _getdropdownvalue ;   
-    pointer['SPAN']    = _spanvalue;
+    pointer['SPAN']    = _getspanvalue;
-    pointer['DIV']     = _spanvalue;
+    pointer['DIV']     = _getspanvalue;
 
-    pointer['CHECKBOX']= _checkboxvalue;
+    pointer['CHECKBOX']= _getcheckboxvalue;
-    pointer['RADIO']   = _radiovalue ;
+    pointer['RADIO']   = _getradiovalue ;
-    pointer['INPUT']   = _inputvalue;
+    pointer['INPUT']   = _getinputvalue;
    
     return pointer[key](id)
    
 }
-jx.dom.get.children = function(id){}
+/**
+ * This function returns an attribute for a given DOM object
+ * @pre jx.dom.exists(id)
+ * @post: none
+ */
+jx.dom.get.attribute = function(id,field){
+    _dom = jx.dom.get.instance(id)
+    return _dom.getAttribute(field) ;
+}
+/**
+ * This function returns a list of children nodes provided an existing node identifier
+ * @pre : jx.dom.exists(id) || jx.dom.get.instance(id) != null
+ * @post: jx.dom.get.children(id).length >= 0
+ * @param {type} id
+ * @returns {Array|list}
+ */
+jx.dom.get.children = function(id){
+    list = [] ;
+    if(id.constructor == String){
+        nodes = document.getElementById(id).childNodes ;
+    }else{
+        nodes = id.childNodes;
+    }
+    for(var i=0; i < nodes.length; i++){
+        node = nodes[i];                        
+        if(node.nodeName.match('^#.*') == null){
+            list.push(node) ;
+        }
+    }
+    return list ;    
+}
 
+
+_setinputvalue = function(id,value){
+    _input = document.getElementById(id) ;
+    if(_input.value == null){
+        _input.innerHTML = value
+    }else{
+        _input.value = value;
+    }
+}
+/**
+ * ref _setinputvalue
+ * The following are aliases intended for a more readable codebase, the just set a value to {DIV,SPAN,INPUT(text|password)}
+ */
+_setspanvalue   = _setinputvalue;
+_setdivalue     = _setinputvalue
+_setcheckbox = function(id,value){
+    _checkboxes = document.getElementsByName(id)
+    for(i in _checkboxes){
+        if(checkbox.value == value){
+            checkbox.checked = true;
+            break;
+        }
+    }
+}
+_setradiobox = _setcheckbox ;
+_setdropdown = function(id,field,value){
+    _select = document.getElementById(id) ;
+    if(value == null && field != null){
+        aux = field ;
+        field = 'value' ;
+        value = aux ;
+    }
+    options = _select.options;
+    for(i in options){
+        if(options[i][field] == value){
+            options[i].selected = true ;
+            break;
+        }
+    }
+}
 jx.dom.set = {} ;
 /**
- * This function will set a value to a dom object
+ * This function will set a value to a dom object on a page
- * @param {type} id
+ * @pre : jx.dom.exists(id) == true
- * @param {type} value
+ * @post: No Exceptio is Thrown
- * @returns {undefined}
  */
 jx.dom.set.value= function(id,value){
     obj = document.getElementById(id) ;
-    tag = obj.tagName ;
+    if(obj != null){
+        key = obj.tagName ;
+    }else {
+        obj = document.getElementsByName(id)
+        if(obj != null){
+            key = obj[0].tagName ;
+        }
     }
     
+}
+/**
+ * This function sets an attribute a value to a given attribute or creates and sets it otherwise
+ * @pre : jx.dom.exists(id)
+ * @post: jx.dom.get.attribute(id,field) == value || or none
+ */
+jx.dom.set.attribute = function(id,field,value){
+    _dom = jx.dom.get.instance(id) ;
+    _dom.setAttribute(field,value) ;
+
+}
+/**
+ * This function acts as a wrapper to set the style of a dom object
+ * @returns {undefined}
+ */
+jx.dom.set.style = function(id,field,value){
+    _dom = jx.dom.get.instance(id) ;
+    _dom.style[field] = value;
+}
+/**
+ * This function will set the css class name of a DOM object and override any existing one
+ * @pre : jx.dom.exists(id)
+ * @post: jx.dom.get.attribute(id,'className') == value
+ * @returns {undefined}
+ */
+jx.dom.set.class = function(id,value){
+    _dom = jx.dom.get.instance(id) ;
+    _dom.className = value;
+}