Html # DOM tree traversal

For a long time, I have not been familiar with HTML-related development. Recently I have the opportunity to access this part. I feel that it is easy to develop the front-end, but it is not easy to do it well. A good front-end is no easier than a back-end. A variety of code may share the same idea.

1. Function Description

1.1 parse the specific HTML Structure

1.2 transfer to the background for Excel Processing

1.3 respond to a file stream from the client

 

/*** Node object structure * @ Param {} p upper-level * @ Param {} t associated current Dom * @ Param {} V value * @ 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']); // additional attribute _ beginfor (VAR I = 0; I <ATTR. length; I ++) {var OBJ = ATTR [I]; rtnstr = rtnstr. concat (""). concat (OBJ ["key"]). concat ("= '"). concat (OBJ ["value"]). concat ("'");} // additional attribute _ end // do not forget the tag end rtnstr = rtnstr. concat ('>'); // recursive thought/Layered HTML transformation for (VAR Index = 0; index <Childs. length; index ++) {va R 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 ;}}};/*** temporary object, responsible for Dom Processing */var tmpobj = function () {/*** debug */function debug (STR) {// document. getelementbyid ('wst _ acc_101.remark '). value = document. getelementbyid ('wst _ acc_101.remark '). value + STR + "\ r \ n";}/*** obtain the subnode */function getchildren (domtree) {var target = domtree. gettarget (); If (target. children) {for (VAR Index = 0; index <target. children. length; index ++) {var child = target. chi Ldren [Index]; var childdomtree = new domtree (domtree, child, getchildvalue (child); domtree. addchild (childdomtree); getchildren (childdomtree) ;}}/ *** get the value of a given node */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 ['va Lue ']; break; Case 'ddn': 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;

Test

/*** Export the Excel _ filter element. This method is called back during Dom conversion. The logical processing branch is determined by true/false * <p> {true: indicates that the Dom needs to be processed; false: indicates that it will not be processed} </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;} RET Urn true;}/*** export Excel _ ENTRY * @ Param {} OBJ parameter list {exporttableid: Specifies the ID of the table to be exported; filename: specify the exported file name} */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, 'portwindow', 'width: 300, height: 300, scroll: no');} catch (E) {alert (E. message );}}