JavaScriptの技法:DOM操作の落とし穴とその回避方法

文:Nick Gibson(Builder AU)  翻訳校正:原井彰弘
2008-01-11 12:00:00
  • このエントリーをはてなブックマークに追加

 JavaScriptは、ウェブアプリケーションの開発で現在もっとも使用されている非常に便利なツールだ。しかし、JavaScriptはブラウザ内でリアルタイムに解釈されて動作するため、Document Object Model(DOM)を扱う際には細心の注意が必要となる。

 DOMは、ウェブページを記録するためにブラウザで用いられているデータ構造だ。DOMはタグで構成されるツリー構造をしており、それぞれのタグにはHTML(またはXML)ドキュメントの形式に対応した複数のタグが子ノードとして含まれている。これらの内容は、JavaScriptを利用すればページが読み込まれた後でも動的に調べて変更することが可能であり、これがAJAXの大きな基盤となっている。

 しかしながら、JavaScriptを用いてDOMの内部を探索するのは手間のかかる作業である。なぜなら、JavaScriptが保持しているすべての参照は動的であり、作業中に内容が変更される可能性もあるからだ。そのため、思いつきのアルゴリズムは多くの場合正しく動作しない。もし、スコープを変更したときに余分なメモリを割り当てて、変数をキャッシュするようなプログラミング言語を使用しており、その振る舞いに慣れてしまっているなら、なおさらそうである。

 短い例を用いてこの問題を分かりやすく説明しよう。ここではJavaScriptを用い、DOMツリーを表現したテキストでページの内容を置換する関数を記述する。さて、ページの内部がどうなるのかを見て欲しい。例としては、以下のようなページを用いる。


Test Title

Test Text

BuilderAU

 まず、ファイルの先頭に