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

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

jQuery.parseHTML( )文字列をHTML要素(DOM要素)に変換

構文

文字列を文字列をHTML要素に変換返値:DOM要素の配列
jQuery.parseHTML( 文字列 [,context][,keepScripts])ver1.8〜

機能

jQuery.parseHTMLメソッドは引数に設定された文字列をHTML要素(DOM要素)に変換します。HTML要素は配列に格納されるので返される値は配列です。引数contextはデフォルトでdocumentです。iframeのような別のdocmentとして利用される際に指定します。

jQuery.parseHTMLメソッドはHTML内に組み込まれたjavaScriptコードを実行しないようになっていますが、引数keepScriptsをtrueにすることでコードを実行できるようになります。

v1.8以前はjQueryメソッドによってHTML要素を作成してきましたが、parseHTMLの方がスクリプトの実行を禁止できるためより安全です(外部にある他者が作成したソースを利用する時など)。

jQueryメソッドはhtml要素をさらにjQueryオブジェクトに変換するので、そのままjQueryのメソッドが利用できます。しかしjQuery.parseHTML( )はhtml要素のママなので直接はjQueryのメソッドは利用できません。なので上記のスクリプトの件を心配する必要がない場合はjQueryメソッドを利用した方が便利だと思います
あまり問題になることが無かったのでv1.8まで、このメソッドが追加されなかったのだと思います。

解説

返されるのは配列です

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

testHTML = "<b>bold</b><i>italic</i>";

続いて以下の部分を確認してください。buttonをクリックしたらjQuery.parseHTMLメソッドを利用して上記で作成したtestHTMLをHTML要素に変換しています。返される値が配列と確認できるように4行目でtypeメソッドを利用して値の型を調べてアラートで表示するようにしました。

$("button").click(function(){
	var myHTML = $.parseHTML(testHTML);
	alert($.type(myHTML))
});

buttonをクリックするとアラートで「array」と表示されることから、変換されたHTML(DOM要素)は配列であることが確認できます(つまり要素配列です)。

続いてサンプル(parseHTML/01b.html)を開いてjQueryが以下の様に変更されているのを確認してください。変更したのは3行目の処理だけで、lengthプロパティを利用して配列内の要素数を表示するようにしました。

$("button").click(function(){
	var myHTML = $.parseHTML(testHTML);
	alert(myHTML.length)
});

testHTMLにはb要素とi要素の2つ(ノード数が2)なので、buttonをクリックすると「2」と表示されます。

HTML要素になっていることを確認

サンプル(parseHTML/02.html)を開いてbody内の構成はparseHTML/01.htmlと同じ事を確認してください。jQueryは以下の様に変更され最初の要素のタグ名を取得しアラートで表示するようにしています。

まずmyHTMLの後に付けた[0]で要素配列から最初の要素(つまりb要素)を取得し、それに対しtagNameプロパティを利用してタグ名を取得しています。

$("button").click(function(){
	var myHTML = $.parseHTML(testHTML);
	alert(myHTML[0].tagName);
});

buttonをクリックすると最初のタグ名である「B」が表示されるので、myHTMLはhtml要素になっていることが確認できます。

jQueryメソッドの危険性

jQueryメソッドも文字列をhtml要素に変換できますが、注意点として文字列の中にあるスクリプトタグを実行することがあります。サンプル(parseHTML/03.html)を開いてbody内にdiv要素が追加されている事を確認してください。

<button>click</button>
<div></div>

jQueryは以下の様に記述され、1行目のgetメソッドで外部にあるhtmlデータ「test.html」を読み込み、2行目で読み込んだ内容を変数testHTMLに代入しています。testHTMLは6行目でjQueryメソッドを利用しHTML要素に変換され7行目のappendメソッドでdiv要素に追加されます。

$.get("test.html", function(myData){
	testHTML = myData;
})		
$(function () {
	$("button").click(function(){
		var myHTML = $(testHTML);
		$("div").append(myHTML);
	});
});

ここで読み込んだ「test.html」は以下の様に記述され、b要素とi要素があるのは同じですが、2行目にscriptタグがありアラートを実行するようにしてあります。

<b>bold</b><i>italic</i>
<script>alert("外部にあるスクリプトを実行しました");</script>

実際にbuttonをクリックするとアラートが実行され、jQueryメソッドが外部にあるスクリプトを実行できることが確認できます。これは便利そうですが他者の作成したhtmlデータを読み込む場合は悪意のあるコードが実行される可能性があります

parseHTMLは通常scriptは実行しない

parseHTMLは前項のjQueryメソッドと異なりscriptを実行しません。サンプル(parseHTML/04.html)を開いて内容がほとんどparseHTML/03.htmlと同じ事を確認してください。異なるのは以下の様にjQueryメソッドの代わりにparseHTMLを利用している点です。

$("button").click(function(){
	var myHTML = $.parseHTML(testHTML);
	$("div").append(myHTML);
});

buttonをクリックするとparseHTML/03.htmlとはことなりscriptタグは実行されないことが確認できます。しかし引数「keepScripts」をtrueにするとjQueryメソッドと同じようにscriptを実行するようになります。

サンプル(parseHTML/04b.html)を開いてparseHTMLの引数「keepScripts」が以下の様にtrue設定されていることを確認してください。

$("button").click(function(){
	var myHTML = $.parseHTML(testHTML,true);
	$("div").append(myHTML);
});

結果として、buttonをクリックするとscriptが実行されアラートが実行されます。

関連項目

文字列をXMLドキュメントに変換したい場合はjQuery.parseXMLメソッドを利用してください。
文字列をJSON(javaScriptオブジェクト)に変換したい場合はjQuery.parseJSONメソッドを利用します。

メモ

onClickとかは実行される

サンプルを作成する際に気が付いたのですが、タグ内に組み込んだonClickは実行されます。サンプル(parseHTML/test01.html)を開いてtestHTMLに以下の様な文字列を設定していることを確認してください。

testHTML = "<b onClick='alert(999)'>bold</b><i>italic</i>";

parseHTMLの引数「keepScripts」は以下の様にfalseに設定しているのでscriptは実行されないはずなのですが、b要素をクリックするとアラートが表示されます。

$("button").click(function(){
	var myHTML = $.parseHTML(testHTML,false);
	$("div").append(myHTML);
});

これは良いのでしょうか?

jQueryメソッドの方が便利なケース

$.parseHTMLメソッドが純粋にhtml要素を返すのに対し、jQueryメソッドはさらにjQueryオブジェクトにしてくれます。そのため作成したhtml要素に対しjQueryのメソッドを利用したい時はjQueryメソッドの方が便利に利用できます。

サンプル(parseHTML/test02.html)を開いてbody内にbuttonとdiv要素があることを確認してください。jQueryは以下の様に記述され、3行目で文字列のhtml「testHTML」をjQueryメソッドを利用してhtml要素、さらにjQueryオブジェクトに変換しています。

testHTML = "<b>bold</b><i>italic</i>";
$("button").click(function(){
	var myHTML = $(testHTML);
	myHTML.appendTo("div");
});

文字列のhtmlはjQueryメソッドでjQueryオブジェクトにまで変換されているので、4行目のように直接jQueryのメソッド(サンプルではappendToメソッド)を利用することができます。実際にbuttonをクリックしてhtml要素がdiv要素内に表示されるのを確認してください。

これに対し$.parseHTMLメソッドはjQueryオブジェクトを作成しないため同じ事ができません。
サンプル(parseHTML/test03.html)を開いてjQueryが以下の様に変更されているのを確認してください。3行目でjQueryオブジェクトの代わりに$.parseHTMLメソッドを利用しています。

testHTML = "<b>bold</b><i>italic</i>";
$("button").click(function(){
	var myHTML = $.parseHTML(testHTML);
	myHTML.appendTo("div");
});

$.parseHTMLメソッドはhtml要素のママなのでjQueryのメソッドは利用できません。そのためbuttonをクリックしても機能しません。

もしparseHTML/test03.htmlを機能させたいのであれば、$.parseHTMLメソッドで作成したmyHTMLをjQueryメソッドによってjQueryオブジェクトに変換します。 サンプル(parseHTML/test03b.html)を開いてjQueryを確認してください。

testHTML = "<b>bold</b><i>italic</i>";
$("button").click(function(){
	var myHTML = $.parseHTML(testHTML);
	$(myHTML).appendTo("div");
});

4行目で$.parseHTMLメソッドで作成した要素「myHTML」をjQueryメソッドでjQueryオブジェクトに変換しています。これなら機能するのでbuttonをクリックするとdiv要素にhtml要素が表示されます。

引数contextがよく分かりません

jQueryメソッドの構文にある「ownerDocument」もよく分からなかったのですが、parseHTMLの「context」もよく分かりません...。

色々調べていた時に本家サイトで「JQUERY.PARSEHTML() - "CONTEXT" ARGUMENT NOT WORKING」というのを見つけたのでメモ。