JavaScript プログラミング講座

 

DOMParser クラスについて

 
 


■ DOMParser とは?

 
XML や HTML 文字列を、構文解析する為のクラスです。
 
構文解析に成功すると、DOM ツリーを生成できます。
 
■セキュリティについて
 
デフォルトでは、すべての要素は、不活性な状態となります。
 
例えば、<SCRIPT> 要素などは実行されません。
 
例えば、外部リソースへのアクセスは発生しません。
 
まずは安全に、DOM オブジェクトに変換する事ができます。
 
■サニタイズ(消毒化)について
 
実際に活用する場合は、消毒化(サニタイズ)を行います。
 
例えば、<SCRIPT> 要素を除外します。
 
例えば、先頭に "on" が付くイベント用のプロパティをすべて除外します。
 
例えば、先頭に "javascript:" が付く URL アドレスをすべて除外します。
 
■不活性な要素を動作させる
 
通常のノードリストに再配置すると、要素が動作を開始します。
 

■ブラウザが DOMParser クラスをサポートしているか調べる

 
window.DOMParser が真であるか比較します。
 
 

■文字列を構文解析して、Document オブジェクトを生成する

 
parseFromString() メソッドを使用します。
 
DOMParser.parseFromString( "テキスト" , "コンテンツタイプ" ) :Document
第01引数 String変換したい XML や HTML などの文字列をセットする。
第02引数 String第01引数で指定したテキストのコンテンツタイプを指定する。
戻り値 Document成功した場合、新しい Document オブジェクトが得られる。
失敗した場合、例外エラーが発生するか、<parsererror> という要素が付加される。
 
■第02引数(コンテンツタイプ)
 
第02引数で指定するコンテンツタイプの一覧です。
 
文字列 説明
"text/xml"
"application/xml"
"application/xhtml+xml"
XML 文書
"text/html" HTML 文書
"image/svg+xml" SVG
 
■戻り値
 
構文解析に成功した場合、新しい Document オブジェクトが得られます。
 
失敗した場合、<parsererror> という要素が付加されます。
 
ブラウザによっては、例外エラーが発生します。
 
■使用例
 
XML 文字列から Document オブジェクトを作成する

// ------------------------------------------------------------
// XML 文字列を用意する
// ------------------------------------------------------------
var text_xml = 
	'<?xml version="1.0" encoding="UTF-8"?>\n' + 
	'<container>\n' +
	'	<element0 attribute="value0">テキストA</element0>\n' +
	'	<element1 attribute="value1">テキストB</element1>\n' +
	'</container>';

// ------------------------------------------------------------
// DOMParser オブジェクトを作成する
// ------------------------------------------------------------
var dom_parser = new DOMParser();

// ------------------------------------------------------------
// XML 文字列から Document オブジェクトを作成する
// ------------------------------------------------------------
var document_obj = null;
try {

	// ------------------------------------------------------------
	// XML 文字列から Document オブジェクトを作成する
	// ------------------------------------------------------------
	document_obj = dom_parser.parseFromString(text_xml , "application/xml");

	// ------------------------------------------------------------
	// パースに失敗したか調べる
	// ------------------------------------------------------------
	if(document_obj.getElementsByTagName("parsererror").length){
		document_obj = null;
	}

}catch(e){
}

// パースに成功した
if(document_obj){
	// 出力テスト
	console.log(document_obj.documentElement);
}
 

■Document オブジェクトから要素などにアクセスする

 
Document オブジェクトから、DOM API を使用する事ができます。
 
要素や属性やテキストなどにアクセスする方法については、こちらで解説しています。
 


 

XMLSerializer クラスについて

 
 


■ XMLSerializer とは?

 
DOM ツリーから、XML 文字列を生成する為のクラスです。
 
HTML 文字列を生成する方法については、こちらで解説しています。
 

■ブラウザが XMLSerializer クラスをサポートしているか調べる

 
window.XMLSerializer が真であるか比較します。
 
 

■「DOM ノード」から「XML 文字列」を生成する

 
serializeToString() メソッドを使用します。
 
XMLSerializer.serializeToString( Node ) :String
第01引数 Node変換したい DOM ノードを指定する。
戻り値 StringXML 文字列が得られる
 
■使用例
 
「DOM ノード」から「XML 文字列」を生成する

// ------------------------------------------------------------
// 適当な DOM ツリーを用意する
// ------------------------------------------------------------
var element = document.createElement("xml");
element.innerHTML = 
	'<container>\n' +
	'	<element0 attribute="value0">テキストA</element0>\n' +
	'	<element1 attribute="value1">テキストB</element1>\n' +
	'</container>';

// ------------------------------------------------------------
// XMLSerializer オブジェクトを作成する
// ------------------------------------------------------------
var xml_serializer = new XMLSerializer();

// ------------------------------------------------------------
//「DOM ノード」から「XML 文字列」を生成する
// ------------------------------------------------------------
var text_xml = xml_serializer.serializeToString(element);

// 出力テスト
console.log(text_xml);
 


 

DOM と「XML 文字列」の相互変換

 
 


■「XML 文字列」から「Document オブジェクト」を生成する

 
■「XML 文字列」から「Document オブジェクト」を生成する
 
DOMParser クラスの、parseFromString() メソッドを使用します。
 
■ Internet Explorer 8 以前の場合
 
かわりに、ActiveXObject("Microsoft.XMLDOM") を使用します。
 
DOMParser クラスは、Internet Explorer 9 以降で利用可能です。
 
■ XML 文字列をパースする場合の注意点
 
XML 文字列は、XML フォーマットとして正確である必要があります。
 
閉じタグが無いなどの不備がある場合、パースは失敗します。
 

■「XML 文字列」から「Document オブジェクト」を生成する関数

 
Internet Explorer 6 以降でも動作します。
 
パースに失敗した場合、null が得られます。
 
「XML 文字列」から「Document オブジェクト」を生成する関数

// ------------------------------------------------------------
// 「XML 文字列」から「Document オブジェクト」を生成する関数
// ------------------------------------------------------------
function XmlString_To_Document(text){
	try{
		if(window.DOMParser){
			var dom_parser = new DOMParser();
			var document_obj = dom_parser.parseFromString(text , "application/xml");
			if(document_obj.getElementsByTagName("parsererror").length == 0){
				return document_obj;
			}
		}else{
			var document_obj = new ActiveXObject("Microsoft.XMLDOM");
			document_obj.async = false;
			document_obj.loadXML(text);
			if(document_obj.documentElement){
				return document_obj;
			}
		}
	}catch(e){
	}

	return null;
}
 
■使用例
 
「XML 文字列」から「Document オブジェクト」を生成する

// ------------------------------------------------------------
// XML 文字列を用意する
// ------------------------------------------------------------
var text_xml = 
	'<?xml version="1.0" encoding="UTF-8"?>\n' + 
	'<container>\n' +
	'	<element0 attribute="value0">テキストA</element0>\n' +
	'	<element1 attribute="value1">テキストB</element1>\n' +
	'</container>';

// ------------------------------------------------------------
// 「XML 文字列」から「Document オブジェクト」を作成する
// ------------------------------------------------------------
var document_obj = XmlString_To_Document(text_xml);

// 出力テスト
console.log(document_obj);
console.log(document_obj.documentElement);
 

■「DOM オブジェクト」から「XML 文字列」を生成する

 
■「DOM オブジェクト」から「XML 文字列」を生成する
 
XMLSerializer クラスの、serializeToString() メソッドを使用します。
 
■ Internet Explorer 8 以前の場合
 
XMLSerializer クラスに対応していません。
 
かわりに、xml プロパティを使用します。
 
XMLDOMNode クラスを継承している、DOM オブジェクトに限ります。
 
例えば、HTML の DOM ツリーを、XML 文書に変換する事はできません。
 

■「DOM オブジェクト」から「XML 文字列」を生成する関数

 
「DOM オブジェクト」から「XML 文字列」を生成する関数

// ------------------------------------------------------------
// 「DOM  オブジェクト」から「XML 文字列」を生成する関数
// ------------------------------------------------------------
function DomNode_To_XmlString(node){
	try{
		if(window.XMLSerializer){
			var xml_serializer = new XMLSerializer();
			return xml_serializer.serializeToString(node);
		}else if(node.xml){
			return'<' + (node.tagName) + ' xmlns="http://www.w3.org/1999/xhtml">' + (node.xml) +'<\/' + (node.tagName) + '>';
		}
	}catch(e){
	}

	return null;
}
 
■使用例
 
「DOM オブジェクト」から「XML 文字列」を生成する

if(document.implementation.createDocument){

	// ------------------------------------------------------------
	// Document オブジェクトを作成
	// ------------------------------------------------------------
	var document_obj = document.implementation.createDocument("http://www.w3.org/1999/xhtml" , "xml" , null);

	// ------------------------------------------------------------
	// Element オブジェクトを取得
	// ------------------------------------------------------------
	var element = document_obj.documentElement;

	// ------------------------------------------------------------
	// 適当な DOM ツリーを構築する
	// ------------------------------------------------------------
	element.innerHTML = 
		'<container>\n' +
		'	<element0 attribute="value0">テキストA</element0>\n' +
		'	<element1 attribute="value1">テキストB</element1>\n' +
		'</container>';

	// ------------------------------------------------------------
	// 「DOM  オブジェクト」から「XML 文字列」を生成する
	// ------------------------------------------------------------
	var text_xml = DomNode_To_XmlString(element);

	// 出力テスト
	console.log(text_xml);

}else{

	// ------------------------------------------------------------
	// Element オブジェクトを作成する(Internet Explorer 8 以前の場合)
	// ------------------------------------------------------------
	var element = document.createElement("xml");

	// ------------------------------------------------------------
	// 適当な DOM ツリーを構築する
	// ------------------------------------------------------------
	element.loadXML(
		'<container>\n' +
		'	<element0 attribute="value0">テキストA</element0>\n' +
		'	<element1 attribute="value1">テキストB</element1>\n' +
		'</container>'
	);

	// ------------------------------------------------------------
	// 「DOM  オブジェクト」から「XML 文字列」を生成する
	// ------------------------------------------------------------
	var text_xml = DomNode_To_XmlString(element);

	// 出力テスト
	console.log(text_xml);

}
 


 

DOM と「HTML 文字列」の相互変換

 
 


■「HTML 文字列」から「Document オブジェクト」を生成する

 
■「HTML 文字列」から「Document オブジェクト」を生成する
 
DOMParser クラスの、parseFromString() メソッドを使用します。
 
第02引数に、"text/html" を指定します。
 
■ HTML 文字列の構文解析について
 
HTML 文字列に、仕様上の不備があったとしても、エラーとはなりません。
 
例えば、閉じタグが無かったとしても、最後まで解析されます。
 
HTML 文字列の部分的なパースも可能です。
 
この場合、<HTML> <HEAD> <BODY> 要素は、必ず追加されます。
 
■ブラウザのサポートについて
 
古いブラウザでは、HTML 文字列の構文解析機能に対応していません。
 
DOMParser クラスが利用可能であっても、サポートしているとは限りません。
 

■「HTML 文字列」から「Document オブジェクト」を生成する関数

 
Internet Explorer 8 以前では動作しません。
 
サポートしていない場合、null 値が得られます。
 
Internet Explorer 9 では、<BODY> 要素内の、部分的な構文解析のみ可能です。
 
「HTML 文字列」から「Document オブジェクト」を生成する関数

// ------------------------------------------------------------
// 「HTML 文字列」から「Document オブジェクト」を生成する関数
// ------------------------------------------------------------
function HtmlString_To_Document(text){
	try{
		var dom_parser = new DOMParser();
		var document_obj = dom_parser.parseFromString(text , "text/html");
		if(document_obj.getElementsByTagName("parsererror").length == 0){
			return document_obj;
		}
	}catch(e){
	}

	try{
		var document_obj = document.implementation.createHTMLDocument("");
		document_obj.body.innerHTML = text;
		return document_obj;
	}catch(e){
	}

	return null;
}
 
■使用例
 
「HTML 文字列」から「Document オブジェクト」を生成する

// ------------------------------------------------------------
// HTML 文字列を用意する(全体的)
// ------------------------------------------------------------
var text_html0 = 
	'<!DOCTYPE html>\n' + 
	'<html>\n' +
	'  <head>\n' +
	'  </head>\n' +
	'  <body>\n' +
	'    <div>あいうえお</div>\n' +
	'    <div>かきくけこ</div>\n' +
	'  </body>\n' +
	'</html>';

// ------------------------------------------------------------
// HTML 文字列を用意する(部分的)
// ------------------------------------------------------------
var text_html1 = '<div><span>さしすせそ</span></div>';

// ------------------------------------------------------------
// 「HTML 文字列」から「Document オブジェクト」を作成する
// ------------------------------------------------------------
var document_obj0 = HtmlString_To_Document(text_html0);
var document_obj1 = HtmlString_To_Document(text_html1);

// 出力テスト
console.log(document_obj0);
console.log(document_obj1);
console.log(document_obj0.documentElement);
console.log(document_obj1.documentElement);
 

■「DOM オブジェクト」から「HTML 文字列」を生成する

 
■「DOM オブジェクト」から「HTML 文字列」を取得する
 
outerHTML プロパティを使用します。
 
自身を含む、DOM ツリーの現在の状態を出力します。
 
■「Document オブジェクト」から「HTML 文字列」を取得する
 
document.documentElement.outerHTML プロパティを使用します。
 
ドキュメント全体の、DOM ツリーの現在の状態を出力します。
 
■ HTML 文書のソースを取得したい場合
 
ソースを取得したい場合は、XHR 通信などを利用します。
 
■使用例
 
「DOM オブジェクト」から「HTML 文字列」を生成する

<html>
  <body>

    <div id="aaa" >
      <span>あいうえお</span>
    </div>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// HTML 要素を取得する
	// ------------------------------------------------------------
	var html_element = document.documentElement;

	// 出力テスト
	console.log( html_element.outerHTML );

	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var element = document.getElementById("aaa");

	// 出力テスト
	console.log( element.outerHTML );

    //-->
    </script>

  </body>
</html>