Learn javaScript notes (4)-Attribute, HTML elements, document fragments, and table operations

GetAttribute and setAttribute get and set object attributes:
[Javascript]
Function documentTest (){
Var oHtml = document.doc umentElement; // obtain the Var oHead = oHtml. firstChild; // get Var oBody = oHtml. lastChild; // obtain <body/>
OBody. setAttribute ("id", "bodyId ");
Alert (oBody. getAttribute ("id "));
}
Create HTML elements:
[Javascript]
// Create
Function createNode (){
Var oP = document. createElement ("p"); // create a p tag
Var sText = document. createTextNode (""); // create a text node that contains the text ""
OP. appendChild (sText); // Add sText to the end of the oP node.
Document. body. appendChild (oP );
}
Remove:
[Javascript]
// Remove
Function deleteNode (){
Var oP = document. body. getElementsByTagName ("p") [0];
/* Document. body. removeChild (oP );*/
OP. parentNode. removeChild (oP );
}
Replace:
[Javascript]
// Replace
Function replaceP (){
Var oNewOp = document. createElement ("p ");
Var sNewText = document. createTextNode ("enchanting ");
ONewOp. appendChild (sNewText );
Var oP = document. body. getElementsByTagName ("p") [0];
OP. parentNode. replaceChild (oNewOp, oP );
}
Make the new message appear before the old message:
[Javascript]
Function insertNode (){
Var oP = document. createElement ("p ");
Var sText = document. createTextNode ("Heartbroken ");
OP. appendChild (sText );
Var ooP = document. body. getElementsByTagName ("p") [0];

/**
* Two parameters are received, that is, the node to be inserted, before which node is inserted.
*/
Document. body. insertBefore (oP, ooP );
}
CreateDocumentFragment () file fragmentation: mentioned in javaScript Optimization
[Javascript]
/**
* Document fragments
* Once a node is added to document. body (or its descendant node), the page updates and reflects this change,
* This is good for a small number of updates, as in the previous example. However, when you want to add a large amount of data to the document,
* If you add these changes one by one, the process may be very slow. To solve this problem, you can create a document fragment,
* Add all new nodes to the file, and add the content of the file fragments to the document at one time.
* The sixth and sixth points of javaScript optimization are also mentioned.
*/
Function createDocument (){
Var array = ["undefeated in the East", "Ling huchong", "Renren", "Wang Yu", "zhu ", "Azi", "cat", "dog", "Jing brother"];
Var oF = document. createDocumentFragment ();
For (var I = 0; I <array. length; I ++ ){
Var oP = document. createElement ("p ");
Var sText = document. createTextNode (array [I]);
OP. appendChild (sText );
OF. appendChild (oP );
}
Document. body. appendChild ();
}
Two ways to operate a table
[Javascript]
Function createTable (){
Var oTable = document. createElement ("table ");
OTable. setAttribute ("border", "1 ");
OTable. setAttribute ("width", "100% ");

Var oTBody = document. createElement ("tbody ");
OTable. appendChild (oTBody );

// Attribute operation
OTBody. insertRow (0 );
OTBody. rows [0]. insertCell (0 );
OTBody. rows [0]. cells [0]. appendChild (document. createTextNode ("Hu Fei (bandit )"));
OTBody. rows [0]. insertCell (1 );
OTBody. rows [0]. cells [1]. appendChild (document. createTextNode ("Sunny (male )"));

OTBody. insertRow (1 );
OTBody. rows [1]. insertCell (0 );
OTBody. rows [1]. cells [0]. appendChild (document. createTextNode ("nothing "));
OTBody. rows [1]. insertCell (1 );
OTBody. rows [1]. cells [1]. appendChild (document. createTextNode ("Zhao Min "));

// Directly create a table subject
Var oTr = document. createElement ("tr ");
OTBody. appendChild (oTr );
Var oTd1 = document. createElement ("td ");
OTd1.appendChild (document. createTextNode ("Yang Guo "));
OTr. appendChild (oTd1 );
Var oTd2 = document. createElement ("td ");
OTd2.appendChild (document. createTextNode ("aunt "));
OTr. appendChild (oTd2 );


Document. body. appendChild (oTable );
}


From Dan's column