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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.