getElementById()で同じid名が複数ある場合(idの重複)はどうなる?

1つのHTMLドキュメント内にid名は一意になるように指定するのが約束です。

ですが勘違いや間違いで、HTML内にid名重複して存在する場合、

JavaScriptのgetElementById()メソッドを使うと、 どの要素が取得できるのでしょうか?

実験してみましょう。

HTML

次のように同じid名「test」のp要素を3つ用意します。


<p id="test">コンテンツ1</p>

<p id="test">コンテンツ2</p>

<p id="test">コンテンツ3</p>

JavaScript

「id="test"」の要素を取得して、コンソールにテキストを表示してみます。


var elem = document.getElementById('test');

console.log(elem.textContent);  // コンテンツ1

「コンテンツ1」と表示されているように、一番最初の要素が取得されています

Chrome、Firefox、Operaで試した結果、3つとも同じ結果となりました。

このように、id名が重複した場合、多くのブラウザでは最初の要素を取得します。

ですが、ブラウザによっては違う可能性もありますから、 事前にid名が重複していないことを確認することをオススメします。

スポンサードサーチ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする