1, DOM
Web standards are now hot and hot, but here's a document.all[that doesn't meet the standard. Dom--document object model, which provides a way to access document objects. For example, there is a table in the document, you want to change its background color, you can use document.all[in JavaScript to access this table. But Dom is also different, because the competition between browser vendors, the browser vendors have developed their own private DOM, only in their own browser to run correctly, document.all[] is only run in IE is Microsoft's private dom. To correctly understand the DOM, give the IE4 Dom
2. Understanding document.all[]
From IE4 started IE's object model to increase the document.all[], to see document.all[] Description:
Array of all HTML tags in the document. Collection of all elements contained by the object.
That is, document.all[] is an array variable consisting of all the tags in the document, including all elements in the Document object (see Example 1).
IE ' s document.all collection exposes all document elements. This array provides access to every element in the document.
Document.all[] This array can access all the elements in the document.
Example 1 (this allows you to understand which objects are in the document)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<title>document.all example</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=iso-8859-1 "/>
<body>
<p>this is a <em>paragraph</em> It is only a <em>paragraph.</em></p>
<p>yet another <em>paragraph.</em></p>
<p>this final <em>paragraph</em> has <em id= "special" >special emphasis.</em></p>
<script type= "Text/javascript" >
<!--
var i,origlength;
Origlength = Document.all.length;
document.write (' document.all.length= ' +origlength+ "<br/>");
for (i = 0; i < origlength; i++)
{
document.write ("document.all[" +i+ "]=" +document.all[i].tagname+ "<br/>");
}
-->
</script>
</body>
Example 2 (accessing a specific element)
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title> Click div color </title>
<style type= "Text/css" >
<!--
#docid {
height:400px;
width:400px;
Background-color: #999;}
-->
</style>
<body><div id= "DocId" name= "DocName" ></div>
</body>
<script language= "javascript" type= "Text/javascript" >
<!--
function bgcolor () {
Document.all[7].style.backgroundcolor= "#000"
}
-->
</script>
The above example gives you an idea of how to access a specific element in a document, such as a div in a document.
<div id= "DocId" name= "DocName" ></div>, you can access this div through the Id,name or index property of this div:
document.all["DocId"]
document.all["DocName"]
Document.All.Item ("DocId")
Document.All.Item ("DocName")
DOCUMENT.ALL[7]
Document.all.tags ("div") returns all the div arrays in the document, in this case there is only one div, so you can access it with document.all.tags ("div") [0].
3. Use document.all[]
Example 3
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<title>document.all Example #2 </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=iso-8859-1 "/>
<body>
<!--works in Internet Explorer and compatible-->
<H1 id= "heading1" align= "center" style= "Font-size:larger;" >dhtml Fun!!! <form name= "Testform" id= "Testform" action= "#" method= "Get" >
<br/><br/>
<input type= "button" value= "Align left"
/>
<input type= "button" value= "Align Center"
/>
<input type= "button" value= "Align Right"
/>
<br/><br/>
<input type= "button" value= "bigger"
/>
<input type= "button" value= "smaller"
/>
<br/><br/>
<input type= "button" value= "Red"
/>
<input type= "button" value= "Blue"
/>
<input type= "button" value= "Black"
/>
<br/><br/>
<input type= "text" name= "Usertext" id= "Usertext" size= "/>"
<input type= "button" value= "Change Text"
/>
</form>
</body>
4. Access Methods in standard DOM
The beginning said document.all[] does not conform to the web standards, and what replaces it? document.getElementById
Most Third-party browsers are "strict standards" implementations, meaning that they implement, and ECMA standards and I Gnore most of the proprietary object models of Internet Explorer and netscape.if the demographic for your Web site include s users likely to use less common browsers, such as Linux aficionados, it might is a good idea to avoid ie-specific Featur ES and use the instead of the DOM. by Internet Explorer 6, we are in that IE implements significant portions of the "the" the "the" consortium DOM.
This passage means that most third-party browsers support only the DOM of the Web, and if your site users use other browsers, you'd better avoid using IE's private properties. And IE6 is also starting to support the DOM of the consortium.
After all, most people do not understand the standard, before using the standard, you can also use document.all[in your Web page to access the Document object before the Web Standard, continue today under the Web Standard can be passed getElementById (), Getelementsbyname ( ), and getElementsByTagName () access any one of the tags in the 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.
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<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" ></div>
</body>
<script language= "javascript" type= "Text/javascript" >
<!--
function bgcolor () {
document.getElementById ("DocId"). Style.backgroundcolor= "#000"
}
-->
</script>
2, 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 repeats a lot. 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 ("DocName ") [1] accesses the second Div.
The following passage is wrong, please see forfor reply, but unfortunately, ie did not support this method, we are interested in Firefox or Netscape debugging the following example. (I debug successfully in NETSCAPE7.2 English and FIREFOX1.0.) ）
<! 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" ></div
<div name= "DocName" id= "Docid2" ></DIV>
</body>
<script language= "JavaScript" type= "Text/javascript"
<!--
function bgcolor () {
var docnobj= Document.getelementsbyname ("DocName");
Docnobj[0].style.backgroundcolor = "BLACK";
Docnobj[1].style.backgroundcolor = "BLACK";
}
</script>
It seems that the latest version of the browser to understand the Web standards still have problems, I know only the box model, space bugs, floating bugs, flash insert Bug, From the document.getelementsbyname can be seen firefox,netscape understanding standard deviation, but Forfor said the right: to apply the standard flexibly.
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" ></div
<div name= "DocName" id= "Docid2" ></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 avoid the use of getelementsbyname (), but Getelementsbyname () and substandard document.all[] are not all virgin, they have their own convenience, with no need to see the site users use what browser, It's up to you to decide.
About Document.getelementsbyname
IE of course support can say IE more loyal to html/xhtml standard (hehe original Firefox also not how to gloat over ^_^)
According to O ' Reilly's <
So you give Div the name attribute in theory will not be the result. This point IE is good to meet the standard ~!!
(At the same time also see the standard also have annoying place ~_~ so we do not have to put the standard as a matter of two years to use XML, this is also obsolete!) advocating flexible webstandard application ideas in addition to conforming to the idea of XML and other browser-based understanding to do it.
Report:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
<script type= "Text/javascript" >
<!--
function aa () {
var s= "Elements with attribute ' name ': \ n";
var aaa=document.getelementsbyname ("a");
for (Var i=0;i<aaa.length;i++) s+= "\ n" +aaa[i].tagname;
alert (s);
}
-->
</script>
<title> Test </title>
<body>
<div name= "A" ><span name= "a" >1</span>2<input name= "a" value= "3"/><textarea name= "a" rows= "2" cols= "8" >4</textarea><button >alert</button></div>
</body>
In short, the DIV does not support the name attribute, so the document.getelementsbyname example debugging does not pass.
Let's use input as an 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;
Background-color: #999;}
-->
</style>
<body>
<input name= "DocName"/>
<input name= "DocName"/>
</body>
<script language= "javascript" type= "Text/javascript" >
<!--
function bgcolor () {
var docnobj=document.getelementsbyname ("DocName");
Docnobj[0].style.backgroundcolor = "BLACK";
Docnobj[1].style.backgroundcolor = "BLACK";
}
function Bgcolor2 () {
var docnobj=document.getelementsbyname ("DocName");
Docnobj[0].style.backgroundcolor = "#fff";
Docnobj[1].style.backgroundcolor = "#fff";
}
-->
</script>
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
