Question

如何通过指定id属性来获取元素集合？我想获取html中具有相同id的所有标签的名称。

我想仅使用getElementById()来获取元素数组。我怎么能这样做？

Answer 1

HTML spec要求ID属性在页面中是唯一的：

此属性为元素指定名称。该名称在文档中必须是唯一的。

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

因此，getElementById()应该只返回一个元素。你不能让它返回多个元素。

有几个相关的函数会返回一个元素数组 - getElementsByName或getElementsByClassName，它们可能更适合您的要求，但getElementsByClassName是HTML 5的新功能，现在还在选秀中。

Answer 2

为什么你想要这样做是超出我的，因为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定义为readwrite，但如果遇到多个具有相同id的元素，验证浏览器会抱怨。

编辑：鉴于有效文件，可以实现同样的效果：

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

Answer 3

我知道这是一个老问题，并且具有多个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.

Answer 4

具有相同id的多个元素是违法的。 id用作个人标识符。对于元素组，请改用class和getElementsByClassName。

Answer 5

document.querySelectorAll("#yourId");会返回ID为yourId

的所有元素

Answer 6

id应该是唯一的，使用属性“name”和“getelementsbyname”代替，你将拥有你的数组。

Answer 7

Class足以引用您想要的任何内容，因为它可以使用更多单词之一进行命名：

<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处理这些事情，但这是一种不好的做法，倾向于肮脏的编程实践。

Answer 8

正如其他人所说，你的HTML中不应该多次使用相同的ID，但是......带有ID的元素会附加到文档对象和窗口在Internet Explorer上。请参阅：

Do DOM tree elements with ids become global variables?

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

Answer 9

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

原因是ID在页面上是唯一的。即，页面上的ID不能超过1个元素。

Answer 10

您可以使用 document.document.querySelectorAll（“＃divId”）

Answer 11

这是我的解决方案：

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

或者你可以使用 for 循环。

Answer 12

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

Answer 13

如果您正在使用d3处理具有相同类/ ID的多个对象

您可以使用d3.selectAll（＆＃34; .classname＆＃34;）删除类元素的子集;

例如，http://medcorp.co.nz上的圆环图使用了具有类名＆＃34; arc＆＃34;的弧形对象的副本。并且有一行d3，d3.selectAll（＆＃34; .arc＆＃34;）。remove（）;删除所有这些对象;

使用document.getElementById（＆＃34; arc＆＃34;）。remove（）;只删除一个元素，并且必须多次调用（与上面的建议一样，他创建一个循环来删除对象n次）

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

13 个答案: