如何通过指定元素的id属性来获取元素的集合？我想获取id在 html 中具有相同标签的所有标签的名称。
我想使用 ONLYgetElementById()来获取元素数组。我怎样才能做到这一点？
具有相同 ID 的多个元素的 JavaScript 和 getElementById
IT技术
javascript
2021-01-26 14:41:22
6个回答
在HTML规范要求的id属性是在一个页面独特之处：
[T] id 属性值在元素树中的所有 ID 中必须是唯一的
如果您有多个具有相同 ID 的元素，则您的 HTML 无效。
所以，document.getElementById应该只返回一个元素。你不能让它返回多个元素。
有几个相关的函数将返回元素列表：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.
为什么要这样做超出了我的理解，因为 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)];
}
document.querySelectorAll("#yourId"); 返回所有 id 为的元素 yourId
多个元素具有相同的id. 将id被用作一个单独的标识符。对于元素组，请使用class, 和getElementsByClassName代替。