[ajax] DOMコードジェネレータ

解説

HTMLを入力すると、JavaScriptのDOMコードを出力するツールです。

意図

これでもうcreateElement, createTextNode, setAttribute, appendChildなどと格闘しないでいいかも。

また、「テンプレートエンジンなんて大げさな仕組みがなくても、デザイナとエンジニアの分業ができますよ」という提案でもあります。（削除：JavaScriptのテンプレエンジンよりDOMのほうが速いようですし。）※

デモ

HTML

• キーボード入力も大丈夫。即座に下のDOMコードが変化します。
• 不完全なHTMLを入力すると正しい結果になりません。例えば<table>タグに囲われていない<tr>タグなど。あくまで上記テキストエリア内でDTDに反しないHTMLを入力してください。

DOMコード

ダウンロード

ファイル

dom2code.js

※気が向いたら改善しますので、ダウンロードするより、このページをブックマークするほうがおすすめです。

動作環境

WinXP(SP2)上のInternet Explorer バージョン6.0.29で動作確認しました。

動作だけなら幅広いブラウザで可能ですが、出力するDOMコードがブラウザにより異なります。というのは、ブラウザを「HTML→DOM変換機能」として利用しているからです。（コメントのSQ様ご指摘の通り）

動作原理

• 入力されたHTMLをinnerHTMLに流し込む
• そのエレメントをDOM的にツリー走査してDOMコードを生成する

このため、不完全なHTML（<table>タグに含まれていない<tr>タグなど）を入力すると正しい結果になりません。

使用上の注意

• DOMコードは自己責任で、適宜修正して御利用ください。
• MozillaやFirefoxでは、余計なテキストノード（ホワイトスペースだけ）が追加されてしまいます(後述)。不要な部分は削除してお使いください。DOM Level 3 Coreを見たところ、normalizeやisElementContentWhitespaceを使うことで解消できそうな気もします。御存知でしたら教えてください。※
• 入力されたHTMLは、このウェブページのDTDとCSSに従って解釈されます。それで都合が悪い場合は、ローカルにコピーしてお使いください。

※Moz的には仕様どおり？で、むしろIEだけが違う挙動をしているとのこと。（情報提供者：高橋登史朗様）

IEとFFでの相違点

以下のように、余分なホワイトスペースを「含まない＝IE」「含む＝FF」という違いがあります。IEのほうが生成されるDOMコードは使いやすい感じがしますので、このツールを使う際には上記動作環境での御利用をお勧めします。

その他の情報

DOM,innerHTML,XML+XLSTの比較

蛇足ですが、DOMのほうがinnerHTMLより柔軟に制御できる（メリット）一方で、速度はinnerHTMLのほうが上（デメリット）だそうです。大量のデータを流し込むときなどは、innerHTMLが良いようです。場合によりXML+XSLTという手もあるようです（GoogleMapsで使われているようです）。ただXSLTを使うだけでも大変だとか、クロスブラウザのノウハウが少ないとかの問題があるようです。