2

div ノードの子ノードを削除する次のコードがあります。これらのコードは両方とも正しいですか?

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

その他は

innerWindowContentBox.innerHTML = '';

コードは Greasemonkey スクリプト用であるため、IE のサポートは必要ありません。

4

3 に答える 3

2

コードの両方のビットで仕事は完了しますが、DOM アプローチ(つまりwhile(innerWindowContentBox.hasChildNodes() ... ) を使用します。

利点:

  1. それはかなり速いです。 jsperf.com でこの速度比較を参照してください。 サンプル HTML (数百のノード、それぞれにイベント ハンドラーがある) では、DOM アプローチは (これまでのところ) 10 倍から 20 倍高速でした。

  2. それは悪い習慣を避けます。特に幅広いブラウザーサポートを必要とするコードでは、いじるinnerHTMLと予期しないバグにつながる可能性があります。少なくとも、保存したいイベント ハンドラーが破棄されます。この特定のケースでは、それは問題ではありませんが、innerHTML操作の習慣を身に付けると、ある時点で噛まれます.

  3. DOM メソッドは必要な部分だけを外科的に変更できますが、asinnerHTMLはすべての子ノードを破棄するため、保持したいものをブラウザーで再構築する必要があります。

于 2012-02-27T09:52:07.610 に答える
2

@Brock Adams によって投稿されたjsPerf ベンチマークに別のテスト ケースを追加しました。element.firstChild(少なくとも Chrome では)を使用してテストする方がわずかに高速です。

while (containerNode.firstChild ) {
    containerNode.removeChild (containerNode.childNodes[0] );
}
于 2012-02-27T22:26:19.777 に答える
0

どちらも、ユーザーとアプリの動作に関する限り、ほぼ同じことを行う必要があります。

ただし、要素をページに追加する場合は、前者の方法を使用する必要があることに注意してください。innerHTML を使用すると、JS エンジンが DOM の変更を常に認識しているとは限らず、奇妙な動作や予期しない動作が発生する可能性があります。

于 2012-02-27T07:23:33.907 に答える