Question

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

第一个元素

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

第二个元素

#editor h1,
#editor div {
  display: inline-block;
}

Answer 1

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

正如您所声明的那样，它应该是唯一的，因此如果您有多个具有相同名称的id属性，那么该HTML属性无效。

如何使用与ID完全相同的ID访问第二个元素首先在JavaScript？

使用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() Method

JavaScript Arrays

Answer 2

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

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

bothElements[1].

Answer 3

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

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

Answer 4

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

查看规格： https://www.w3.org/TR/html5/dom.html#the-id-attribute

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

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

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

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

4 个答案: