[Javascript] ID属性が変数名になる?!

体のストレッチは毎日行わないと、すぐに体が硬くなってしまうことを、痛感している、ユゲタです。 体が固くなると、どんな運動をしても、動きが鈍くなる感じがイヤなので、一生懸命毎日ストレッチしたいと思います。 ところで、この間javascriptのコードが書かれているwebサイトを見ていたら、入力フォームの指定で以下のように書かれていました。 <form name="form" id="form"> <input type="text" name="text" value="aaa"> </form> <script> alert(form.text.value); </script> 非常に簡易に書かれていたんですが、javascriptはhtmlタグのid属性をグローバル変数として扱っているんですね。 そういや、javascript覚えたてぐらいの時に、そんな事を覚えていたような気がするんですが、危険な書き方かと思って使わないようにしていたことを思い出しました。 javascriptには、こうした他の言語には無い、独自ルールがたくさんあるので、初心者の人は簡易に書かれているプログラムに困惑することが多いかもしれませんね。

javascriptの独自ルール

ID属性がグローバル変数名になるのはどうしてなのかを考えてみると、HTMLタグ属性のルールでID属性は、ページ内でユニークでなければいけないという、絶対ルールがあるので、ページが読み込まれたデフォルト状態では、idをグローバル変数に格納されているんですね。 では、id属性が切り替わったらどうなるんでしょう？ <form name="form_1" id="form_1"> <input type="text" name="text" value="aaa"> </form> <div id="test_1"></div> <div id="test_2"></div> <script> // ID属性を変更 form_1.id = "form_2"; // 結果表示 test_1.textContent = form_1.text.value; test_2.textContent = form_2.text.value; </script> 上記を実行すると、test_1、test_2のどちらにも、"aaa"という値が入ります。 form_1はID属性が変更されても、残ってしまうんですね。 これは、動的ページなどを作っていると、トラブルになる可能性がありますね。 あと、よく考えると、id属性がグローバル変数名になるということは、システムの予約語のような扱いで考えたほうがいいかもしれませんね。 同じ名前の変数を作った時にコンフリクトを起こすことは必須です。 なので、HTML設計をする時に、ID属性やname属性は、こうした事象を知って行わなければ、いけないということがよくわかりました。 めんどくさくてもgetElementByIdを使うほうが、個人的には安心できますね。 あ、でもスピードは、グローバル変数の方が早そうなので、確実な場合と使い分けるのも効率化に繋がります。  

【重要！】注意事項

よくよく調べてみたら、この機能はFirefoxブラウザでは動作しないようです。 標準化になるかどうかが、議論されているようですが、今のところは使わないほうがいいでしょうね。 仮に標準化されたとしても、ブラウザの下位バージョンで不具合が発生することを考えると、 確実に不具合の起きない仕組みを採用した方が賢明でしょう。