JavaScript中如何处理具有相同ID的两个元素

Question

我知道ID应该是唯一的，但我需要处理一个有两个具有完全相同ID的元素的页面，当我尝试通过ID获取元素时，它只选择第一个。在JavaScript中如何访问与第一个完全相同的第二个元素？

第一个元素

<INPUT id=Edit class=Design_01 style="IME-MODE: active" type=submit value=　Edit>

第二个元素

<INPUT id=Edit class=Design_01 style="IME-MODE: active" type=submit value=　Edit>

- Gintoki

---

可以尝试这个：document.querySelectorAll("#Edit")。 - Lukabot

你不能有两个具有相同ID的元素。 - HenryDev

使用类可以节省很多时间。约定俗成的做法是在 HTML 标签中为每个键的值加上引号，这样你就可以给 div 元素添加两个类：在引号中，通过在类名之间添加空格来指定多个类：<input id="Edit" class="Design_01 editClass"> 现在该元素属于两个类，你可以使用 document.getElementsByClassName("editClass")（返回一个数组）。 - GameGibu

@HenryDev，你可以有两个具有相同ID的元素，这不是正确的做法，但你可以这样做。如果你不是创建页面的人，有时你必须面对这个事实。Gintoki，如果你是创建此页面并负责这些重复ID的人，请修复它们。 - Rick Calder

@RickCalder 你是正确的伙计。 - HenryDev

@RickCalder 很不幸，我不是创建这个页面的人，所以我无法修复它，但我会尝试这里提出的解决方案，并检查它们是否有效。 - Gintoki

Answer 1

var bothElements = document.querySelectorAll("[id='Edit']");

然后您可以使用以下方式访问第二个：

bothElements[1].

- Mike

---

记录一下，"#Edit" 也可以使用，而且更加简洁。 - Rick Calder

谢谢您实际上回答了这个问题。 - Kröw

您回答了问题，谢谢！ - Ricardo Machado

你做到了。谢谢，迈克。 - Umar Niazi

Answer 2

我知道ID应该是唯一的，但我必须处理一个有两个具有相同ID的元素的页面。

如您所述，ID应该是唯一的，因此如果您有多个具有相同名称的id属性，则无效的HTML。

如何在JavaScript中访问第二个具有与第一个完全相同ID的元素？使用getElementsByClassName可能更容易，因为具有相同名称的两个id属性是无效的HTML。因此，您可以使用getElementsByClassName。这可能更适合您的需求。

例如：

var x = document.getElementsByClassName("Design_01"); // x is an array
var firstElement = x[0]; // get first element
var secondElement = x[1]; // get second element

相关阅读：

• HTML DOM getElementsByClassName() 方法
• JavaScript 数组

- Ousmane D.

---

实际上你可以，在jQuery中不能通过ID，但是在原生js中可以。 - Rick Calder

“因为你不能使用相同名称的多个id属性？” - 是的，你可以。这是无效的HTML，但浏览器仍然接受它，并且您仍然可以使用除.getElementById()之外的其他方法选择ID。但是，是的，如果这些元素是唯一具有该类的元素，则使用类更好。 - nnnnnn

@nnnnnn，这正是我所说的“那就不是有效的HTML”，不过还是谢谢你，我会更新我的答案。 - Ousmane D.

是的，我并不反对整个答案，只是那个短语。 - nnnnnn

@nnnnnn，无论如何都很好能得到反馈。这也是我加入StackOverflow的主要原因。我还在学习中：）。再次感谢。 - Ousmane D.

Answer 3

您可以使用类选择器选择所有元素，然后指定您想要的那个。

var inputs = document.getElementsByClassName('Design_01');
var requiredInput = inputs[1];

- damask

Answer 4

虽然这些技术可能会起作用，但如果您正在构建一个页面上可能有两个或更多相同id的解决方案，我建议您谨慎使用这些技术，因为这些技术可能不可靠。根据我的经验，无效的HTML几乎肯定会在其他地方引起问题。

请参阅规范： https://www.w3.org/TR/html5/dom.html#the-id-attribute

id属性指定其元素的唯一标识符（ID）。

虽然您可能会在自己的环境中使其正常工作，但不同的浏览器、实现和框架可能会以不同的方式处理它。浏览器更新可能会在没有警告的情况下破坏您的解决方案。

我强烈建议您使用类或解决HTML中的问题。

- cloudworks

---

从问题的措辞来看，很明显OP无法控制此特定页面上的HTML。问题本身已经承认ID应该是唯一的。 - nnnnnn

好的，我相信我们都遇到过无法更改标记的问题。但是我认为值得指出在怪异行为之上构建的一些后果。原帖作者可能也无法控制用户的环境。 - cloudworks

他没有创建该页面，也无法控制HTML。因此，这并不是解决手头问题的真正方法，因此应该作为评论发表。 - Rick Calder

抱歉，伙计们，我没有从“我知道ID应该是唯一的，但是…”这句话中得出他没有写他发布的HTML的结论。在过去，人们经常做一些“但它仍然有效”的事情，但往往会导致后续出现奇怪的问题。 - cloudworks

我理解你的意思，如果这个问题只是出于学术兴趣，那么有几种方法可以获取ID，而字面上的答案就是OP想要的。但是，如果他和未来的搜索者正在寻求构建可靠性的帮助，我认为官方文档应该是答案之一是合理的。 - cloudworks