Home > Developer > JavaScript
1. DOM
WEB standards are currently a hot topic, but the following is a document. all [] that does not comply with the standards. DOM--DOCUMENT object model Document object model provides methods to access document objects. for example, if you want to change the background color of a table in a document, you can use document in javascript. all [] access this TABLE. But DOM is also different. Because of the competition between browser vendors, various browser vendors have developed their own private DOM and can only run correctly on their own browsers, document. all [] is the private DOM that can only run on IE. To understand DOM correctly, the DOM of IE4 is given.
2. Understand document. all []
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"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <title> Document. all Example </title> <meta http-equiv = "content-type" content = "text/html; charset = ISO-8859-1 "/> </pead> <body> Example Heading <pr/> <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> <pr/> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Example 2 (access a specific element)
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> <ptml> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "> <title> click DIV color change </title> <style type =" text/css "> </style> </pead> <body> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
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>:
Copy codeThe Code is as follows: 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"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <title> Document. all Example #2 </title> <meta http-equiv = "content-type" content = "text/html; charset = ISO-8859-1 "/> </pead> <body> DHTML Fun !!! </Body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
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"> <ptml> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "> <title> ById </title> <style type =" text/css "> </style> </pead> <body> </ html>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
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"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "> <title> Byname, tag </title> <style type = "text/css"> </style> </pead> <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
It seems that there is still a problem with the latest version of the browser to understand WEB standards. I only know the box model, Space BUG, floating BUG, FLASH insertion BUG, from document. getElementsByName can be seen in FIREFOX. NETSCAPE understands that standards are biased, but forfor is right: flexible application of standards.
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"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "> <title> Byname, tag </title> <style type = "text/css"> </style> </pead> <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute] summarize the standard DOM and try to use the standard getElementById () to access A specific element (), standard getElementByTagName () is used for access tags, but IE does not support getElementsByName (). Therefore, getElementsByName () must be avoided, but getElementsByName () and document that do not comply with the standard are avoided. all [] is not completely useless. They have their own convenience. If you don't need to use them, you can see what browsers the website users use.
About document. getElementsByName
Of course, Internet Explorer is more loyal to html/xhtml standards)
According to the statement in O 'Reilly <HTML and XHTML authoritative guide>, name is not a core attribute. Not all labels can add the name attribute (you can use my example below to validator.w3.org for verification ).)
Therefore, adding the name attribute to the div does not produce any results theoretically. This IE is in line with the standard ~!!
(At the same time, we can see that compliance with standards is also annoying ~ _~ So you don't need to take standards seriously. It's outdated to use xml for two years! Advocate flexible webstandard application ideas. In addition to content conforming to xml ideas, others can simply follow the browser's understanding)
Appendix:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <ptml> <pead> <title> test </title> </pead> <body> 12 <input name = "a" value = "3"/> <pre class = "code" name = "a" rows = "2" cols = "8"> 4 </textarea> <button onclick = "aa () "> alert </button> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
In simple terms, DIV does not support the NAME attribute, so the document. getElementsByName example cannot pass.
The following example uses INPUT.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "> <title> Byname, tag </title> <style type = "text/css"> </style> </pead> <body> <input name = "docname" onmouseover = "bgcolor () "onmouseout =" bgcolor2 () "/> <input name =" docname "onmouseover =" bgcolor () "onmouseout =" bgcolor2 () "/> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
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
