getElementById引起的jQuery的选择器bug

本文深入分析了一个jQuery在IE7下遇到的bug,即在使用ID选择符后附加其他选择符时出现的错误。通过追踪调试,揭示了问题源自getElementById函数的意外行为,在不同浏览器环境下返回元素的方式存在差异,最终提出了解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在开发时,偶然又发现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")。





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值