Javascript 如何使用querySelector（）获取具有重复id的div？

我有一个

和一个

都有相同的id：

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

一些内容

我无法更改div或视频的ID。div是由

video.js

库自动创建的，它为div和video元素提供了相同的id

如何单独针对div元素？（使用

querySelector（）

或类似工具）

切勿两次使用id

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

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

一些内容
var el=document.querySelector（'#id2'）；

看

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

---

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

document.querySelectorAll('div#id1')

window.onload=function（）{
document.queryselectoral（“div#id1”）[0].style.backgroundColor='red'；
document.queryselectoral（“video#id1”）[0].style.backgroundColor='green'；
}

一些内容

Id应该是唯一的

如果HTML代码是您的，您应该首先修复它

另一方面，如果您在无法修改的站点上执行操作（例如，userscript）：

querySelector（'div#id1'）

或

getElementById（'id1'）

在存在重复的

id

s时没有标准行为。所以你可能需要

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

---

id应该是唯一的。这是格式错误的HTML。如果修改HTML使id唯一，那么问题就变得很简单了。div是使用相同的视频id使用video.js动态创建的。因此，视频和div都应该具有相同的id只是我个人的意见，但对我来说，这听起来像是一个糟糕的库fwiw video.js不会复制id。你会得到