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']);//附加属性_Beginfor (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);}}