デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.parseXML( )文字列をXMLドキュメントに変換

構文

文字列をXMLドキュメントに変換返値:XMLドキュメント
jQuery.parseXML( 文字列 )ver1.5〜

機能

jQuery.parseXMLメソッドは引数に設定された文字列をXMLドキュメントに変換します。

変換されたXMLドキュメントはjQueryメソッドを利用することでjQueryオブジェクトに変換でき、
TraversingManipulationのメソッドで処理することができるようになります。

解説

文字列をXMLドキュメントに変換します

サンプル(parseXML/01.html)を開いてbody内にbutton要素しかないことを確認して下さい。jQueryでは、まず以下の部分を確認してください。XMLドキュメントに変換する文字列「testXML」を作成しています。

testXML = "<xml><name>bob</name><age>18</age></xml>";

続いて以下の部分を確認してください。buttonをクリックしたらjQuery.parseXMLメソッドを利用して上記で作成したtestXMLをXMLドキュメントに変換し、変数myXMLに代入しています。

$("button").click(function(){
	var myXML = $.parseXML(testXML);
	var myNode = myXML.getElementsByTagName("name");
	$("body").append(myNode);
});

XMLドキュメント「myXML」はjavaScriptのgetElementsByTagNameメソッドによって「name」タグの内容を取得し、appendメソッドを利用してbody内に追加するようにしました。
結果として、buttonをクリックするとnameタグの内容である「bob」がbody内に表示されます。

XMLオブジェクトをjQueryオブジェクトに変換して利用する

XMLドキュメントで利用するjavaScriptのメソッドは、サンプルparseXML/01.htmlで利用したgetElementsByTagNameメソッドの様に長い名前のものが多く利用しにくいです。しかし、XMLオブジェクトはjQueryメソッドjQueryオブジェクトに変換でき、簡単に扱うことができるようになります

サンプル(parseXML/02.html)を開いてbody内にbutton要素しかないことを確認して下さい。変換用のtestXMLはparseXML/01.htmlから変更ありませんが、buttonをクリックした時の処理は以下の様に変更されています。

$("button").click(function(){
	var myXML = $.parseXML(testXML);
	var myName = $(myXML).find("name");
	$("body").append(myName);
});

2行目でjQuery.parseXMLメソッドを利用して文字列をXMLドキュメントにするのは同じですが、3行目でXMLドキュメント「myXML」をjQueryメソッドで変換し、それに対してfindメソッドで引数に該当する要素を取得しています。このようにjQueryのメソッドが利用できるので非常に便利です

結果としてbuttonをクリックするとbody要素内にbobと表示されます。ただし、このbobはfindメソッドで「nameタグごと取得」したのため、目には見えませんがnameタグに挟まれた状態です。

純粋にテキスト情報だけ取得したい場合はサンプル(parseXML/02b.html)のようにtextメソッドを利用してテキスト情報を取得します。

$("button").click(function(){
	var myXML = $.parseXML(testXML);
	var myName = $(myXML).find("name").text();
	$("body").append(myName);
});

関連項目

外部にあるXMLファイルを読み込む場合はjQuery.getメソッドを利用してください。
文字列をJSON(javaScriptオブジェクト)に変換したい場合はjQuery.parseJSONメソッドを利用します。
文字列をHTMLドキュメントに変換したい場合はjQuery.parseHTMLメソッドを利用してください。