如何通过指定元素的id 属性来获取元素集合？我想在 html 中获取所有具有相同 id 的标签的名称。
我只想使用getElementById() 来获取元素数组。我该怎么做？
【问题讨论】：
标签： javascript
HTML spec 要求 id 属性在页面中是唯一的：
[T]id 属性值在元素树中的所有 ID 中必须是唯一的
如果您有多个具有相同 ID 的元素，则您的 HTML 无效。
所以，document.getElementById 应该只返回一个元素。你不能让它返回多个元素。
有几个相关函数将返回元素列表：getElementsByName 或 getElementsByClassName，它们可能更适合您的要求。
【讨论】：
class 在语义上比name 更好，这里没有正确使用。我相信 name 仅适用于 form 元素。此外，name 的真正目的是在将查询属性名称发送到服务器时为其命名。唯一应该在多个元素上使用它们的时候是对单选按钮进行分组。
getElementsByName 或 getElementsByClassName 是否是合适的解决方案。我在两者上都添加了一些细节。
我知道这是一个老问题，具有多个 ID 的 HTML 页面是无效的。但是，我在需要抓取并重新格式化包含重复 ID（无效 HTML）的其他人的 API 的 HTML 文档时遇到了这个问题。
所以对于其他人来说，这里是我使用querySelectorAll 解决这个问题的代码：
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("#duplicateID") 似乎也可以正常工作。
$('[id^=duplicateID]').hide(); 可以取代一切
您为什么要这样做超出了我的范围，因为 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;
}
但是，这很愚蠢，我不相信它会永远适用于所有浏览器。尽管 HTML DOM 规范将 id 定义为可读写，但验证浏览器在遇到多个具有相同 id 的元素时会报错。
编辑：给定一个有效的文件，可以达到同样的效果：
function getElementsById(id) {
return [document.getElementById(id)];
}
【讨论】：
document.getElementById 定义一个包装函数？这完全没用（除了使用更短的别名，如 $ 来实现同样的效果）。
document.getElementById 只返回一个元素（不在数组中），我的函数 getElementsById 返回一个数组，其中包含有效文档中具有给定 id 的所有元素。
document.querySelectorAll("#yourId");返回所有id为yourId的元素
【讨论】：
多个元素具有相同的id 是非法的。 id 用作个人标识符。对于元素组，请改用class 和getElementsByClassName。
【讨论】：
The class attribute has several roles in HTML: 1-As a style sheet selector. 2-For general purpose processing by user agents.。使用class 进行识别是一种完全有效的方法——这就是它的目的！
name 是否是一个有效属性并不是一个意见问题：它根本不是，所以 Noon Silk 似乎是在否认。
id 应该是唯一的，使用属性“name”和“getelementsbyname”代替，你将拥有你的数组。
【讨论】：
正如其他人所说，您不应在 HTML 中多次使用相同的 ID，但是...具有 ID 的元素附加到 document 对象和 window 在 Internet Explorer 上。参考：
Do DOM tree elements with ids become global variables?
如果您的 HTML 中存在多个具有相同 ID 的元素，则此属性将作为数组附加。抱歉，如果这是标准行为，或者至少您在浏览器之间得到相同的行为，我不知道去哪里看，我对此表示怀疑。
【讨论】：
类对于引用任何你想要的东西来说已经绰绰有余了，因为它可以用 more 词之一命名：
<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 来处理此类事情，但这是一种倾向于肮脏编程实践的坏习惯。
【讨论】：
您不应该这样做，即使它可能不可靠并且容易引起问题。
原因是 ID 在页面上是唯一的。即你不能在页面上拥有超过 1 个具有相同 ID 的元素。
【讨论】：
这是我的解决方案：
<script type="text/javascript">
$(document).ready(function () {
document.getElementsByName("mail")[0].value = "ex_mail1";
document.getElementsByName("mail")[1].value = "ex_mail2";
});
</script>
或者你可以使用for循环。
【讨论】：
id 属性来获取元素集合？”
你可以使用 document.document.querySelectorAll("#divId")
【讨论】：
我们可以使用 document.forms[0].Controlid
【讨论】：
document.forms[0].Controlid 存在，那么它仍然只是一个元素。这如何帮助获取具有相同 ID 的多个元素？
如果您使用 d3 处理具有相同类/id 的多个对象
您可以使用 d3.selectAll(".classname"); 删除类元素的子集
例如，http://medcorp.co.nz 上的圆环图利用了类名为“arc”的弧对象的副本，并且只有一行 d3, d3.selectAll(".arc").remove();删除所有这些对象；
使用 document.getElementById("arc").remove();只删除一个元素，并且必须多次调用（就像上面的建议一样，他创建了一个循环来删除对象 n 次）
【讨论】：