１つのHTML中ではidは一意にする必要がありますが、誤って同名のidを複数定義してしまった場合にどのような動きとなるかをまとめてみました。
サンプルソース
例）id="d1"を３つ定義した場合にgetElementById("d1") する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル１</title> <script> function test(){ var obj = document.getElementById("d1"); obj.innerText = "値をセットしました。"; } </script> </head> <body> <div id="d1">D1</div> <div id="d1">D2</div> <div id="d1">D3</div> <input type="button" id="btn1" value="ボタン" onclick="test()"> </body> </html> |
１つめのdivにのみ値がセットされます。
一番最初に見つかったIDが対象となるようです。
例２）id="btn1"のボタンを３つ定義し、clickイベントをセットする
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル２</title> <script> window.onload=function(){ document.getElementById("btn1").onclick = function(){ alert("ボタンが押されました。"); } } </script> </head> <body> <input type="button" id="btn1" value="ボタン１"> <input type="button" id="btn1" value="ボタン２"> <input type="button" id="btn1" value="ボタン３"> </body> </html> |
１つめのボタンのみclickイベントがセットされます。
２つめ、３つめのボタンにはイベントは何もセットされません。
例３）同じボタンにclickイベントを３回定義する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル３</title> <script> window.onload=function(){ document.getElementById("btn1").onclick = function(){ alert("１番目の定義です。"); } document.getElementById("btn1").onclick = function(){ alert("２番目の定義です。"); } document.getElementById("btn1").onclick = function(){ alert("３番目の定義です。"); } } </script> </head> <body> <input type="button" id="btn1" value="ボタン"> </body> </html> |
- （結果）
- ３番目の定義です。
一番最後のイベントがセットされます。
上書きされて一番最後のものが残る感じですね。
まとめ
- 同名のidを複数定義すると、１つめのものが有効になる感じです。