Document. All [] is added to the object model of ie starting from ie4. Let's take a look at the description of document. All:
Array of all HTML tags in the document. Collection of all elements contained by the object.
That is to say, document. All [] is an array variable consisting of all 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 elements in the document.
Example 1 (this helps you understand what 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>
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> document. All example </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = ISO-8859-1"/>
</Head>
<Body>
<H1> example heading <HR/>
<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>
<HR/>
<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>
</Html>
The execution result is:
Example heading
--------------------------------------------------------------------------------
This is a paragraph. It is only a paragraph.
Yet another paragraph.
This final paragraph has special emphasis.
--------------------------------------------------------------------------------
Document. All. Length = 18
Document. All [0] =!
Document. All [1] = html
Document. All [2] = head
Document. All [3] = title
Document. All [4] = Meta
Document. All [5] = body
Document. All [6] = h1
Document. All [7] = HR
Document. All [8] = P
Document. All [9] = em
Document. All [10] = em
Document. All [11] = P
Document. All [12] = em
Document. All [13] = P
Document. All [14] = em
Document. All [15] = em
Document. All [16] = HR
Document. All [17] = script
(Note that it can only run on IE)
Example 2 (access a specific 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> click Div color change </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. All [7]. style. backgroundcolor = "#000"
}
-->
</SCRIPT>
The above example shows you how to access a specific element in the document. For example, the document contains a div
<Div id = "docid" name = "docname"> </div>:
Document. All ["docid"]
Document. All ["docname"]
Document. All. Item ("docid ")
Document. All. Item ("docname ")
Document. All [7]
Document. all. tags ("Div") returns all Div arrays in the document. In this example, there is only one Div, so document. all. tags ("Div") [0] can be accessed.
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>
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> document. All example #2 </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = ISO-8859-1"/>
</Head>
<Body>
<! -- Works in Internet Explorer and compatible -->
<H1 id = "heading1" align = "center" style = "font-size: larger;"> DHTML fun !!! </H1>
<Form name = "testform" id = "testform" Action = "#" method = "get">
<Br/>
<Input type = "button" value = "align left"
Onclick = "document. all ['heading1']. align = 'left'; "/> // change the value of the align attribute in the <Input type = "button" value = "align Center"
Onclick = "document. All ['heading1']. align = 'center';"/>
<Input type = "button" value = "align right"
Onclick = "document. All ['heading1']. align = 'right';"/>
<Br/>
<Input type = "button" value = "bigger"
Onclick = "document. All ['heading1']. style. fontsize = 'xx-large ';"/>
<Input type = "button" value = "smaller"
Onclick = "document. All ['heading1']. style. fontsize = 'xx-small';"/>
<Br/>
<Input type = "button" value = "red"
Onclick = "document. All ['heading1']. style. Color = 'red';"/>
<Input type = "button" value = "blue"
Onclick = "document. All ['heading1']. style. Color = 'blue';"/>
<Input type = "button" value = "black"
Onclick = "document. All ['heading1']. style. Color = 'black';"/>
<Br/>
<Input type = "text" name = "usertext" id = "usertext" size = "30"/>
<Input type = "button" value = "Change text"
Onclick = "document. All ['heading1']. innertext = Document. testform. usertext. value;" // change the text content in the </Form>
</Body>
</Html>
4. standard DOM access method
Document. All [] does not comply with the web standards. What should we use to replace it? Document. getelementbyid
Most third-party browsers are "strict standards" implementations, meaning that they implement W3C and ECMA standards and ignore most of the proprietary object models of Internet Explorer and Netscape. if the demographic for your web site has des users likely to use less common browsers, such as Linux aficionados, it might be a good idea to avoid ie-specific features and use the W3C Dom instead. by Internet Explorer 6, we see that IE implements significant portions of the W3C Dom.
This section means that most third-party browsers only support W3C Dom. If your website users use other browsers, you 'd better avoid using the private properties of IE. IE6 also began to support W3C Dom.
After all, most people do not understand the standard. before using the standard, you can also use document on your webpage. all [] access document objects are previously written to the Web standard. To continue the Web standard today, you can access any tag in the document through getelementbyid (), getelementsbyname (), and getelementsbytagname:
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 there are many duplicate names. 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 ("docname ") [1] access the second Div.
The following paragraph is wrong. Please refer to the response from forfor, but unfortunately, ie does not support this method. If you are interested, you can debug the following example in Firefox or Netscape. (I have successfully debugged netscape7.2 in English and firefox1.0 .)
<! 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. getelementsbyname ("docname ");
Docnobj [0]. style. backgroundcolor = "black ";
Docnobj [1]. style. backgroundcolor = "black ";
}
-->
</SCRIPT>
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>
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
