WebKitのDOM Range周りのバグ?

JavaScript で DOM Range を使った処理をしていたら、FireFox でも IE でも問題なく動くコードが、珍しく Chrome や Safari だとエラーを吐くのです。小一時間悩んだのだけれど、どうやらWebKitのせいらしい。
現象
Rootノードが Document または Document-Fragment のとき、ノードの最初の子要素を含む Range を指定しようとすると "INVALID_NODE_TYPE_ERR" を吐く。
2013年2月16日現在の、最新の Chrome / Safari(iOS含む)でも、この現象が発生します。

たまたま見つけたコチラの記事(英語)に上手くまとまっていたのだけれど、例えば、こんなふうにしたらエラーが出ます。
var root = document.createElement( 'DIV' );
root.appendChild( document.createElement( 'SPAN' ) );
var r = document.createRange();

r.setStartBefore( root.firstChild ); // INVALID_NODE_TYPE_ERR !!
r.selectNode( root.firstChild ); // INVALID_NODE_TYPE_ERR !!
これを回避するには、ルートノードを Document か Document Fragment にしてやれば大丈夫。例えば、root を document-fragment の子要素にしてしまう。
var root = document.createElement( 'DIV' );
root.appendChild( document.createElement( 'SPAN' );
var r = document.createRange();

var df = document.createDocumentFragment();
df.appendChild( root );

r.setStartBefore( root.firstChild ); // OK !
r.selectNode( root.firstChild ); // OK !
二番目に書いた「WebKitでエラーを出さないコード」は、このまま FireFox、Internet Explorer 8 / 9 で動作するので、とりあえず、そうしておけば無難なのですかな。

カテゴリ: