FlashでHTMLの文字を1文字ずつ操作するために使ったJavaScript側のトリック（「HTMLの暴走」解説 JavaScript編）
先日の「HTMLの暴走(meltdown3)」においてJavaScript側で使った技の解説です。
通常JavaScriptで操作可能なHTMLの対象はタグ付けされた要素です。テキストであればPタグなどなんらかのタグで囲われた一連の文字列が対象になります。にもかかわらず「HTMLの暴走」では1文字ずつ操作しています。
どうやっているのか？
一文字ずつタグで囲ってるんです。実は。
例えば次の様に表示されている部分があったとします。
これを一文字ずつタグで囲った場合の状態を分かりやすく赤枠を付けると次の様になります。
こんな感じで一文字ずつタグ付けし、それぞれのタグの座標を計算して対応しているのです。
実際に使ったタグはSPANなどではなく、KZMというオレオレタグです。一般的なタグはデフォルトスタイルやCSSの影響がありえるため、適当なタグを作って対応しています。
HTML(XHTML)の定義に存在しないタグはクリーンなため非常に扱い安いです。実際、document.createElement()でも自由に適当なタグを作れます。getElementsByTagNameでの取得も可能です。もちろんDTDに存在しなければ文法エラーということになりますが、現実的にブラウザはそんなこと気にしないので動作は問題ありません。（というか定義が無い場合のルールというのがあるのかな？）
今回の解説を書くついでにJavaScriptのソースにコメントを追加しておきました。
- HTMLの暴走 JavaScript側のソースコード
- meltdown3.js
