Kawa.netxp [JavaScript] ECMAScript for XML (E4X) を試してみた

Firefox 1.5では、 ECMAScript for XML (E4X) が利用できます。
JavaScript 中に XML コードを埋め込んで XML オブジェクトとして利用できるほか、
（XML.ObjTreeクラスのように） 面倒な DOM 操作ではなくてJavaScriptオブジェクトの
プロパティを辿るようにして簡単に XML のデータ構造にアクセスできます。

大なり・小なりの記号を新しい用途に使っているわけですね。賢い！
（C++ のストリームの << よりもよっぽど直感的な用途だと思う）
XML の処理がスゴく直感的に分かりやすくなるので、良いと思うのですが、
まだ IE では使えないので、一般に普及するのはまだ当分先になりますね……。

※このページのスクリプトは、Firefox 1.5 用になります。 IE 7／Opera 8.53 では動作しません。

要素の値・属性の値を取り出す

["@foo"] のように連想配列のようにアクセスする手順は慣れてるけど、
.@foo というプロパティのようにアクセスするのも分かりやすそう。

コード例： 

<script type="text/javascript; e4x=1">
    var xml = <root><node foo="bar">hoge</node></root>;
    document.write( "1. "+ xml.node         +"\n" );  // 要素の値 "hoge"
    document.write( "2. "+ xml.node.@foo    +"\n" );  // 属性の値 "bar"
    document.write( "3. "+ xml.node["@foo"] +"\n" );  // 同じく "bar"
</script>

実行結果：

複数の要素がある場合は配列化

同じ名前の子要素が複数回登場する場合は、配列のようにアクセスします。
１回しか登場しない子要素も、配列のように [0] ができるあたりは、 さすが JavaScript 自体に組み込まれているだけある。

コード例： 

<script type="text/javascript; e4x=1">
    var xml = <root><node>foo</node><node>bar</node><hoge>pomu</hoge></root>;
    document.write( "4. "+ xml.node[0]  +"\n" );    // 最初の<node>要素の値 "foo"
    document.write( "5. "+ xml.node[1]  +"\n" );    // 二番目の<node>要素の値 "bar"
    document.write( "6. "+ xml.hoge[0]  +"\n" );    // 常に配列化してもOK "pomu"
</script>

実行結果：

従来型のコメントアウトに注意

大昔のブラウザは <script> 要素を解釈しなかったので、 ついつい <script><!-- 〜 --></script> と スクリプト本体部分を HTML のコメントにしてしまうのだけど、 E4X モードでは XML のコメント要素になってしまうため、 その部分のスクリプトが実行されません。

コード例： 

<script type="text/javascript; e4x=1"><!--
    document.write( "7. Hello, World!\n" );     //  出力されない
// --></script>

実行結果：

文字列としてXMLを解析／出力する

とはいえ、やはり JavaScript 中に XML 要素が並んでいるのは 落ち着かないですが、new XML() を使うことで文字列からも解析できます。 従来の DOMParser オブジェクトのような感覚かな。
また、function::toXMLString() メソッドで XML 文字列に戻せます。 ちゃんとインデントしてあるところが嬉しい。

コード例： 

<script type="text/javascript; e4x=1">
    var src = "<root><node>foo bar</node></root>";
    var xml = new XML( src );
    document.write( "8. "+ xml.node +"\n" );
    var out = xml.function::toXMLString();
    out = out.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
    document.write( "9. "+ out +"\n" );
</script>

実行結果：

new XML() の引数には、DOM も指定できるらしい。

コメントはこちらへ by AjaxCom

その他のページへのリンク

このページへのトラックバック by AjaxTB

トラックバックURL：http://www.kawa.net/service/tb/ajaxtb.cgi/works/js/tips/e4x.html

Kawa.netxp © Copyright 2006 Yusuke Kawasaki