Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

HTML中的重复ID问题

  我们通常认为在同一个文档中元素的ID是唯一的,至少从逻辑上它应该是唯一的。传统的网页确实没有ID重复的必要,但现代Web中还有单页面的架构,模块是动态加载的,他们全都在同一个文档中,因此ID重复就很难避免。所以有时候,我们要视ID为非唯一的。
  通过ID获取元素最常用的方法就是getElementById,但这个方法显然是单数的,它永远都只能获取到一个元素,如果页面存在多个ID相同的元素,它只能获取到第一个。使用jQuery的选择器也会遇上同样的问题,因为在处理针对ID的选择器时候jQuery同样使用getElementById。如果需要获取ID为某个值的所有元素,应该使用querySelectorAll,这个方法很明确的返回一个集合,所以它可以包含多个同ID的元素。但是IE7-不支持它,所以如果存在多个ID相同的元素,选择起来就会像根据Class选择一样麻烦。当然,jQuery也可以简化这些操作,虽然上面说直接针对ID选择时只能获取到一个,只要给选择器中加入任何其它东西就可以让jQuery不使用getElementById
  下面是一段测试代码: <div id="a"><div id="x">ax</div></div>
<div id="b"><div id="x">bx</div></div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
var i,j,tests=[
  '$("#a #x")','$("#b #x")','$("#x")','$("*#x")',
  'document.querySelectorAll("#x")'
],output;
for(i=0;i<tests.length;i++)try{
  output=Array.prototype.slice.call(eval(tests[i]),0);
  for(j=0;j<output.length;j++)
    output[j]=output[j].firstChild.data;
  throw output;
}catch(e){
  console.log(tests[i]+" => "+e);
};
</script>


网名:
54.198.108.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^