as the core selector of Dom, There is a bug in IE6, which is so embarrassing. This bug will return the first element whose ID or name is equal to the input ID.
<Br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <title> ie getelementbyid bug by situ zhengmei </title> <br/> <SCRIPT type = "text/JavaScript"> <br/> window. onload = function () {<br/> var bn = document. getelementbyid ("button"); <br/> bn. onclick = function () {<br/> var target = document. getelementbyid ("target"); <br/> alert (target. innerhtml ); <br/>}< br/> </SCRIPT> <br/> </pead> <br/> <body> <br/> <a name = "target" href = "http://www.cnblogs.com/rubylouvre/"> This is the wrong element </a> <br/> <p id = "target"> This is the correct element </P> <br /> <button id = "button" type = "button"> Start test </button> <br/> </body> <br/> </ptml> <br/>
RunCode
Therefore, we obtain the element and determine whether it is obtained by name or by ID. The method is very simple. check whether this element is displayed as an id value and whether the id value is equal to the ID we passed in. If not, use document. All ["XXX"] to return all elements with IDs or names equal to XXX on the page, and compare them one by one to determine whether their IDs are equal to our input IDs.
VaR getelementbyid = function (ID) {var El = Document. getelementbyid (ID); If (! + "\ V1") {If (El & el. id = ID) {return El} else {var els = document. all [ID], n = els. length; For (VAR I = 0; I <n; I ++) {If (ELS [I]. id === ID) {return els [I] }}} return El ;}
The method is perfect, but this method was used in IE6 and IE7, And we encountered another bug. IE's bug is always official. The id value of the form element cannot be "ID ". In addition, if the value is directly in the. ID method, no correct value can be obtained in IE or standard browser, but the tostring () of the element itself is returned ().
<Br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 7"> <br/> <title> getattribute () of IE6 IE7 () bug by situ zhengmei </title> <br/> <SCRIPT type = "text/JavaScript"> <br/> </SCRIPT> <br/> </pead> <br /> <body> <br/> <p> you can use IE8's IE7 compatibility mode to simulate this effect, set meta http-equiv = "X-UA-compatible" content = "Ie = 7" </P> <br/> <Form ID = "myform1"> <br/> <input id = "user_id" name = "user_id" value = "text"/> <br/> </form> <br/> <Form ID = "myform2"> <br/> <input id = "ID" name = "ID" value = "text"/> <br/> </form> <br/> <SCRIPT type = "Text /JavaScript "> <br/> var formelement1 = document. getelementbyid ('myform1'); <br/> var formelement2 = document. getelementbyid ('myform2'); <br/> alert (formelement1.getattribute ('id'); <br/> alert (formelement2.getattribute ('id ')); <br/> alert (formelement1.id); <br/> alert (formelement2.id) <br/> </SCRIPT> <br/> </body> <br/> </ptml> <br/>
Run code
In the standard browser, it will pop up: myform1, myform2, myform1, [object htmlinputelement].
In IE7 compatibility mode of IE8, myform1, [object htmlinputelement], myform1, and [object htmlinputelement] are displayed.
In IE6, myform1, object, myform2, and object are displayed.
It seems that. neither ID nor getattribute ("ID") is safe. We can also use attributes ["ID"] And getattributenode ("ID"). Both return a node, we can call its value to obtain the id value correctly.
VaR getelementbyid = function (ID) {var El = Document. getelementbyid (ID); If (! + "\ V1") {If (El & el. attributes ['id']. value = ID) {return El} else {var els = document. all [ID], n = els. length; For (VAR I = 0; I <n; I ++) {If (ELS [I]. attributes ['id']. value === ID) {return els [I] }}} return El ;}
okay. Let's test the modified version of getelementbyid.
<Br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <title> modified version of getelementbyid by situ zhengmei </title> <br/> <SCRIPT type = "text/JavaScript"> <br/> var getelementbyid = Function (ID) {<br/> var El = document. getelementbyid (ID); <br/> If (! + "\ V1") {<br/> If (El & el. attributes ['id']. value = ID) {<br/> return El <br/>} else {<br/> var els = document. all [ID], n = els. length; <br/> for (VAR I = 0; I <n; I ++) {<br/> If (ELS [I]. attributes ['id']. value = ID) {<br/> return els [I] <br/>}< br/> return El; <br/>}</P> <p> window. onload = function () {<br/> var bn = getelementbyid ("button"); <br/> bn. onclick = function () {<br/> var target = getelementbyid ("target"); <br/> alert (target. innerhtml ); <br/>}< br/> </SCRIPT> <br/> </pead> <br/> <body> <br/> <a name = "target" href = "http://www.cnblogs.com/rubylouvre/"> This is the wrong element </a> <br/> <p id = "target"> This is the correct element </P> <br /> <button id = "button" type = "button"> Start test </button> <br/> </body> <br/> </ptml> <br/>
Run code
PS: Finally, I would like to mention another important native search API. getelementsbyname, IE6 and opera7.5 have more bugs in this method. First, they will return the elements whose ID is equal to the given value, second, they only return the input and IMG elements. Since I basically don't need it, the correction method should be handed over to those who are interested in it.
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
