dojo/dom-form

表单的处理在前端开发中一样意义非凡，dojo/dom-form模块提供了一系列方法来处理表单元素。比如：

fieldToObject： 将一个表单字段转化成JavaScript原生类型，可能是string、array等 toObject：将一个表单元素转化成JavaScript对象 toQuery： 将一个表单元素转化成编码后的query字符串 toJson： 将一个表单元素转化成JSON字符串

我们知道，表单字段的值可能是一个结果，也可能是多个结果，所以在JavaScript中字段的值可能是字符串也可能是数组，form模块中提供了一个setValue函数，该函数用于便利form中的表单元素时，取出其中的字段值：

function setValue(/*Object*/ obj, /*String*/ name, /*String*/ value){

 // Skip it if there is no value

 if(value === null){

 return;

 // 如果name存在，转化成数组，不存在直接赋值给obj

 var val = obj[name];

 if(typeof val == "string"){ // inlined type check

 obj[name] = [val, value];

 }else if(lang.isArray(val)){

 val.push(value);

 }else{

 obj[name] = value;

 }

同时并不是所有在表单中的元素都能够转化成为表单字段，比如："file|submit|image|reset|button"和没有name的元素;在处理的时候也要把他们排除掉。

 

fieldToObject将单个元素转化成字段值，这里有三种情况：普通input、radio与checkbox、select（多选、单选），同时没有name的、上文提到的file|submit|image|reset|button、disabled为true的元素都应该排除：

fieldToObject: function fieldToObject(/*DOMNode|String*/ inputNode){

 var ret = null;

 inputNode = dom.byId(inputNode);

 if(inputNode){

 var _in = inputNode.name, type = (inputNode.type || "").toLowerCase();

 //没有name的元素、disabled为true的都应该排除

 if(_in type !inputNode.disabled){

 if(type == "radio" || type == "checkbox"){

 //radio和checkbox只有选中状态才有意义

 if(inputNode.checked){

 ret = inputNode.value;

 }else if(inputNode.multiple){//这部分是深度优先搜索的一种实现，目的在于找到select中的option元素

 ret = [];

 var nodes = [inputNode.firstChild];

 while(nodes.length){

 for(var node = nodes.pop(); node; node = node.nextSibling){

 if(node.nodeType == 1 node.tagName.toLowerCase() == "option"){

 if(node.selected){

 ret.push(node.value);

 }else{

 if(node.nextSibling){

 nodes.push(node.nextSibling);

 if(node.firstChild){

 nodes.push(node.firstChild);

 break;

 }else{

 ret = inputNode.value;

 return ret; // Object

 }

dojo中实现判断type时并没有排除不合适的type，这是一个缺陷。

 

toObject，将整个表单转化为Object类型。思路简单：便利所有有效的表单元素，利用fieldToObject取出字段值，将所有的字段放入一个对象中，这里要利用上文提到的setValue方法。

toObject: function formToObject(/*DOMNode|String*/ formNode){

 var ret = {}, elems = dom.byId(formNode).elements;

 //依次便利表单元素，取出字段值

 for(var i = 0, l = elems.length; i ++i){

 var item = elems[i], _in = item.name, type = (item.type || "").toLowerCase();

 //没有name的、不合适的元素、disabled状态的元素排除掉

 if(_in type exclude.indexOf(type) 0 !item.disabled){

 setValue(ret, _in, form.fieldToObject(item));

 // input type="image" src="...." 对于图片按钮的处理

 if(type == "image"){

 ret[_in + ".x"] = ret[_in + ".y"] = ret[_in].x = ret[_in].y = 0;

 return ret; // Object

 }

toQuery与toJSON都是利用toObject转为为对象后，进行进一步操作。其中toQuery方法利用了io-query模块的objectToQuory方法，这个下篇文章在解释。而toJSON只是简单的调用了JSON.stringify方法。

json.stringify(form.toObject(formNode), null, prettyPrint ? 4 : 0);

JS DOM innerHTML和innerText JS DOM innerHTML和innerText 在JavaScript中，我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本” 例如，我们用innerHTML来向HTML文档中添加一张图片：