Home > Developer > JavaScript
Web standards can access any of the tags in the document through getElementById (), Getelementsbyname (), and getElementsByTagName ().
(1) getElementById ():
getElementById () can access a specific element in the document, as the name implies, by using the ID to get the element, so only the element with the ID set is accessible.
(2) Getelementsbyname ():
The method uses the Name property to get the element, but note the difference: getElementById () is element, and getelementsbyname () is elements. Obviously, the Getelementsbyname () return value is a lot, because the ID of each element in document is unique, but name can be duplicated. If a document has more than two tags in the same name, then Getelementsbyname () can take these elements to make up an array.
For example:
<div name= "DocName" id= "Docid1" ></div>
<div name= "DocName" id= "Docid2" ></div>
Then you can use Getelementsbyname ("DocName") to obtain the two DIV elements, with getelementsbyname ("DocName") [0] to access the first Div, with Getelementsbyname (" DocName ") [1] to access the second Div.
(3) getElementsByTagName ()
getElementsByTagName () is a tagname (tag name) to get the element, a document will of course have the same label, so this method is also to get an array.
For example:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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;
}
-
</style>
<body>
<div name= "DocName" id= "docid1" onclick= "bgcolor ()" ></div>
<div name= "DocName" id= "Docid2" onclick= "bgcolor ()" ></div>
</body>
<script language= "JavaScript" type= "Text/javascript" >
<!--
function bgcolor () {
var docnobj=document.getelementsbytagname ("div");
Docnobj[0].style.backgroundcolor = "BLACK";
Docnobj[1].style.backgroundcolor = "BLACK";
}
-
</script>
Summarize the standard DOM, access a specific element as far as possible with the standard getElementById (), access the label with the standard Getelementbytagname (), but IE does not support getelementsbyname (), So avoid using getelementsbyname (), but Getelementsbyname () and non-conforming document.all[] are not all virgin, they have their own convenience, with no need to look at the site users use what browser, It's up to you to decide.
getElementById in JavaScript is very common, but in standard pages, an ID can only appear once, if I want to control multiple elements at the same time, such as point a link, let multiple layers hide, how to do? With class, of course, the same class is allowed to repeat in the page, so is there a getelementbyclass? No, but it can be solved:
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-want
Allpagetags[i].style.display= ' None ';
}
}
}
Since the getElementById () method is used more frequently, I have collected some usage of this method on the Internet.
document.getElementById ("link"). href;
document.getElementById ("link"). Target;
document.getElementById ("img"). SRC;
document.getElementById ("img"). Width;
document.getElementById ("img"). Height;
document.getElementById ("Input"). Value;
So how do you get the values between <div></div> and <a></a>? such as <div id= "div" >aaa</div> in the Aaa,<a href= "#" id= "link" >bbb</a> in the BBB, also very simple, using innerHTML can be:
document.getElementById ("div"). InnerHTML;
document.getElementById ("link"). InnerHTML;
getElementById method
Returns a reference to the first object with the specified ID property value.
Grammar
Oelement = document.getElementById (sidvalue)
Parameters
Sidvalue required option. String indicating the value of the ID attribute
return value
Returns the first object with the same ID property value as the specified value. The return value is an object
Comments
If the ID belongs to a collection, the getElementById method returns the first object in the collection.
The getElementById method is equivalent to using the Item method on the all collection. For example, the following code sample shows how to retrieve the first feature with ID Odiv from a Document object.
Using the DHTML object model:
var ovdiv = Document.body.all.item ("Odiv");
Using 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 occurrence of the ID property value Odiv.
<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 ()" >&NBSP;
getElementById method
returns the first one with the specified ID property value, for example, a text box in a Web page is called text1
getElementById (Text1) can get the object of the Text1 box. and use all the properties and methods of the text box
This is a JS method, meaning to get the value of the element through the control ID, such as a form in the envelope text, label, etc., they are the elements of the form, there is a distribution of Id,getelementbyid () is the text value that is obtained for 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
