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] 日付オブジェクト(Date型)から年月日を取り出す

日付オブジェクト(Date型)から年月日を取り出すサンプルです。 日付オブジェクトから年月日を取り出す 例)Dateオブ ...

[JavaScript] 日付オブジェクト(Date型)を生成する

日付オブジェクトを生成するサンプルです。 日付オブジェクトを生成する 例)Date型を生成するサンプルいろいろ [cra ...

[JavaScript] 配列をソートする(.sort)

配列をソートするには、.sort()を使用します。 サンプル 例)配列をソートする [crayon-5c674efee9 ...

[JavaScript] CSSセレクタ指定で要素を取得する(.querySelector/.querySelectorAll)

CSSセレクタ指定で要素を取得するには、.querySelector()/.querySelectorAll()を使用し ...

[JavaScript] 文字列がYYYYMMDD形式の日付文字列であるかどうかチェックする

文字列がYYYYMMDD形式の日付文字列であるかどうかチェックするサンプルFunctionです。 サンプルソース 例)値 ...

スポンサーリンク