转:getElementById引起的jQuery的选择器bug

最近在开发时，偶然又发现jQuery一个bug：

 

SCRIPT5007: 无法获取属性“0”的值: 对象为 null 或未定义 

jquery-1.8.1.js, 行4978 字符4

context = Expr.find["ID"]( token.captures[0].replace( rbackslash, "" ), context, xml )[0];

 

只要执行类似$("#test span")这样的，id选择符后还有选择符的代码在IE7下就会报错。

 

跟踪调试发现，问题出在这里：

function( id, context, xml ) {

    if ( typeof context.getElementById !== strundefined && !xml ) {

var m = context.getElementById( id );

return m ?m.id === id || typeof m.getAttributeNode !== strundefined && m.getAttributeNode("id").value === id ?

        [m] :undefined :[];

    }

}

当执行Expr.find["ID"]( token.captures[0].replace( rbackslash, "" ), context, xml )时，返回的是undefined，undefined[0]自然就错了，那么为什么呢？

 

第一次看这个函数觉得有点奇怪，因为，印象中getElementById只会返回第一个匹配id的元素，为何还要检查Attribute呢？

原来，在IE7下getElementById("test")会返回第一个id或者name为test的元素，例如：

<input name="test"/>

<div id="test">

<span></span>

</div>

getElementById("test")返回的是input。

 

实际上，这个问题并不只有IE7有，经过测试发现chrome 、FF、opera、safari返回的是div，而IE6、IE7、IE7-9+文档模式为Quirks模式返回的是input

 

这个问题可以这么解决：

    1.修改jQuery代码，将上述函数中返回的undefined改为[]即可，不过，一般不推荐修改jQ的源代码，一方面，修改没有经过严格的测试，有隐患，另外，升级时会比较困难。

    2.修改选择器使用方法，比如$("#test span")改为$("#test").find("span")。