divノードの子ノードを削除する

Question

divノードの子ノードを削除するコードは次のとおりです。これらのコードはどちらも正しいですか？その他

while(innerWindowContentBox.hasChildNodes())  
innerWindowContentBox.removeChild(innerWindowContentBox.childNodes[0]); 

は、IEのサポートが必要とされていないので、コードはGreasemonkeyのスクリプトのためのものであることを

innerWindowContentBox.innerHTML = ''; 

注意です。

Answer 1

これらの両方は、ユーザーが行っている限り、アプリの動作が変わる限り、ほぼ同じことを行う必要があります。

しかし、の場合は、要素をページに追加する場合は、前者の方法を使用する必要があります。 innerHTMLを使用すると、JSエンジンがDOMの変更を常に認識しているとは限りません。奇妙な予期しない動作が発生することがあります。

Answer 2

両方のコードで作業が完了しますが、はDOMアプローチ（つまりwhile(innerWindowContentBox.hasChildNodes() ...）を使用します。

利点：

1. それはかなり高速です。 this speed comparison at jsperf.comを参照してください。サンプルHTML（数百のノード、それぞれイベントハンドラを持つ）では、DOMアプローチは10〜20倍高速でした（これまでのところ）。

2. 悪い習慣を避ける。 innerHTMLをうかがうと、予期せぬバグが発生する可能性があります。少なくとも、保存したいかもしれないイベントハンドラを破壊します。この特殊なケースでは、それは問題ではありませんが、innerHTML操作の習慣を作れば、いつかあなたを噛んでしまいます。

3. DOMメソッドは外科的に必要なビットを変更することができます。ここではinnerHTMLとしてすべての子ノードが破壊されるため、ブラウザに保存したいものを再構築する必要があります。

Answer 3

@Brock Adamsによって投稿されたjsPerf benchmarkに別のテストケースが追加されました。 element.firstChild（少なくともChromeでは）を使用してテストするのが少し速いです：

while (containerNode.firstChild) { 
    containerNode.removeChild (containerNode.childNodes[0]); 
}