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] 文字のASCIIコードを取得する

文字のASCIIコードを取得するには、charCodeAtを使用します。 サンプルソース charCodeAtの引数には ...

[JavaScript] 関数から複数値を返す

通常JavaScriptの関数の戻り値は1つですが、 以下のようにすれば複数値返すこともできます。 方法1)配列で返す ...

[JavaScript] 数値が非数かどうかチェックを行う(isNaN)

数値が非数(NaN値)かどうかチェックをするには、isNaN()関数を使用します。 サンプル 例)isNaN関数の結果例 ...

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

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

[JavaScript] 指定した位置の文字を取得する(charAt)

文字列の指定した位置の文字を取得するには、charAtを使用します。 サンプルソース 例)charAtサンプル(半角文字 ...

スポンサーリンク