JavaScriptライブラリの乱用防止とgetElementByIdメソッドの活用について

ここ最近は便利な時代になったもので、jQuery やprototype.js などの普及でJavaScript の恩恵を簡単に享受できるようになった。
しかし、これらライブラリのファイルサイズは小さいものの、ブラウザから読み込むとメモリとリソースを無駄に使っちゃって動作が遅くなっちゃったりするんだよね。
特に、残念なブラウザで有名な Internet Explorer ではメモリリークが発生してしまい、ライブラリを動かせば動かすほどPC自体の挙動がおかしくなる。
JavaScript はコツさえ掴めば簡単なものなので、小さな要求を満たしたい場合は自分で書いてみるのはどうだろう？

静的なHTMLページの中で一部を動的にしたい場合は document.getElementById("id名") を使えば簡単に対応できる。
例えばある部分の文字を入れ替えたい場合は

JavaScript-----------------------------------------------
document.getElementById("hoge").innerHTML = "かきくけこ";
JavaScript-----------------------------------------------

HTML----------------------------------------------------
<div id="hoge">あいうえお</div>
HTML----------------------------------------------------

ってしておくと、div の id="hoge" で囲まれている文字「あいうえお」が「かきくけこ」に変身する。
また、スタイルシートで指定している背景色を変えたい場合は、

JavaScript-----------------------------------------------
document.getElementById("hoge").style.backgroundColor = "#f00";
JavaScript-----------------------------------------------

HTML----------------------------------------------------
<div id="hoge" style="background-color:#00f;">青から赤に変わる</div>
HTML----------------------------------------------------

で、背景色を青から赤に変えることもできる。
その他、

JavaScript-----------------------------------------------
document.getElementById("hoge").className = "クラス名";
JavaScript-----------------------------------------------

って使い方でブロックが参照しているクラスを動的に変えることも可能。

あとはイベントハンドラと組み合わせて動かすだけ。
いちいちライブラリの使い方を覚えるよりも簡単だと思うよー。