Home > Developer > JavaScript
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.
(2) getelementsbyname ():
This method obtains elements through the name attribute, but note the difference: getelementbyid () is element, while getelementsbyname () is elements. Obviously, there are many return values for getelementsbyname (), because the IDs of each element in the document are unique, but the names can be repeated. If more than two tags have the same name in a document, getelementsbyname () can obtain these elements to form an array.
For example:
<Div name = "docname" id = "docid1"> </div>
<Div name = "docname" id = "docid2"> </div>
You can use getelementsbyname ("docname") to obtain the two DIV elements, use getelementsbyname ("docname") [0] to access the first Div, and use getelementsbyname ("docname ") [1] access the second Div.
(3) getelementsbytagname ()
Getelementsbytagname () is an element obtained through tagname (Tag Name). Of course, a document contains the same tag, so this method also gets an array.
For example:
<! 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 the access tag. However, ie does not support getelementsbyname (), therefore, you must avoid using getelementsbyname (), but getelementsbyname () and non-conforming document. all [] is not completely useless. They have their own convenience. If you don't need to use them, you can 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 <allpagetags. length; I ++)
{
If (allpagetags [I]. classname = theclass ){
// Manipulate this in whatever way you want
Allpagetags [I]. style. Display = 'none ';
}
}
}
In view of the frequent use of the getelementbyid () method, I collected some usage information about this method on the Internet.
Document. getelementbyid ("Link"). href;
Document. getelementbyid ("Link" cmd.tar get;
Document. getelementbyid ("IMG"). SRC;
Document. getelementbyid ("IMG"). width;
Document. getelementbyid ("IMG"). height;
Document. getelementbyid ("input"). value;
How can we obtain the value between <div> </div> and <A> </a>? For example, AAA in <Div id = "Div"> AAA </div>, BBB in <a href = "#" id = "Link"> BBB </a>, it is also very simple. You can use innerhtml:
Document. getelementbyid ("Div"). innerhtml;
Document. getelementbyid ("Link"). innerhtml;
Getelementbyid Method
Returns a reference to the first object with the specified ID attribute value.
Syntax
Oelement = Document. getelementbyid (sidvalue)
Parameters
Sidvalue is required. String that specifies the ID Attribute Value
Return Value
Returns the first object with the same ID property value as the specified value. // The returned value is an object.
Note
If the ID belongs to a set, the getelementbyid method returns the first object in the set.
The getelementbyid method is equivalent to the item method on the all set. For example, the following code sample shows how to retrieve the first element whose ID is odiv from the document object.
Use the DHTML Object Model:
VaR ovdiv = Document. Body. All. Item ("odiv ");
Use the Document Object Model (DOM ):
VaR ovdiv = Document. getelementbyid ("odiv ");
Example
The following example shows how to use the getelementbyid method to return the first appearance of the odiv with the ID attribute value.
<SCRIPT>
Function fngetid (){
// Returns the first Div element in the collection.
VaR ovdiv = Document. getelementbyid ("odiv1 ");
}
</SCRIPT>
<Div id = "odiv1"> Div #1 </div>
<Div id = "odiv2"> Div #2 </div>
<Div id = "odiv3"> Div #3 </div>
<Input type = "button" value = "get names" onclick = "fngetid ()">
Getelementbyid Method
Returns the first one with the specified ID attribute value. For example, the ID of a text box in a webpage is called text1.
Getelementbyid (text1) is used to get the object of the text1 box, And all attributes and methods of the text box are used.
This is a js method, which means to get the element value through the control ID, such as text and label in a form. They are all form elements and have an assigned ID, getelementbyid () is used to obtain the text value of these elements.
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
