javascript - JavaScriptでノードを空にする最良の方法は何ですか?

Question

サムネイルの長いリストを含むギャラリーがあります。DOM がノードでいっぱいになるのを防ぐために、ノードを再利用しています。(ライブラリを使用せずに) DOM からノードを削除する最良の方法は何ですか?

を使用innerHTML = ""すると、新しい空のテキスト ノードが解析されて作成されますが、子をループして削除するとリフローが発生しますか?

Answer 1

少なくとも4つのオプションがあります。

1. 質問で示したように使用innerHTML = ""します。呼び出す要素に子ノードがまったくないことを確認し、新しいノードを作成しません。これは指定された信頼性の高いクロスブラウザーであり（ただし、コードに影響する場合と影響しない場合があるIEのバグがあります）、おそらくかなり効率的です。

2. を使用するtextContent = ""と、これも指定され、信頼性の高いクロスブラウザー（IE9 +）であり、興味深いことに、IE11（少なくとも）には、のようなバグはないようtextContentですinnerHTML。また、HTMLパーサーを必要としないという利点もあります。もちろん、指定する文字列はinnerHTMLHTMLであることが期待されます。（ただし、ブラウザーは、文字列が空白の場合に最適化されている可能性があります。）

3. ループで使用することもできますremoveChildが、これにはDOMへの関数呼び出しが繰り返される可能性があります。

   // assuming elm is the element
   while (elm.firstChild) {
      elm.removeChild(elm.firstChild);
   }
   

4. 親要素を子を省略したクローンに置き換えることができます。

   // assuming elm is the element
   const clone = elm.cloneNode(false);
   parent.parentElement.replaceChild(clone, elm);
   elm = clone;
   

   他とは異なり、これにより親要素のイベントハンドラーが削除されることに注意してください。

推測しなけれtextContent = ""ばならないのであれば、少なくとも子供がたくさんいる場合は、それが最速だと思います。ただし、通常、パフォーマンスは重要ではありません。これがコードの著しく遅い部分になるという非常にまれなケースです。重要な状況に遭遇した場合は、ターゲットブラウザの各オプションを使用して実際のコードをテストし、最適なものを選択してください。

人々は合成ベンチマークを愛していますが、合成ベンチマークは非常に信頼性が低く、ベンチマークの仮定（削除される子の数など）に敏感です。