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

| コメント(0) | トラックバック(0)

DOMスクリプティングは面倒です。そこで、DOMコードジェネレータを作りました。 追記2009/04/28:もはや時代遅れかもしれませんが、何かの役に立つかもしれませんので、再掲しました。

解説

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

意図

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

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

デモ

HTML

ここにあなたのHTMLを流し込んでください。(DOMスクリプティングで生成したいノードツリーと等価なHTML/XML)
  • キーボード入力も大丈夫。即座に下の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コードは使いやすい感じがしますので、このツールを使う際には上記動作環境での御利用をお勧めします。

var elm3 = document.createTextNode('Let¥'s access '); //IE var elm3 = document.createTextNode('¥n Let¥'s access '); //FF

その他の情報

DOM,innerHTML,XML+XLSTの比較

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



トラックバック(0)

トラックバックURL: http://zerobase.jp/mt/mt-tb.cgi/384

コメントする

このブログ記事について

このページは、ishibashiが2005年10月 8日 20:48に書いたブログ記事です。

ひとつ前のブログ記事は「機能はデザインに従う」です。

次のブログ記事は「[ajax]quickedit - HTMLリアルタイム編集(ブックマークレット)」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。