How to get the div that has a duplicated id using querySelector()?

问题

I have a <div> and a <video> that both have the same id:

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

It is not possible for me to change the IDs of the div or the video. The div is created automatically by the video.js library, which gives both the div and the video elements the same id.

How do I target the div element alone? (Using querySelector() or similar)

回答1:

You can prefix the id name with the element, but don't do this - correct your badly formed HTML instead.

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:

Never use an id twice.

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

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

See W3 Docs:

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character.

回答3:

Id should be unique. ^{specification}

If the HTML code is yours, you should fix this first.

On the other hand, if what you are doing is on a site you cannot modify (e.g. userscript):

querySelector('div#id1'), or, getElementById('id1') have no stander behavior when there are duplicate ids. So you may need

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

来源：https://stackoverflow.com/questions/28274887/how-to-get-the-div-that-has-a-duplicated-id-using-queryselector

标签

javascript

dom

selectors-api