Any one of the labels in document:
1, getElementById ()
getElementById () can access a specific element in the document, as the name implies, by using an ID to get the element, so you can only access the element that has the ID set.
For example, there is a div with an ID of docid:
<div id= "DocId" ></div>
Then you can use getElementById ("DocId") to get this element.
<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>
<body><div id= "DocId" name= "DocName" onclick= "bgcolor ()" ></div>
</body>
<script language= "JavaScript" type= "Text/javascript" >
<!--
function bgcolor () {
document.getElementById ("DocId"). Style.backgroundcolor= "#000"
}
-->
</script>
, Getelementsbyname ()
This is through the name to get the element, but I do not know the attention is not, this is get ELEMENTS, the plural ELEMENTS represents not an element, why?
Because the ID of each element in the document is unique, name can be repeated. A metaphor is like a person's ID number is unique (theoretically, although there are duplicates in reality), but the name
It's a lot of repetition. If more than two labels in a document are the same, then Getelementsbyname () can make an array of these elements.
For example, there are two div:
<div name= "DocName" id= "Docid1" ></div>
<div name= "DocName" id= "Docid2" ></div>
Then you can use Getelementsbyname ("DocName") to get these two div, with Getelementsbyname ("DocName") [0] access to the first Div, with Getelementsbyname
3, getElementsByTagName ()
This is done by tagname (tag name) to get the element, a document of course will have the same label, so this method is also to get an array.
The following example has two div, you can use getElementsByTagName ("div") to access them, with getElementsByTagName ("div") [0] access to the first Div, with
getElementsByTagName ("div") [1] accesses the second Div.
<! 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;
Background-color: #999;}
-->
</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>
Summarizing the standard DOM, accessing a particular element with the standard getElementById (), accessing the label with the standard Getelementbytagname (), but IE does not support
Getelementsbyname (), so it is necessary to avoid the use of getelementsbyname (), but Getelementsbyname () and substandard document.all[] is not all virgin, it
They have their own convenience, with no need to see the site's users to use what browser, it is up to you to decide.
getElementById in JavaScript is very common, but in a standard page, an ID can only appear once, what if I want to control multiple elements at once, such as a link, and let multiple layers hide? With class, of course, the same class can be allowed to appear repeatedly in the page, then there is no getelementbyclass it? 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//pick out the tags and our class name
if (Allpagetags[i].classname==theclass) {
Manipulate this in whatever way for you want
Allpagetags[i].style.display= ' None ';
}
}
}
=============================
Current 1/2 page
12 Next read the full text
