JSで時短
何かと時間のかかるjavascriptでのアプリ開発で時間短縮をはかる為に、Tipsを提供していきます。
document.getElementById()を書かない
JSで開発する際、
var elem = document.getElementById('id');
というように書いていくことになると思います。
１回や２回ならいいですが、5回以上document.getElementById()と書くのは面倒だし、キャメルケースだからうち間違えそうだし・・・という感じではないでしょうか？
実はdocument.getElementByIdを一度も書かなくていもいい方法があるんです！
Demo
何はともあれデモを
デモ
びっくりしました？笑
javascript内で
divElement.hidden = true;
というように、書いていますが、divElementという変数はどこにも宣言していません。
いつもなら、
var divElement = document.getElementById('divElement');
のように書くはずです。
最近気づいたのですが、htmlでid属性を持つタグは、windowの同名のプロパティとして登録されるようです。今回なら、ブラウザがhtmlをロードした後に自動的にwindow.divElementが作成され、そこに対応するElementオブジェクトが登録されているようです。windowは省略できるので、divElementと書くだけでその要素が取得できる訳です。
試しに、
alert(document.getElementById('divElement')===divElement);
とすると、どうなるでしょうか？("===" は型も同じときtrueを返す)
試してみる
試して分かるように、確かにdocument.getElementById('divElement')とdivElementは同じものであるようです。
つまり、idをjsで直接書くことができます！これでLet's時短開発！
使用上の注意
javascriptでは、functionの内部の変数はその関数を抜けると参照されなくなるローカル変数ですが、ただ単に
var hako = 'aa';
のように宣言した場合はwindowオブジェクトにhakoというプロパティ名で登録されます。もしさきに同名のプロパティがある場合はそれが上書きされてしまいます。つまり、今回の場合は、もしjavascript上で
var divElement = 'aa';
と書いてしまうと、上書きされてしまいます。先ほどの例だとデモというようになります。
変数名とid名がかぶらないようにしましょう。かぶる場合は、ちゃんとdocument.getElementById()関数を使うしかないです！
数字は上書きできない
idを数値にした場合は、上のワザが使えません！いや使えたらヤバいです
関数は上書きできない
例えばwindow.alert関数はidで上書きできません。できたらヤバいことになります。でもvar では。。！？こんなことに
この方法は、大規模開発ではお勧めしません。
しかし、決まった時間で開発する必要がある時などは時間短縮に効果があります。使用上の注意を良く読んで使ってください！