html和javascript中是否允许多个ID？答案

【问题标题】：Is multiple ids allowed in html and javascript?html和javascript中是否允许多个ID？
【发布时间】：2020-07-17 00:55:37
【问题描述】：

我在网上读到过这个 -

“id”在页面中是唯一的，最多只能应用于一个元素

但如果我在 CSS 中使用选择器，它适用于每个元素。

index.html

<button id="button1">Button 1</button>
<button id="button1">Button 2</button>
<button id="button1">Button 3</button>
<button id="button1">Button 4</button>

style.css

#button1{
  color: red;
}

输出：

但是js只绑定第一个。

script.js

$('#button1').click((value) => {
  console.log("clicked");
});

谁能解释一下，为什么会这样？它是如何工作的？

【问题讨论】：

仅仅因为它看起来有效并不意味着它是正确的。 ID 必须是唯一的。问题结束。
正是您找到的原因。尽管 CSS 有效，但 JS 却不行……这就是为什么 ID 只能使用一次。
嗯，你可以使用document.querySelectorAll("#button1") 或$("[id=button1]")，但这没有多大意义。
@ThiagoBarcala 这是在询问单个元素是否可以具有多个 id，而不是多个元素是否可以具有相同的 id。
不@ThiagoBarcala，就我而言，我有不同的元素具有相同的ID。

标签： javascript html jquery css

【解决方案1】：

计算机语言的简短回答是：不。 html 和 javascript 中不允许有多个 ID。

对人类语言的详细解释是：“允许”是指您的软件（VS Code、Dreamweaver、记事本等）允许您键入它。如果您随心所欲地使用 ID，您的代码最终会中断。

我的一位老师曾经这样说：ID 就像汉兰达一样：只能有一个。

HTML

ID 类型的属性之所以特别，是因为没有两个这样的属性可以具有相同的值；无论文档语言如何， ID 属性可用于唯一标识其元素。

来源：https://www.w3.org/TR/CSS21/selector.html#id-selectors

JAVASCRIPT

id 属性在文档中必须是唯一的。

来源：https://www.w3schools.com/jquery/sel_id.asp

【讨论】：

谢谢！塞缪尔·马丁

【解决方案2】：

在做一些研究后回答我自己的问题。

https://www.w3.org/TR/CSS21/selector.html%23id-selectors#id-selectors

上述文档明确提到-

如果一个元素具有多个 ID 属性，则必须对所有这些属性进行处理作为用于 ID 选择器的该元素的 ID。

这意味着 CSS 将一视同仁。

但是，JavaScript 的 Document.getElementById() 处理它的方式不同。

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

上述文档明确提到-

函数返回一个描述 DOM 元素对象的 Element 对象匹配指定的 ID，如果没有找到匹配的元素，则返回 null 文件。

这意味着只会返回一个元素。

结论-“id”在页面上应该是唯一的。但是，浏览器允许它，因为 HTML 不是一种严格的语言。

【讨论】：

实际上，来自 CSS 2.1 的引述是关于具有多个 ID 属性的单个元素 - 这可能发生在 XML 中，但不会发生在 HTML 中。而不是关于具有相同 ID 值的多个元素。为此，我们必须查看Selectors Level 4 spec，其中说“ID 选择器表示一个元素实例，其标识符与 ID 选择器中的标识符匹配。（在不合格的文档中可能多个元素以匹配单个 ID 选择器。)".
您还应该注意，在 HTML 中还有其他几种 ID 用途。它们都只解析为树顺序中与 ID 值匹配的第一个元素。选择器是唯一的例外。
哦，谢谢，@Alohci。这是一些很好的信息。
此外，并非所有浏览器都会以相同的方式处理此错误。不同的浏览器有不同的错误处理！就像我说的elsewhere：例如css #one:target {...} 有多个ID "one"。一些浏览器只会将样式分配给具有 ID 的第一个元素，而其他浏览器会将样式分配给所有元素。诸如此类。
好的，所以每个浏览器都有自己的 CSS 编译器。对吗？

【解决方案3】：

每个元素的 ID 都是唯一的，并且不能在多个元素上使用相同的 ID。如果您真的想使用单个代码块对不同元素进行操作，请尝试使用类

<button class="button"></button>
<button class="button"></button>
<button class="button"></button>

在css中：

.button {
//css goes here
}

在 javascript(jquery) 中：

$('.button').onclick = ......

【讨论】：