【JavaScript】すべての子要素を削除するときは、cloneNode(false) して replaceChild するのが多分いちばん速い。

PC版へ 2015年09月14日

さて、あるDOM要素の中身を空にしたい。つまり全ての子要素を削除したいときの話。

要素 ele の子ノードをすべて削除したいならば、安直に、

ele.innerHTML = '';

という方法も考えられるけれど、これ、うちで試してみた限り、ele の内容物にボリュームがある場合には結構な処理時間がかかります。特に Firefox。

で、いろいろな場所で紹介されている方法は以下のような感じ。

while( ele.firstChild ){
  ele.removeChild( ele.firstChild );
}

これは多くの場合、innerHTML に '' をぶっ込むよりも高速に動作します。

この方法は、当然ながら子ノードの数のぶんだけループが回りますね。

だったら、次のようなやり方のほうが速い。

var clone = ele.cloneNode( false ); //ガワだけ複製して…

ele.parentNode.replaceChild( clone , ele ); //すげ替え。

子要素の数にかかわらず、いつでもDOM操作2回で済みます。

ただし注意しておかなくてはならないのは、eleclone は別物だということ。

スクリプトの別の場所で ele を参照し続けていたり、ele にイベントリスナを登録していたりする場合、参照を clone に付け替えたり、改めて clone にイベントリスナを登録しなくてはなりません。

そんな余分な作業が生じるので、これがいつでも最適な方法…とは言えないかもしれませんが、こんなやり方もある、ということで。

関連記事

コメント

現在、コメント機能は停止しています。