DOM Elementオブジェクトをテキストダンプしてデバッグ

DOM APIを使用して作ったDOMツリー、うまく生成されているか見てみたい事は多々ある。少なくともオイラはある。簡単にテキスト表示してくれると嬉しいなぁと常々思っていたのだが発見した。
Firefox（というかMozilla系かな）限定だろうけどXMLSerializerがあるのだ。

使い方は簡単。

var serializer = new XMLSerializer();

//略
var root = document.createElement('div');
var anchor = document.createElement('a');
var aText = document.createTextNode('はてな');
anchor.setAttribute('href','http://www.hatena.ne.jp/');
anchor.appendChild( aText );
root.appendChild( anchor );
//略

alert( serializer.serializeToString( root ) );

とか

var serializer = new XMLSerializer();
var elm = document.getElementById('hogehoge');
alert( serializer.serializeToString( elm ) );

とか。

HTMLDivElement.prototype.toString = function() { (new XMLSerializer()).serializeToString( this ) }

とか、遊びでみたり。

text2xml

逆にテキストからXML DOMオブジェクトを作りたかったら、DOMParserがあるよ。

var parser = new DOMParser();
var doc = parser.parseFromString("<root><hoge att='value'/><root>", "text/xml");
var rootElm = doc.documentElemnt;

パースに失敗している場合の判別は下記のようにすればOK

if ( rootElm.tagName == 'parserError' || rootElm.namespaceURI == 'http://www.mozilla.org/newlayout/xml/parsererror.xml' ) {
    throw 'CannotParseException';
}