JavascriptとHTMLの絡ませ方3

ドキュメントオブジェクトもオブジェクトなんだからね！

先日からのJavascriptとHTMLの絡ませ方ということで第三弾目。
これも別にたいしたことじゃないんですけど、このやり方が便利にもかかわらず、結構気づかずに使ってませんでした。

何かといえば、しょっぱなから生成されているドキュメントオブジェクトも普通newされるオブジェクトもおんなじオブジェクトだということ。なんかgetElementByIdで取得できるものを特別な何かととらえてたみたいで、自分の馬鹿さ加減にちょっと恥ずかしいです

普通は

var mememe = {};
mememe.poyo = function(){ alert("aaaaa"); };
mememe.poyo();

こんな風に書くとmememeに詰まっているオブジェクトにメソッドpoyoが追加されます。これがJavascriptの豪快プログラムの醍醐味ですね

なんてことは無い・・・これを同様に

var bobo = document.getElementById("hoge");
bobo.poyo =  function(){ alert("bbbbb"); };
bobo.poyo();

こうやっちゃいます。おんなじオブジェクトだから出来るんです！豪快！へ？あたりまえっすか

これが出来ると何が便利かと言えば、テーブルのセルみたいに個別に値を処理する必要があるんだけど、呼び出し元ごとに微妙に変えたいとか、セルの内容以外のセル情報に対する付加情報（色の意味やら、フラグとか・・・）と連動させてメソッドを動かしたい場合とかね。それとか単に属性とは別に値をちょこっと保存したいな〜　のような時も使えますね。別の変数に保存しなくても、オブジェクトと一体化してるのでバラバラになりませんし、どんだけ使ってもオブジェクトさえ把握していればあとは管理しなくてもいいってのがいいですよね。

Javascriptは全部オブジェクトなんで例では関数オブジェクトを入れてますけど、普通にオブジェクトをつっこんでもいいわけです
だからこういうあたまがこんがらがりそうな構造にもできます

<div id="hoge" moge="もげ"  ></div>
<div id="hogehoge" moge="もげ"  ></div>

var bobo = document.getElementById("hoge");
var vovo = document.getElementById("hogehoge");	
bobo.poyo =  function(){ alert("bbbbbb"); };
vovo.momo = bobo
vovo.momo.poyo();

こうするとHTMLの表現上の貧弱さや、空間的配置によるマークアップの制約から解放されて、自由にドキュメントオブジェクト同士を関連、連動させることができるようになります。
これはcreateObjectでゼロからドキュメントオブジェクトを作成するときに効果的に使えるような気がするんです。
生成した瞬間にメソッドの付加＋コレクションへの登録を同時に済ませてしまえばあとはオブジェクト（のポインタ？）をJavascript上でやり取りするだけでhtmlにノータッチで動きが実装できますよね。
便利！便利？

参考までに

WebクリエイティブのためのDOM Scripting （Web Designing Books）