getElementById()で同じid名が複数ある場合（idの重複）はどうなる？
１つのHTMLドキュメント内にid名は一意になるように指定するのが約束です。
ですが勘違いや間違いで、
HTML内にid名が重複して存在する場合、
JavaScriptのgetElementById()メソッドを使うと、
どの要素が取得できるのでしょうか？
実験してみましょう。
HTML
次のように同じid名「test」のp要素を３つ用意します。
<p id="test">コンテンツ1</p>
<p id="test">コンテンツ2</p>
<p id="test">コンテンツ3</p>
JavaScript
「id="test"」の要素を取得して、コンソールにテキストを表示してみます。
let elem = document.getElementById('test');
console.log(elem.textContent); // コンテンツ1
「コンテンツ1」と表示されているように、一番最初の要素が取得されています。
Chrome、Firefox、Operaで試した結果、３つとも同じ結果となりました。
このように、id名が重複した場合、多くのブラウザでは最初の要素を取得します。
ですが、ブラウザによっては違う可能性もありますから、 事前にid名が重複していないことを確認することをオススメします。