如何使用 querySelector() 获取具有重复 id 的 div？

Posted 2023-05-09

【中文标题】如何使用 querySelector() 获取具有重复 id 的 div？

【英文标题】：How to get the div that has a duplicated id using querySelector()?

【发布时间】：2015-04-01 05:32:12

【问题描述】：

我有一个<div> 和一个<video>，它们都具有相同的 id：

<div id="id1">
    Some content
</div>
<video id="id1">
    <source></source>
</video>

我无法更改 div 或视频的 ID。 div 由video.js 库自动创建，它为 div 和视频元素提供相同的 id。

如何单独定位 div 元素？ （使用querySelector() 或类似名称）

【问题讨论】：

id 应该是唯一的。

这是格式错误的 html。如果您修复您的 HTML 以使您的 ID 唯一，那么问题就变得微不足道了。

【参考方案1】：

您可以在 id 名称前加上元素，但不要这样做 - 改正您格式错误的 HTML。

document.querySelectorAll('div#id1')

window.onload = function()
  document.querySelectorAll("div#id1")[0].style.backgroundColor='red';
  document.querySelectorAll("video#id1")[0].style.backgroundColor='green';

<div id="id1">
Some content
</div>
<video id="id1">
<source></source>
</video>

【参考方案2】：

永远不要使用 id 两次。

<div id="id1">
  Some content
</div>
<video id="id2">
  <source></source>
</video>

var el = document.querySelector('#id2');

见W3 Docs:

id 属性指定其元素的唯一标识符 (ID)。该值在元素的主子树中的所有 ID 中必须是唯一的，并且必须包含至少一个字符。

【讨论】：

div 是通过 video.js 使用相同的视频 ID 动态创建的。所以video和div都应该有相同的id

只是我个人的看法，但对我来说这听起来像是一个糟糕的图书馆

fwiw video.js 不会重复 ID。你最终会得到<div id="id1" ...><video id="id1_html5_api"...>

【参考方案3】：

ID 应该是唯一的。 ^{specification}

如果 HTML 代码是你的，你应该先解决这个问题。

另一方面，如果您正在做的事情是在您无法修改的网站上（例如用户脚本）：

querySelector('div#id1')，或者，getElementById('id1') 在有重复的ids 时没有标准行为。所以你可能需要

document.querySelector('div[id="id1"]')