domconv - DOM reversible converter

はじめに

DOM APIによるプログラミングは、非常に面倒で手間のかかるものになりがち です。特定要素の内容を取得したりDOMを構築したりする際に、ごく単純な構 造のものであっても何十行とコードを書かなくてはならないことも少なくあり ません。

domconvライブラリは、DOMオブジェクトから組み込みオブジェクトへの変換、 逆変換を行います。domconvライブラリを使用することで、プログラマの負担 を大きく減らすことが出来ます。

Jamritas.DOMConv

コンストラクタ

Jamritas.DOMConv([config])

domconvオブジェクトを作成します。

configにより初期プロパティを設定することができます。

var domconv = new Jamritas.DOMConv({document: xmldoc});

プロパティ

document

DOMオブジェクトを生成するためのDocumentインターフェイスを実装した オブジェクト。デフォルトでグローバルで宣言されたdocumentが指定され ます。ウェブブラウザ上でXMLDOMを生成したい場合などにこのプロパティ を変更します。

またこのプロパティはdom2obj()、dom2text()の振る舞いに も影響を与えます。

メソッド

dom2obj(dom)

DOMオブジェクトを組み込みオブジェクトへ変換します。

documentプロパティがグローバル変数documentであれば、要 素名、属性名を小文字にして結果を生成します。

obj2dom(obj)
組み込みオブジェクトをDOMオブジェクトへ変換します。
dom2text(dom)

DOMオブジェクトを文字列へ変換します。

documentプロパティがグローバル変数documentであれば、要 素名、属性名を小文字にして結果を生成します。

変換規則

テキストのみを含む要素

子要素としてテキストのみを含む要素のDOMオブジェクトは以下のような組み込みオ ブジェクトに対応します。

DOMオブジェクト:

<p>hello, world.</p>

組み込みオブジェクト:

{p: "hello, world."}

子要素をひとつだけ持つ要素

子要素として要素をひとつだけ含む要素のDOMオブジェクトは以下のような組み込み オブジェクトに対応します。

DOMオブジェクト:

<p><strong>hello, world!</strong></p>

組み込みオブジェクト:

{p: {string: "hello, world!"}}

子要素を持たない要素

子要素を含まない要素のDOMオブジェクトは以下のような組み込みオブジェクトに対 応します。

DOMオブジェクト:

<br>

組み込みオブジェクト:

{br: null}

子要素を複数持つ要素

子要素として要素やテキストを複数含む要素のDOMオブジェクトは以下のよう な組み込みオブジェクトに対応します。

DOMオブジェクト:

<p><em>Perl</em>, <em>Ruby</em>, and <strong>JavaScript</strong> are script languages.</p>

組み込みオブジェクト:

{p: [{em: "Perl"}, 
     ", ", 
     {em: "Ruby"}, 
     ", and ", 
     {strong: "JavaScript"}, 
     " are script languages."]}

特定の子要素を取り出す場合、dom2obj()によって生成された組み込みオブジェクト であれば、配列のインデクスによる指定だけでなく要素名による指定も行うこ とができます。例えば、上記の例でstrong要素の内容を取り出すために、

var text = obj.p[4].strong; // text == "JavaScript"

とするべきところを、

var text = obj.p.strong; // text == "JavaScript"

とすることができます。同じ名前の要素が複数ある場合には、インデクスを与 えることで同様に取り出せます。

var text = obj.p.em[1] // text == "Ruby"

属性を持つ要素

属性を持つ要素のDOMオブジェクトは以下のような組み込みオブジェクトに対応しま す。

DOMオブジェクト:

<p><strong id="main" title="greeting">hello, world</strong></p>

組み込みオブジェクト:

{p: {strong: "hello, world", "@id": "main", "@title": "greeting"}}

属性値の取得には直観とのずれが生じるので注意が必要です。

var title = obj.p["@title"]; // p要素の属性ではない

CDATASectionノードとコメントノード

CDATASectionノード、コメントノードはそれぞれ以下のような組み込みオブジェクトに 対応します。

DOMオブジェクト:

<![CDATA[foo]]>

<!--bar-->

組み込みオブジェクト:

{"#cdata-section": "foo"}

{"#comment": "bar"}

SourceForge.net Logo