在html文档中重复的ID ..如果它们由具有唯一ID的div确定范围,那么它有多糟糕？

Question

我有一个网页,显示一个单独的待售商品,添加到购物篮按钮.该页面使用了大量的javascript来允许用户自定义项目.我现在需要修改页面以在同一页面上显示多个类似项目,每个附加项目也可以由用户以相同的方式自定义.javascript在标记中大量使用id来查找元素并操纵它们以提供客户端项目自定义.

我的第一个想法是允许html标记重复每个项目,也允许ID重复自己,但在每个项目标记周围添加一个带有唯一ID的额外div,以分隔重复ID的范围,使重复ID在包含div.这应该允许javascript保持相对相同,除了对重复ID的任何引用都需要针对特定​​DIV ID进行范围限定

请记住,我希望结果是跨浏览器兼容,IE6-IE9,Firefox 3 +,Chrome,Safari,Opera,这种方法听起来有多明智？某些浏览器是否会禁止重复ID或与它们表现不佳？关于更好的方法或我应该注意的事情的任何建议都会受到欢迎.谢谢

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

似乎压倒性的共识是,重复ID是一个非常糟糕的主意,主要是因为标准说id应该是唯一的,尽管现在有些/大多数浏览器支持它,但是对于未来并不能保证.我完全同意你的意见.

类方法似乎是从收到的建议中获取的最佳途径,但现在它看起来像旧的浏览器不支持它,特别是IE6和7.任何关于前进方式的建议？

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

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

谢谢你的所有建议.

Answer 1

不要重复使用id.永远.它会导致非常意外的行为.如果您需要重用标记,那么请改用类.

如果您具有以下语法

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

你期望document.getElementById('a')做什么？

而是使用:

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

然后你可以通过它访问它们.

document.getElementsByClassName('a') 

Answer 2

对于这类事情，我通常会迭代或与检索到的元素一起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>

我getElementById只在必要时使用，但事实证明，这种情况并不常见;)

请记住：getElementsByTagName获取某个类型的所有元素，包括元素内的元素。childNodes仅获取顶层，但获取元素中的所有内容，包括文本节点。