用于具有相同 ID 的多个元素的 JavaScript 和 getElementById

小开

Id 应该是唯一的，使用属性“ name”和“ getelementsbyname”代替，这样就得到了数组。

小开

使用具有相同 id的多个元素是非法的。id用作单独的标识符。对于元素组，使用 class和 getElementsByClassName代替。

小开

HTML 规范要求 id属性在页面中是唯一的:

在元素树中的所有 ID 中，id 属性值必须是唯一的

如果有多个元素具有相同的 ID，则 HTML 无效。

因此，document.getElementById应该只返回一个元素，不能让它返回多个元素。

有几个相关的函数将返回一个元素列表: getElementsByName或 getElementsByClassName，它们可能更适合您的需求。

小开

你不应该这样做，即使它是可能的，它是不可靠的，容易引起问题。

原因是 ID 在页面上是唯一的。也就是说，页面上不能有多于一个具有相同 ID 的元素。

小开

我不明白您为什么要这样做，因为 id 在文档中应该是唯一的。然而，浏览器在这方面往往比较宽松，所以如果您真的必须为此目的使用 getElementById，您可以这样做:

function whywouldyoudothis() {
var n = document.getElementById("non-unique-id");
var a = [];
var i;
while(n) {
a.push(n);
n.id = "a-different-id";
n = document.getElementById("non-unique-id");
}


for(i = 0;i < a.length; ++i) {
a[i].id = "non-unique-id";
}
return a;
}

然而，这是愚蠢的，我不会相信它能在所有浏览器上永远工作。虽然 HTMLDOM 规范将 id 定义为 readwrite，但是如果遇到多个具有相同 id 的元素，验证浏览器将会报警。

编辑: 给定一个有效的文件，可以达到同样的效果，因此:

function getElementsById(id) {
return [document.getElementById(id)];
}

小开

我们可以使用 document.forms [0]

小开

如果使用 d3处理具有相同类/id 的多个对象

可以使用 d3.selectAll (“ . classname”)删除类元素的子集;

例如，http://medcorp.co.nz上的甜甜圈图利用了一个弧形对象的副本，该对象的类名为“ Arc”，并且只有一行 d3，d3.selectAll (”)。).移除() ; 移除所有这些物体;

使用 document.getElementById (“ Arc”)。Delete () ; 只移除一个元素，并且必须调用多次(与上面的建议一样，他创建了一个循环来移除对象 n 次)

小开

类对于引用所需的任何内容都是足够的，因为它可以使用更多中的一个单词来命名:

<input class="special use">
<input class="normal use">
<input class="no use">
<input class="special treatment">
<input class="normal treatment">
<input class="no special treatment">
<input class="use treatment">

这就是你可以用 css 应用不同样式的方法(Bootstrap 就是最好的例子) ，当然你也可以调用

document.getElementsByClassName("special");
document.getElementsByClassName("use");
document.getElementsByClassName("treatment");
document.getElementsByClassName("no");
document.getElementsByClassName("normal");

以此类推，以满足任何分组的需要。

现在，在最后一种情况下，您确实需要按 id 对元素进行分组。您可以使用数值相似但不相等的 id 来使用和引用元素:

<input id=1>
<input id="+1">
<input id="-1">
<input id="1 ">
<input id=" 1">
<input id="0x1">
<input id="1.">
<input id="1.0">
<input id="01.0">
<input id="001">

通过这种方式，只需添加额外的非无效数字字符并调用函数(通过解析等方法)从其合法字符串标识值中获取原始索引，就可以知道数字 id，从而访问和获取元素。当你:

有几行具有相似元素并希望处理其事件无论是删除一个还是 几乎全部。由于数值引用仍然存在，因此可以重用它们，并且重新分配已删除的格式
用完了类、名称和标签名标识符。

尽管您可以使用空格和其他常见符号，即使它不是浏览器中严格验证的需求，但不推荐使用它们，特别是如果您要以其他格式(如 JSON)发送数据时。您甚至可以使用 PHP 来处理这些事情，但是这是一种倾向于肮脏编程实践的糟糕实践。

小开

正如其他人所说，你不应该在你的 HTML 中多次使用相同的标识，然而... 带有标识的元素被附加到文件对象和 Internet Explorer 上的窗户。请参阅:

带 id 的 DOM 树元素是否成为全局变量？

如果 HTML 中存在多个具有相同 ID 的元素，则此属性将作为数组附加。我很抱歉，但我不知道在哪里可以看到这是否是标准的行为，或者至少在不同浏览器之间可以得到相同的行为，我对此表示怀疑。

小开

我知道这是一个老问题，而且具有多个相同 ID 的 HTML 页面是无效的。然而，当我需要刮取和重新格式化包含重复 ID (无效 HTML)的其他人的 API 的 HTML 文档时，我遇到了这个问题。

因此，对于其他人，下面是我使用所有解决这个问题的代码:

var elms = document.querySelectorAll("[id='duplicateID']");
 

for(var i = 0; i < elms.length; i++)
elms[i].style.display='none'; // <-- whatever you need to do here.

小开

document.querySelectorAll("#yourId");返回 id 为 yourId的所有元素

小开

你可以利用 QuerySelectorAll (“ # divId”)

小开

这是我的解决办法:

<script type="text/javascript">
$(document).ready(function () {
document.getElementsByName("mail")[0].value = "ex_mail1";
document.getElementsByName("mail")[1].value = "ex_mail2";
});
</script>

或者可以使用 for-loop。