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] タグ名からオブジェクトを取得する

タグ名からオブジェクトを取得するには、 document.getElementsByTagNameを使用します。 サンプ ...

[JavaScript] 4~12,1~3 ⇔ 1~12 を相互に変換するサンプル

4~12,1~3 ⇔ 1~12 を相互に変換するサンプルです。 サンプルソース 例)4~12,1~3 ⇒ 1~12に変換 ...

[JavaScript] 半角(ASCII)文字チェックを行う

半角文字チェックを行うサンプルFunctionです。 サンプルソース 例)値が半角英数記号の場合はtrueを返す(空文字 ...

[JavaScript] 通信プロトコル(http/https等)を判定する

使われている通信プロトコルを判定するサンプルです。 サンプルソース 例)使われている通信プロトコルを判定する [cray ...

[JavaScript] 2つの日付の差を日数で求める

2つの日付の差を日数で求めるサンプルです。 サンプル 例)2016年1月1日~2016年6月30日の日数を求める [cr ...

スポンサーリンク