【JavaScript】すべての子要素を削除するときは、cloneNode(false) して replaceChild するのが多分いちばん速い。
さて、あるDOM要素の中身を空にしたい。つまり全ての子要素を削除したいときの話。
要素 ele の子ノードをすべて削除したいならば、安直に、
ele.innerHTML = '';
という方法も考えられるけれど、これ、うちで試してみた限り、ele の内容物にボリュームがある場合には結構な処理時間がかかります。特に Firefox。
で、いろいろな場所で紹介されている方法は以下のような感じ。
while( ele.firstChild ){
ele.removeChild( ele.firstChild );
}
ele.removeChild( ele.firstChild );
}
これは多くの場合、innerHTML に '' をぶっ込むよりも高速に動作します。
この方法は、当然ながら子ノードの数のぶんだけループが回りますね。
だったら、次のようなやり方のほうが速い。
var clone = ele.cloneNode( false ); //ガワだけ複製して…
ele.parentNode.replaceChild( clone , ele ); //すげ替え。
ele.parentNode.replaceChild( clone , ele ); //すげ替え。
子要素の数にかかわらず、いつでもDOM操作2回で済みます。
ただし注意しておかなくてはならないのは、ele と clone は別物だということ。
スクリプトの別の場所で ele を参照し続けていたり、ele にイベントリスナを登録していたりする場合、参照を clone に付け替えたり、改めて clone にイベントリスナを登録しなくてはなりません。
そんな余分な作業が生じるので、これがいつでも最適な方法…とは言えないかもしれませんが、こんなやり方もある、ということで。
コメント