getElementById, createelement, appendchild several DHTML elements 1th/2 page _javascript tips

Source: Internet
Author: User
Tags tag name
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

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.