The javascript Simulation System pop-up box, by the way, the DOM trainer

Recently, I had nothing to worry about. By the way, I wrote a small demo to practice my hands, operate Dom, and share it with me.

HTML:

 <!  Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"  >  <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  >      <  Head  >          <  Meta  HTTP-equiv = "Content-Type"  Content  = "Text/html; charsets = UTF-8"   />          <  Title  > New Web project </  Title  >          <  Style  Type  = "Text/CSS"  > Body  {  Margin  :  0px  ;  Padding  :  0px  ;  Font-family  : ""  ;  }  A  {  Text-Decoration  :  None  ;  Color  :  #333 ;   }  A: hover  {  Color  :  #936  ;  }  . OP  {  Width :  100%  ;  Height  :  Auto  ;  }          </  Style  >      </  Head  >     <  Body  >          <  Div  Class  = "Op"  ID  = "Min"  > </  Div  >          <  Div  Class  = "On"  ID = "On"  >              <  A  Href  = "#"  > Onclick1 </  A  >              <  A  Href  = "#"  > Onclick2 </  A >          </  Div  >          <  Script  Type  = "Text/JavaScript"  SRC  = "Index. js"  > </  Script  >          <  Script  Type  = "Text/JavaScript" >  Window. onload  =   Function  () {Index.  Int  (); Index. setopacity (  "  Opmint  "  , "  10  "  ); Index. onclickall ();}  </  Script  >      </  Body  >  </  Html  > 

Javascript:

 /* ** @ Author xiangwenwen  */  VaR Index = {  //  Initialization      Int : Function  (){  //  Body Height          VaR Body = Document. Body;  VaR Bodyheight = Body. scrollheight; //  Onclick parent container          VaR On = Document. getelementbyid ("On" ); On. style. Position = "Relative" ; On. style. zindex = "5" ;  //  Status parent container          VaR Min = Document. getelementbyid ("min" ); Min. style. Display = "NONE" ; Min. style. Position = "Absolute" ; Min. style. zindex = "10"; Min. style. Height = Bodyheight + "PX" ; Min. style. Display = "NONE" ;  //  Transparent Layer          VaR Dodiv = Document. createelement ("Div" ); Dodiv. setattribute ( "ID", "opmint" ); Min. appendchild (dodiv );  VaR Opmint = Document. getelementbyid ("opmint" ); Opmint. style. Height = Bodyheight + "PX" ; Opmint. style. Width = "100%" ; Opmint. style. Background = "#000" ;  //  Vertical center div1          VaR DIV = Document. createelement ("Div" ); Div. setattribute ( "ID", "admint" ); Min. appendchild (DIV );  VaR Admint = Document. getelementbyid ("admint" ); Admint. style. Position = "Absolute" ; Admint. style. Width = "300px"; Admint. style. Height = "50px" ; Admint. style. Border = "4px solid #963" ; Admint. style. Top = "50%" ; Admint. style. Left = "50%" ; Admint. style. margintop = "-25px" ; Admint. style. marginright = "0px" ; Admint. style. marginbottom = "0px" ; Admint. style. marginleft = "-150px" ; Admint. style. Display = "NONE";  //  Close button 1          VaR A = Document. createelement ("" ); A. setattribute ( "Href ","#" ); A. setattribute ( "ID", "close" ); Admint. appendchild ();  VaR Aclose = Document. getelementbyid ("close" ); Aclose. innerhtml = "Close" ; Aclose. onclick = Function () {Admint. style. Display = "NONE" ; Min. style. Display = "NONE" ;}  // Vertical center  Div2          VaR Div2 = Document. createelement ("Div" ); Div2.setattribute ( "ID", "addiv2" ); Min. insertbefore (div2, Min. childnodes [ 2 ]);  VaR Addiv2 = Document. getelementbyid ("addiv2" ); Addiv2.style. Position = "Absolute" ; Addiv2.style. Width = "300px" ; Addiv2.style. Height = "50px" ; Addiv2.style. Border = "4px solid #789" ; Addiv2.style. Top = "50%" ; Addiv2.style. Left = "50%" ; Addiv2.style. margintop = "-25px" ; Addiv2.style. marginright = "0px" ; Addiv2.style. marginbottom = "0px" ; Addiv2.style. marginleft = "-150px"; Addiv2.style. Display = "NONE" ;  //  Close button 2          VaR A2 = Document. createelement ("" ); A2.setattribute ( "ID", "a2close" ); A2.setattribute ( "Href ","#" ); Addiv2.appendchild (A2 );  VaR A2close = Document. getelementbyid ("a2close" ); A2close. innerhtml = "Close" ; A2close. onclick =Function  () {Addiv2.style. Display = "NONE" ; Min. style. Display = "NONE" ;}},  //  Transparent background Setopacity: Function  (Node, level) {Node = Typeof Node = "string "? Document. getelementbyid (node): node;  If  (Document. All) {node. style. Filter = "Alpha (opacity =" + level + ")" ;}  Else  {Node. style. Opacity = Level/100 ;};},  //  Initialize click status Onclickall: Function  (){  VaR Onmin = Document. getelementbyid ("min" );  VaR Onck = Document. getelementbyid ("On" );  VaR Adon = onck. getelementsbytagname ("" );  VaR Adclose = Document. getelementbyid ("admint" );  VaR Acclose = Document. getelementbyid ("addiv2" ); Adon [ 0]. onclick = Function  () {Onmin. style. Display = "Block" ; Adclose. style. Display = "Block" ;} Adon [ 1]. onclick = Function () {Onmin. style. Display = "Block" ; Acclose. style. Display = "Block" ;}}} 

For addition, deletion, modification, and query of DomCodeThe method is replaceChild (). One is the node to be inserted, and the other is the node to be replaced. This method is used to replace a node after deletion. If you do not want to replace the node, you only need to delete the node and directly use removechild ().