Pnuts CC's Blog Flower & World, Life & Paradise.

12Dec/095

[IE BUG Coll.] GetElementById returns incorrect objects.

This bug is probably a widely-known bug, but I just found when I studied the source code of JQuery(When I mention "JQuery" I mean JQuery 1.3.2, This is important because the future version may change.). The bug is that: When using getElementById, it may match a DOM whose name attribute contains the given id. It exists in all versions of IE(and some versions of Opera), and I tested it in IE6, IE7, IE8.

There is a simple example.

<!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> getElementById Bug </title>
	</head>
	<body>
		<input name="test" type="text" value="This is a input box." />
		<div id="test">This is a div.</div>
	</body>
	<script type="text/javascript">
	<!--
		document.getElementById("test").style.background="green";
	//-->
	</script>
</html>

And the output is :

getElementById bug in IE

And it may be very covert, such as :

<!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> Covert Bug </title>
		<meta name="author" content="2" />
	</head>
	<body>
		<span id="author">1 + 1 = </span>
	</body>
	<script type="text/javascript">
	<!--
		document.getElementsByTagName("span")[0].content = 3;
		document.write(document.getElementById("author").content);
	//-->
	</script>
</html>

IE Show : "1 + 1 = 2", and Firefox show : "1 + 1 = 3", it seems like IE was correct, but IE is wrong.

There is a solution, overwrite the getElementById method, many articles were written for it, you can google it or writte one all by yourself, but I'll talk about the solution in JQuery.

This is where I found the bug. You see, at the very begin of jquery.js

//[Pnuts]Excrpted from jquery-1.3.2.js @ line 61
var elem = document.getElementById( match[3] ); //[Pnuts]match[3] is the given id.

// Handle the case where IE and Opera return items
// by name instead of ID
if( elem && elem.id != match[3] )
	return jQuery.find( selector ); //[Pnuts] Check whether the bug happened.

Then is the "jQuery.find" method. At 2364 line, you can see :

jQuery.find = Sizzle;

So, what is Sizzle? "A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.", that's what the offical website said, and that's almost all I know about Sizzle, it's imported into JQuery since version 1.3, for details you can go to Sizzle Offical Website

Comments (5) Trackbacks (0)
  1. This post is priceless. How can I find out more?

  2. That is a good tip particularly to those a new comer to the blogosphere.

    Short but very accurate info Thanks for sharing that one.

    A necessity read article!

  3. This is the perfect website for anyone who really wants to understand this
    topic. You understand a whole lot its almost hard to argue with you (not that I actually will
    need toHaHa). You certainly put a brand new spin on a topic that’s been written about for years.
    Great stuff, just wonderful!

  4. I will immediately seize your rss because i can’t in finding your email subscription hyperlink or newsletter service.
    Do you might have any? Kindly let me realize so that I might just subscribe.
    Thanks.

  5. Thanks a lot for sharing this with all people
    you really recognize what you’re speaking approximately!
    Bookmarked. Kindly also seek advice from my website =).
    We could have a link trade arrangement among us


Leave a comment

No trackbacks yet.