Question

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

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

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

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

Answer 1

您可以在ID名称前添加元素，但不要这样做 - 请更正格式错误的HTML。

document.querySelectorAll('div#id1')

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

永远不要使用id两次。

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

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

请参阅W3 Docs:

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

Answer 3

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

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

另一方面，如果您在网站上进行的操作无法修改（例如用户脚本）：

当存在重复的querySelector('div#id1')时，

getElementById('id1')或id没有标准行为。所以你可能需要

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

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

3 个答案: