From lcx's blog
In the WEB standard, you can use getElementById (), getElementsByName (), and getElementsByTagName () to access any tag in the DOCUMENT:
1. getElementById ()
GetElementById () can access a specific element in the DOCUMENT. As the name suggests, the element is obtained by ID. Therefore, only the element with the ID set can be accessed.
For example, the ID of a DIV is docid:
<Div id = "docid"> </div>
You can use getElementById ("docid") to obtain this element.
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> ById </title>
<Style type = "text/css">
<! --
# Docid {
Height: 400px;
Width: 400px;
Background-color: #999 ;}
-->
</Style>
</Head>
<Body> <div id = "docid" name = "docname" onClick = "bgcolor ()"> </div>
</Body>
</Html>
<Script language = "JavaScript" type = "text/JavaScript">
<! --
Function bgcolor (){
Document. getElementById ("docid"). style. backgroundColor = "#000"
}
-->
</Script>
, GetElementsByName ()
This is an element obtained by NAME, but I do not know whether it is. This is GET ELEMENTS. The Plural ELEMENTS indicates that it is not an element. Why?
The ID of each element in the DOCUMENT is unique, but the NAME can be repeated. A metaphor is like a person's ID card number is unique (theoretically, although there are duplicates in reality), but the name
There are many duplicates. If more than two tags have the same NAME in a document, getElementsByName () can obtain these elements to form an array.
For example, there are two divs:
<Div name = "docname" id = "docid1"> </div>
<Div name = "docname" id = "docid2"> </div>
You can use getElementsByName ("docname") to obtain the two divs, use getElementsByName ("docname") [0] to access the first Divs, and use getElementsByName
3. getElementsByTagName ()
In this case, the TAGNAME is used to obtain the element. Of course, a DOCUMENT contains the same tag, so this method also gets an array.
In the following example, there are two divs. You can use getElementsByTagName ("DIV") to access them and use getElementsByTagName ("div") [0] to access the first div.
GetElementsByTagName ("div") [1] access the second DIV.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> Byname, tag </title>
<Style type = "text/css">
<! --
# Docid1, # docid2 {
Margin: 10px;
Height: 400px;
Width: 400px;
Background-color: #999 ;}
-->
</Style>
</Head>
<Body>
<Div name = "docname" id = "docid1" onClick = "bgcolor ()"> </div>
<Div name = "docname" id = "docid2" onClick = "bgcolor ()"> </div>
</Body>
</Html>
<Script language = "JavaScript" type = "text/JavaScript">
<! --
Function bgcolor (){
Var docnObj = document. getElementsByTagName ("div ");
DocnObj [0]. style. backgroundColor = "black ";
DocnObj [1]. style. backgroundColor = "black ";
}
-->
</Script>
To sum up the standard DOM, try to use the standard getElementById () for accessing a specific element, and use the standard getElementByTagName () for access tags, but IE does not support
GetElementsByName (), so it is necessary to avoid using getElementsByName (), but getElementsByName () and non-conforming document. all [] are not completely useless, it
They have their own convenience. If you don't need to use it, it's up to you to see what browsers the website users use.
GetElementById in Javascript is very commonly used, but one id can only appear once on a standard page. If I want to control multiple elements at the same time, such as clicking a link to hide multiple layers, what should I do? If you use a class, of course, the same class can be repeated on the page. Is there any getElementByClass? No, but the solution is as follows:
// Create an array
Var allPageTags = new Array ();
Function hideDivWithClasses (theClass ){
// Populate the array with all the page tags
Var allPageTags = document. getElementsByTagName ("div ");
// Cycle through the tags using a for loop
For (I = 0; I // Pick out the tags with our class name
If (allPageTags [I]. className = theClass ){
// Manipulate this in whatever way you want
AllPageTags [I]. style. display = 'none ';
}
}
}
==================================
Use of the appendChild Method
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> untitled document </title>
</Head>
<Script language = "javascript">
// Generate matching rows with the input content
Function setNames (){
CompleteBody = document. getElementById ("complete_body ");
Var row, cell, txtNode;
// Var nextNode = names [I]. firstChild. data;
Row = document. createElement ("tr ");
Cell = document. createElement ("td ");
Cell. setAttribute ("bgcolor", "# FFFAFA ");
Cell. setAttribute ("border", "0 ");
// TxtNode = document. createTextNode (nextNode );
Alert ("sdf ");
Var newText = document. createTextNode ("This is the second paragraph .");
// TxtNode = document. createElement ("div ");
Alert ("sdf1 ");
Cell. appendChild (newText );
Alert ("sdf2 ");
Row. appendChild (cell );
CompleteBody. appendChild (row );
}
</Script>
<Body>
<Input type = "submit" name = "sdf" onclick = "setNames ()">
<Table id = "complete_table" bgcolor = "# FFFAFA" border = "0"
Cellspacing = "0" cellpadding = "0"/>
<Tbody id = "complete_body"> </tbody>
</Table>
</Body>
</Html>
======================================
CreateElement
<Html>
<Head>
<Title> createElement </title>
<Script language = "javascript">
<! --
Var I = 0;
Function addInput (){
Var o = document. createElement ("input ");
O. type = "button ";
O. value = "button" + I ++;
O. attachEvent ("onclick", addInput );
Document. body. appendChild (o );
O = null;
}
// -->
</Script>
</Head>
<Body onload = "addInput ();">
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
