| Getelementbyid getelementsbyname getelementsbytagname difference and summary | 1st Floor |
Getelementbyid getelementsbyname getelementsbytagname difference and summary
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.
For example, the ID of a div is docid:
<Div id = "docid"> </div>
You can use getelementbyid ("docid") to obtain this element.
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"
Http://www.w3.org/TR/html4/loose.dtd>
<HTML>
<Head>
<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>
</Head>
<Body> <Div id = "docid" name = "docname" onclick = "bgcolor ()"> </div>
</Body>
</Html>
<Script language = "JavaScript" type = "text/JavaScript">
<! --
Function bgcolor (){
Document. getelementbyid ("docid"). style. backgroundcolor = "#000"
}
-->
</SCRIPT>
2. getelementsbyname ()
This is an element obtained by name, but I do not know whether it is. This is get elements. The Plural elements indicates that it is not an element. Why?
The ID of each element in the document is unique, but the name can be repeated. A metaphor is like a person's ID card number is unique (theoretically, although there are duplicates in reality), but the name
There are many duplicates. If more than two tags have the same name in a document, getelementsbyname () can obtain these elements to form an array.
For example, there are two divs:
<Div name = "docname" id = "docid1"> </div>
<Div name = "docname" id = "docid2"> </div>
You can use getelementsbyname ("docname") to obtain the two divs, use getelementsbyname ("docname") [0] to access the first Divs, and use getelementsbyname
3. getelementsbytagname ()
In this case, the tagname is used to obtain the element. Of course, a document contains the same tag, so this method also gets an array.
In the following example, there are two divs. You can use getelementsbytagname ("Div") to access them and use getelementsbytagname ("Div") [0] to access the first Div.
Getelementsbytagname ("Div") [1] access the second Div.
<! 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 access tags, but IE does not support
Getelementsbyname (), so it is necessary to avoid using getelementsbyname (), but getelementsbyname () and non-conforming document. All [] are not completely useless, it
They have their own convenience. If you don't need to use it, it's up to you to 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 // pick out the tags with our class name
If (allpagetags. Classname = theclass ){
// Manipulate this in whatever way you want
Allpagetags. Style. Display = 'none ';
}
}
}
1, grid. getcell (I, 3). innerhtml; curobj. nextsibling. innerhtml
The innerhtml attribute does not automatically encode special characters in and out of HTML entities. HTML entities allow special characters (such as <characters) to be displayed. Generally, the browser interprets these characters as special characters. <Characters are interpreted as the beginning of a flag and are not displayed on the page. To display the <character, the object is required <.
For example, if the innerhtml attribute is set to "<B> Hello </B>", the <and> characters are not converted to <and>. The displayed output is <B> Hello </B>. The browser displays the <B> mark and "hello" Text in bold.
Warning because the text is not HTML encoded, scripts can be embedded in the HTML tag of the text. If this attribute is dynamically set using user input, verify its value to reduce security vulnerabilities.
To provide automatic HTML encoding and decoding, use the innertext attribute.
The above is introduced on a Microsoft website, and I simply think the HTML format is used.
2, typename = temp. Options [temp. selectedindex]. innertext; document. All ("B1"). innertext = "close"; name = name_other.options. Innertext; fig. innertext = namearray;
Use the innertext attribute to programmatically modify the content between the start and end tags of the HTML Server Control.
Unlike the innerhtml attribute, the innertext attribute automatically encodes special characters in and out of HTML entities. HTML entities allow special characters (such as <characters) to be displayed. Generally, the browser interprets these characters as special characters. <Characters are interpreted as the beginning of a flag and are not displayed on the page. To display the <character, the object is required <.
For example, if the innertext attribute is set to "<B> Hello </B>", the <and> symbols are converted to <and>. The displayed output is <B> Hello </B>. <And> the entity instructs the browser that these characters will be displayed on the page. The browser does not detect the <B> flag and displays the text in bold. The text displayed on the page is: <B> Hello </B>.
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
