HTML#DOM树的遍历

有很长时间没有接触HTML相关的开发了,最近有机会接触到这块,感觉做前端很容易,但要做好就不容易,好的前端一点也不比后端容易.变化多端的代码都会有共通的思想.

1、功能描述

1.1、解析特定的HTML结构

1.2、传递给后台做Excel处理

1.3、响应给客户端一个文件流

 

/**
 * 结点实体结构
 * @param {} p 上级
 * @param {} t 关联的当前DOM
 * @param {} v 值
 * @return {}
 */
var DomTree = function(p,t,v) {
	var parent = p;
	var target = t;
	var childs = [];
	var value = v;
	var attr = [];
	return {
		"getTarget":function() {
			return target;
		},
		"getParent":function() {
			return parent;
		},
		"getChilds":function() {
			return childs;
		},
		"addChild":function(child) {
			childs.push(child);
		},
		"getValue":function() {
			return value;
		},
		"addAttr":function(k,v) {
			attr.push({'KEY':k,'VALUE':v});
		},
		"toString":function() {
			return '{target:' + target + ';parent:' + (parent==null?"NULL":parent) + ';childs:' + childs.length + ';value:' + (value==null?"NULL" : value) + '}';
		},
		"toHTML":function(filter) {
			if (filter(target)) {
				var rtnStr = '<'.concat(target['tagName']);
				//附加属性_Begin
				for (var i = 0; i < attr.length; i++) {
					var obj = attr[i];
					rtnStr = rtnStr.concat(" ").concat(obj["KEY"]).concat("='").concat(obj["VALUE"]).concat("' ");
				}
				//附加属性_End
				//不要忘记标签结束
				rtnStr = rtnStr.concat('>');
				//递归的思想/分层处理HTML的转换
				for (var index = 0; index < childs.length; index++) {
					var child = childs[index];
					rtnStr = rtnStr.concat(child.toHTML(filter));
				}
				rtnStr = rtnStr.concat((value == null) ? "" : value).concat("</").concat(target['tagName']).concat('>');
				return rtnStr;
			} else {
				return value == null ? '' : value;
			}
		}
	}
};
/**
 * 临时对象，负责DOM处理
 */
var tmpObj = function(){
	/**
	 * 调试
	 */
	function debug(str) {
		//document.getElementById('wst_acc_101.remark').value = document.getElementById('wst_acc_101.remark').value + str + "\r\n";
	}
	/**
	 * 取子节点
	 */
	function getChildren(domTree) {
		var target = domTree.getTarget();
		if (target.children) {
			for (var index = 0; index < target.children.length; index++) {
				var child = target.children[index];
				var childDomTree = new DomTree(domTree, child, getChildValue(child));
				domTree.addChild(childDomTree);
				getChildren(childDomTree);
			}
		}
	}
	/**
	 * 取给定节点的值
	 */
	function getChildValue(child) {
		if (child['tagName'] == 'SELECTE') {
			return (child['options'][child['selectedIndex']]['value']);
		} else if (child['tagName'] == 'INPUT') {
			var rtnValue = null;
			switch(child['type']) {
				case 'text':
					rtnValue = child['value'];
					break;
				case 'hidden':
					rtnValue = child['value'];
					break;
				default:
					rtnValue = null;
					break;
			}
			return rtnValue;
		} else if (child['tagName'] == 'LABEL') {
			return child['innerText'];
		}
		return (child.children==null)?child['innerHTML']:null;
	}
	return {
		"sayHello":function() {
			alert('Hello');
		},
		"ergodicTableDom":function(tableElemId, parentObj) {
			var tableElemObj = document.getElementById(tableElemId);
			if (!tableElemObj) {
				return null;
			}
			var root = new DomTree(null, tableElemObj, null);
			root.addAttr('border','1');
			getChildren(root);
			//debug(root.toHTML(filerElem));
			return root;
		}
	}
}();
org.ybygjy.util.exportTable = tmpObj;

测试

/**
 * 导出Excel_过滤元素，此方法在dom转换过程中的回调处理，通过true/false决定逻辑处理分支
 * <p>{true:表示该dom需要被处理;false:表示不会被处理}</p>
 */
function smartForm_filterElem(elem) {
	if (elem['tagName'] == 'INPUT') {
		return false;
	} else if (elem['tagName'] == 'LABEL') {
		return false;
	} else if (elem['tagName'] == 'SELECT') {
		return false;
	} else if (elem['tagName'] == 'A') {
		return false;
	} else if (elem['tagName'] == 'TEXTAREA') {
		return false;
	}
	return true;
}
/**
 * 导出Excel_入口
 * @param {} obj 参数列表 {exportTableId:指定导出Table的Id;fileName:指定导出文件名称}
 */
function smartForm_doExport(obj) {
	try {
		var exportTableId = obj.id.split('.')[0];
		var result = org.ybygjy.util.exportTable.ergodicTableDom(exportTableId);
		var htmlContent = (result.toHTML(smartForm_filterElem));
		window.exportWindow = window.open('ExportExcelAction.sf?EXPORT_FILENAME=' + exportTableId + '&EXPORT_CONTENT=' + htmlContent,'ExportWindow','width:300,height:300,scroll:no');
	} catch (e) {
		alert(e.message);
	}
}