Understanding document.all[]:D OM Document Object model

Source: Internet
Author: User
Tags array object html tags object model tag name tagname xmlns access

Article Introduction: talking about document.all and Web Standard.

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)
 
 
  1. "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  2. document.all example
  3. example heading

  4. this is a paragraph It is only a paragraph.

  5. yet another paragraph.

  6. this final paragraph has special emphasis.

Example 2 (accessing a specific element)

 
 
  1. "Http://www.w3.org/TR/html4/loose.dtd" >
  2. Click div color

The above example gives you an idea of how to access a specific element in a document, such as a div in a document.

, you can access this div through the Id,name or index property of this div:

 
  
 



3. Use document.all[]

Example 3

 
 
  1. "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  2. document.all Example #2
  3. dhtml Fun!!!

  4. onclick= "document.all[' heading1 '].align= ' left ';"/>
  5. onclick= "document.all[' heading1 '].align= ' center ';"/>
  6. onclick= "document.all[' heading1 '].align= ' right ';"/>
  7. onclick= "document.all[' heading1 '].style.fontsize= ' xx-large ';"/>
  8. onclick= "document.all[' heading1 '].style.fontsize= ' xx-small ';"/>
  9. onclick= "document.all[' heading1 '].style.color= ' red ';"/>
  10. onclick= "document.all[' heading1 '].style.color= ' blue ';"/>
  11. onclick= "document.all[' heading1 '].style.color= ' black ';"/>
  12. onclick= "document.all[' heading1 '].innertext=document.testform.usertext.value;"/>

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:



Then you can use getElementById ("DocId") to get this element.

 
 
  1. "Http://www.w3.org/TR/html4/loose.dtd" >
  2. ById


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:

 
  
 



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.) )

 
 
  1. Byname,tag


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.

 
 
  1. Byname,tag

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 (), you should avoid using getelementsbyname (), but getelementsbyname () and substandard Document.all[] is not all virgin, they have their own convenience, with no need to see the site's users to use what browser, by your own decision.

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 <> the saying name is not a core attribute. Not all tags can add the name attribute (you can take my following example to validator.w3.org for verification)

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:

 
 
  1. Test
  2. 124alert


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.

 
 
  1. Byname,tag


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.