How JavaScript correctly uses Getelementbyid,getelementsbyname (), and getElementsByTagName ()

Source: Internet
Author: User
Tags tag name

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.  

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.