Document.all and getElementById, Getelementsbyname, getElementsByTagName usage distinction-getelementbyid_javascript Skill

Source: Internet
Author: User
However, if you need to find a specific element in a document, the most effective method is getElementById ().
Note, however, that the results of using getElementById for different browsers may be different, as described below
Copy Code code as follows:

Text1:
<input name= "textName1" type= "text" id= "TextName2"/>
<br>
Text2:
<input name= "textName2" type= "text" id= "textName1"/>
<br>
<input type= "button" Name= "Submit" value= "Text1" Onclick=alert (document.getElementById (' textName2 '). Value)/>
<input type= "button" Name= "Submit2" value= "Text2" Onclick=alert (document.getElementById (' textName1 '). Value)/ >
I tested the above code in IE, enter 1 in the first text box, enter 2 in the second text box, and then click the two buttons below to guess what the result is.
I meant button 1. Returns the value of the first text box, and the button 2 returns the value of the text box.
The result is that all two buttons return the value of the first text box.
When IE executes document.getElementById (elementname), it returns the first name or object with an ID equal to elementname and is not found by ID.
There is no such problem in Firefox, when Firefox executes document.getElementById (elementname), only look for objects with IDs equal to ElementName, or null if they do not exist.
It may be that IE is considering compatibility issues to do so.

Here's the code I used to test:
<ptml> <pead> <title> document.all test </title> <script language= "JavaScript" > Functi on view () {var obj = document.getElementById ("CCC"); alert (Obj.value); obj = document.getElementById ("AAA"); alert (Obj.value); </script> </pead> <body> <form name= "Form1" id= "F1" > <!--<input type= "text" Name= "AAA ">--> <input type=" text "Name=" AAA "id=" CCC "> <input type=" text "Name=" CCC "id=" AAA "> <input typ E= "button" Name= "BBB" value= "click" onclick= "View ();" > </form> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

This time I entered in the two text of the values are: eee, www
The test result in IE is: eee, eee
Again, when I remove the ID from the <input type= "text" Name= "AAA" id= "CCC" > The above code uses the contents of the annotation
I also enter Eee, www
IE test results are: www, eee
A careful analysis of the results of the above two Tests: the conclusion is that every time you perform a getElementById, all the forms in the Web page are traversed sequentially, looking for id,name two values, and if there is an ID to be found, the search will not continue. If there is no corresponding ID corresponding to it, see if the name value corresponds to it, and if the corresponding name corresponds to it, the lookup will no longer continue. Other words:
When IE executes document.getElementById (elementname), it returns the first name or object with ID equal to elementname, not just by ID.
And the same two Tests under Firefox the first result is eee,www, and the second result returns null because the Id= "CCC" was not found
For this result you can also see
Http://www.jb51.net/article/16852.htm
He also analyzed getElementById and Getelementbyname, which is worth a visit.

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.