Search code examples
javascriptdomselectors-api

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)

Solution

  • 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>