[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
Notetheorderinwhichwecreatedtheelementsandthetextnode:
FirstwecreatedtheTABLEelement.
Next,wecreatedtheTBODYelement,whichisachildoftheTABLEelement.
Next,weusedalooptocreatetheTRelements,whicharechildrenoftheTBODYelement.
ForeachTRelement,weusedalooptocreatetheTDelements,whicharechildrenofTRelements.
ForeachTDelement,wethencreatedthetextnodewiththetablecell'stext.
OncewehavecreatedtheTABLE,TBODY,TR,andTDelementsandthenthetextnode,wethenappendeachobjecttoitsparentintheoppositeorder:
First,weattacheachtextnodetoitsparentTDelementusing
mycurrent_cell.appendChild(currenttext);
Next,weattacheachTDelementtoitsparentTRelementusing
mycurrent_row.appendChild(mycurrent_cell);
Next,weattacheachTRelementtotheparentTBODYelementusing
mytablebody.appendChild(mycurrent_row);
Next,weattachtheTBODYelementtoitsparentTABLEelementusing
mytable.appendChild(mytablebody);
Next,weattachtheTABLEelementtoitsparentBODYelementusing
mybody.appendChild(mytable);
Rememberthistechnique.YouwilluseitfrequentlyinprogrammingfortheW3CDOM.First,youcreateelementsfromthetopdown;thenyouattachthechildrentotheparentsfromthebottomup.
Here'stheHTMLmarkupgeneratedbytheJavaScriptcode:
... cellisrow0column0 cellisrow0column1 cellisrow1column0 cellisrow1column1
...
Here'stheDOMobjecttreegeneratedbythecodefortheTABLEelementanditschildelements:
Image:sample1-tabledom.jpg
YoucanbuildthistableanditsinternalchildelementsbyusingjustafewDOMmethods.Remembertokeepinmindthetreemodelforthestructuresyouareplanningtocreate;thiswillmakeiteasiertowritethenecessarycode.IntheTABLEtreeofFigure1theelementTABLEhasonechild,theelementTBODY.TBODYhastwochildren.EachTBODY'schild(TR)hasonechild(TD).Finally,eachTDhasonechild,atextnode.
2、
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
Inthisexample,wesetthemyPvariabletotheDOMobjectforthesecondpelementinsidethebody:
First,wegetalistofallthebodyelementsvia
document.getElementsByTagName("body")
SincethereisonlyonebodyelementinanyvalidHTMLdocument,thislistwillhaveonlyoneitem.
Next,wegetthefirstelementonthatlist,whichwillbetheobjectforthebodyelementitself,via
myBody=myDocumentElements.item(0);
Next,wegetallthepelementsthatarechildrenofthebodyvia
myBodyElements=myBody.getElementsByTagName("p");
Finally,wegettheseconditemfromthelistofpelementsvia
myP=myBodyElements.item(1);
Image:sample2a2.jpg
OnceyouhavegottentheDOMobjectforanHTMLelement,youcansetitsproperties.Forexample,ifyouwanttosetthestylebackgroundcolorproperty,youjustadd:
myP.style.background="rgb(255,0,0)";
//settinginlineSTYLEattribute
[编辑]
CreatingTextNodeswithdocument.createTextNode(..)
UsethedocumentobjecttoinvokethecreateTextNodemethodandcreateyourtextnode.Youjustneedtopassthetextcontent.Thereturnvalueisanobjectthatrepresentsthetextnode.
myTextNode=document.createTextNode("world");
ThismeansthatyouhavecreatedanodeofthetypeTEXT_NODE(apieceoftext)whosetextdatais"world",andmyTextNodeisyourreferencetothisnodeobject.ToinsertthistextintoyourHTMLpage,youneedtomakethistextnodeachildofsomeothernodeelement.
[编辑]
InsertingElementswithappendChild(..)
So,bycallingmyP.appendChild([node_element]),youaremakingtheelementanewchildofthesecondPelement.
myP.appendChild(myTextNode);
Aftertestingthissample,notethatthewordshelloandworldaretogether:helloworld.Sovisually,whenyouseetheHTMLpageitseemslikethetwotextnodeshelloandworldareasinglenode,butrememberthatinthedocumentmodel,therearetwonodes.ThesecondnodeisanewnodeoftypeTEXT_NODE,anditisthesecondchildofthesecondPtag.ThefollowingfigureshowstherecentlycreatedTextNodeobjectinsidethedocumenttree.
Image:sample2b2.jpg
createTextNodeandappendChildisasimplewaytoincludewhitespacebetweenthewordshelloandworld.AnotherimportantnoteisthattheappendChildmethodwillappendthechildafterthelastchild,justlikethewordworldhasbeenaddedafterthewordhello.SoifyouwanttoappendaTextNodebetweenhelloandworldyouwillneedtouseinsertBeforeinsteadofappendChild.
[编辑]
CreatingNewElementswiththedocumentobjectandthecreateElement(..)method
YoucancreatenewHTMLelementsoranyotherelementyouwantwithcreateElement.Forexample,ifyouwanttocreateanewPelementasachildoftheBODYelement,youcanusethemyBodyinthepreviousexampleandappendanewelementnode.Tocreateanodesimplycalldocument.createElement("tagname").Forexample:
myNewPTAGnode=document.createElement("p");
myBody.appendChild(myNewPTAGnode);
Image:sample2c.jpg
[编辑]
RemovingnodeswiththeremoveChild(..)method
Eachnodecanberemoved.ThefollowinglineremovesthetextnodewhichcontainsthewordworldofthemyP(secondPelement).
myP.removeChild(myTextNode);
FinallyyoucanaddmyTextNode(whichcontainsthewordworld)intotherecentlycreatedPelement:
myNewPTAGnode.appendChild(myTextNode);
Thefinalstateforthemodifiedobjecttreelookslikethis:
Image:sample2d.jpg
[编辑]
Creatingatabledynamically(backtoSample1.html)
Fortherestofthisarticlewewillcontinueworkingwithsample1.html.Thefollowingfigureshowsthetableobjecttreestructureforthetablecreatedinthesample.
[编辑]
ReviewingtheHTMLTablestructure
Image:sample1-tabledom.jpg
[编辑]
Creatingelementnodesandinsertingthemintothedocumenttree
Thebasicstepstocreatethetableinsample1.htmlare:
Getthebodyobject(firstitemofthedocumentobject).
Createalltheelements.
Finally,appendeachchildaccordingtothetablestructure(asintheabovefigure).Thefollowingsourcecodeisacommentedversionforthesample1.html.
Attheendofthestartfunctionthereisanewlineofcode.Thetable'sborderpropertywassetusinganotherDOMmethod,setAttribute.setAttributehastwoarguments:theattributenameandtheattributevalue.YoucansetanyattributeofanyelementusingthesetAttributemethod.