Javascript html文档中的重复ID。。如果它们的作用域是一个具有唯一ID的div，这有多糟糕？

我有一个网页，其中显示了一个单一的项目出售添加到篮子按钮。该页面使用了大量javascript来允许用户自定义项目。我现在需要修改该页面以在同一页面上显示多个类似项目，每个附加项目也可以由用户以相同的方式自定义。javascript大量使用标记中的id来查找元素并对其进行操作，以提供客户端项目定制

我的第一个想法是允许html标记对每个项目重复，也允许ID重复它们自己，但在每个项目标记周围添加一个具有唯一ID的附加div，以分隔重复ID的范围，使重复ID在包含的div中唯一。这应该允许javascript保持相对不变，但对重复ID的任何引用都需要为特定的div ID确定范围

记住，我希望结果是跨浏览器兼容的，IE6-IE9，Firefox3+，Chrome，Safari，Opera，这种方法听起来有多明智？某些浏览器是否会禁止重复ID，或对其表现不好？任何关于更好的方法或我应该注意的事情的建议都是非常受欢迎的。 谢谢

-----------------附录----------------------------------------------------------------

似乎压倒性的共识是，重复ID是一个非常糟糕的主意，主要是因为标准规定ID应该是唯一的，尽管一些/大多数浏览器现在支持它，但无法保证未来。我完全同意你们的看法

类方法似乎是从所收到的建议中吸取教训的最佳途径，但现在看来旧的浏览器不支持它，特别是IE6和IE7。有什么建议吗

-----------------附录----------------------------------------------------------------

总的来说，getElementsByTagName似乎是最兼容的方式，它也涵盖了很多移动浏览器

---

谢谢你的建议。

不要重复使用id。曾经它会导致非常意外的行为。如果需要重用标记，那么可以使用类

如果您有以下语法

<div id="container1"><span id="a"></span></div>
<div id="container2"><span id="a"></span></div>

然后你可以通过

document.getElementsByClassName('a') 

---

对于这类事情，我通常遍历

childNodes

，或者使用

getElementsByTagName

和检索到的元素

<div id="div_with_id">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>


<script>

    var div = document.getElementById("div_with_id");
    var cNodes = div.getElementsByTagName("div");

    for(var i = 0, l = cNodes.length; i < l; i++) {
        console.log(cNodes[i].innerHTML);
    }

</script>

1.
2.
3.
4.
5.
var div=document.getElementById（“div_with_id”）；
var cNodes=div.getElementsByTagName（“div”）；
对于（变量i=0，l=cNodes.length；i

我只在必要时才使用

getElementById

，事实证明，这并不经常；）

---

请记住：

getElementsByTagName

获取类型的所有元素，包括元素中的元素

childNodes

仅获取顶层，但获取元素中的所有内容，包括文本节点。

DOM不是提供的文本。该ID在DOM中应该是唯一的。如果浏览器允许多个具有相同ID的节点，则不能保证将来会这样做。所以即使它有效，你也不应该利用这个事实。只要做正确的事情，或者使用一个唯一的ID，或者根据需要使用一个类。

从1999年12月24日的HTML 4.01规范开始，如果ID属性具有重复值，则该属性无效

您应该使用类，此处引用了这两个类：

---

这就是它的全部内容。@RustyJeans我之前测试过。“不去旅行了”。@Rich-我已经阅读了数千篇SO帖子，并且看到了很多关于为什么事情不起作用的问题。许多是由重复的id引起的。类是为了处理这个用例而构建的，浏览器开发人员编码他们的页面和方法时期望它们是唯一的，这是W3C兼容页面所必需的，而其他开发人员的期望是它将是唯一的。这是一个我不会背离的惯例。我并不是说“就是这样，就这样做吧。”我真的认为这是一个非常糟糕的主意。@tsherman先生说到标准，

getElementsByClassName

目前是一个相当新的概念。“我不建议再使用一段时间。”杰弗里斯韦尼-谢谢，让我查找兼容性表。他们注意到IE6/7总是返回第一个元素id，不管它在DOM中的位置如何。此外，正如您所指出的，ie6/7没有

GetElementsByCassName

支持。这不是个好习惯。为什么不直接使用类呢？我以前没有使用过使用类的方法。不完全确定它将如何工作，但我会查找它。谢谢你的建议。根本没有“作用域”——元素的“id”值被认为是全局唯一标识符。如果不是，那么你可以相信各种各样的事情会变得奇怪。我用范围界定这个词。我的意思是，你可以找到一个非唯一ID的dom元素，方法是找到它的唯一容器div元素，然后查看子元素。@Pointy我接受你关于事情变得奇怪的观点，尽管很多浏览器支持非唯一ID，有些不正确，并且在尝试调试时会产生无限的挫败感。getElementsByTagName在较旧的浏览器中不受支持（如果这是一个问题）@markschultheis很好。根据mrtsherman发布的链接，它确实比

getElementsByClassName

多一点支持。不过…@Jeffrey Sweeney我想你是对的，只是在谷歌上搜索了一下，发现这个链接似乎比人们想象的支持getElementsByTagName更好。是的，确实很旧，但仍然。。。我对移动浏览器一无所知。@MarkSchultheis和移动浏览器是我需要的东西

<div id="div_with_id">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>


<script>

    var div = document.getElementById("div_with_id");
    var cNodes = div.getElementsByTagName("div");

    for(var i = 0, l = cNodes.length; i < l; i++) {
        console.log(cNodes[i].innerHTML);
    }

</script>