documentFragmentをIEで使う方法

著者:杉浦

documentFragmentをIEで使う方法

 DocumentFragmentは小型のdocumentの様なものを定義する関数です。DocumentFragmentで定義されたDOMは画面に反映されません。
DocumentFragment – Web API インターフェイス | MDN
 下の画像の表はDocumentFragmentの対応表です。

 見ての通りInternet Explorerは2018/05/22時点でBasic support、querySelector、querySelectorAllにのみしか対応していません。他にも内部にDocumentFragmentを作成するコンテンツテンプレート要素であるタグにも対応していません。このためgetElementIDのようなdocumentに対してよく使用する関数すらDocumentFragmentにかけようとするとエラーないし予期せぬ動作を招くことがあります。基本サポートの範囲がよくわからなかったので、実装していないのではないかと疑い同等の機能を他の記述で試すぐらいしか解決法がわかりませんでした(W3Cの仕様書なり技術書なりにあるはず)。querySelector、querySelectorAllには対応しているので要素探索は楽なので、対象の要素に対してappendChild等の基本的であろうコードを書くのがコーディングの方針になると思います。
 InternetExplorerはFirefox、chromeなどの他ブラウザよりも律義にレンダリングを頻繁にしてくれます。そのためDOMの追加が大量にあるような場合は一度DocumentFragmentなどの画面に影響しない部分でDOMをまとめて構成、一括してdocumentにつなげる方がとても良いです。以下はtable_masterというIDのついた親を持ち、hoge_tableというIDのついたtable内のtbody_topというIDのついたtbodyを、tbody内のHTMLコードを表す文字列hoge_strで置き換える例です。


var df = document.createDocumentFragment();
df.appendChild(document.getElementById("hoge_table"));
df.querySelector("#tbody_top").innerHTML = "";
var tbd = document.createElement("tbody")
hoge_str = "abc";
tbd.innerHTML = hoge_str;
while(tbd.firstChild){
	df.querySelector("#tbody_top").appendChild(tbd.firstChild);
}
document.getElementById("table_master").appendChild(df.firstChild);
  • この記事いいね! (0)

著者について

杉浦 administrator