JavaScript

[JavaScript] 複数の同名idを定義した場合の動き

投稿日:

1つのHTML中ではidは一意にする必要がありますが、誤って同名のidを複数定義してしまった場合にどのような動きとなるかをまとめてみました。

サンプルソース

例)id="d1"を3つ定義した場合にgetElementById("d1") する

1つめのdivにのみ値がセットされます。
一番最初に見つかったIDが対象となるようです。

例2)id="btn1"のボタンを3つ定義し、clickイベントをセットする

1つめのボタンのみclickイベントがセットされます。
2つめ、3つめのボタンにはイベントは何もセットされません。

例3)同じボタンにclickイベントを3回定義する

(結果)
3番目の定義です。

一番最後のイベントがセットされます。
上書きされて一番最後のものが残る感じですね。

まとめ

  • 同名のidを複数定義すると、1つめのものが有効になる感じです。

スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[JavaScript] ime-modeが使えるか判定する

ime-modeが使えるかどうか判定するサンプルです。 サンプルソース 例)ime-modeが使えるかどうかを判定して表 ...

[JavaScript] フォーカスが当たっている要素オブジェクトを取得する(.activeElement)

フォーカスが当たっている要素オブジェクトを取得するには、.activeElementを使用します。 サンプルソース 例) ...

[JavaScript] セレクトボックスの選択中のvalue値を取得する

セレクトボックスの選択中のvalue値を取得するサンプルです。 サンプルソース 例)ボタンを押すと、セレクトボックスで選 ...

[JavaScript] 10進数のRGB表記で色を指定する

10進数のRGB表記で色を指定するサンプルです。 サンプルソース 例)要素「id="d1"」の背景色を黄色にする [cr ...

[JavaScript] 文字列に改行を含める

文字列に改行を含めるサンプル2パターンです。 サンプルソース 例1)文字列に改行を含める(バックスラッシュで囲う方法) ...

スポンサーリンク