☰

JavaScript で DOM ノードのすべての子要素を削除する 質問する

tag-icon • tag-icon javascript dom
JavaScript で DOM ノードのすべての子要素を削除する 質問する

JavaScript で DOM ノードの子要素をすべて削除するにはどうすればよいですか?

次のような（見苦しい）HTML があるとします。

<p id="foo">
    <span>hello</span>
    <div>world</div>
</p>

そして、必要なノードを次のように取得します。

var myNode = document.getElementById("foo");

foo残っている子だけを削除するにはどうすればよいでしょうか<p id="foo"></p>?

次のようにすればいいでしょうか:

myNode.childNodes = new Array();

それとも、いくつかの組み合わせを使用するべきでしょうかremoveElement?

回答は DOM のみでお願いします。ただし、DOM のみの回答に加えて、jQuery での回答も提供していただければ、さらにポイントが加算されます。

ベストアンサー1

オプション 1 A: クリアしますinnerHTML。

  • このアプローチはシンプルですが、ブラウザの HTML パーサーを呼び出すため、高パフォーマンスのアプリケーションには適さない可能性があります (ただし、ブラウザは値が空の文字列の場合に最適化する場合があります)。

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.innerHTML = '';
}
<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via innerHTML</button>

オプション1 B: クリアtextContent

  • 上記と同じですが、 を使用します.textContent。MDNによるとinnerHTMLブラウザが HTML パーサーを呼び出さず、代わりに要素のすべての子を単一のノードにすぐに置き換えるため、これは よりも高速になります#text。

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.textContent = '';
}
<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via textContent</button>

オプション 2 A: ループしてすべて削除lastChild:

  • この回答の以前の編集では が使用されていましfirstChildたが、これは を使用するように更新されました。lastChildコンピュータ サイエンスでは、一般に、コレクションの最初の要素を削除するよりも最後の要素を削除する方がはるかに高速です(コレクションの実装方法によって異なります)。
  • ループは、(要素リストが UA によって有向リンク リストとして実装されている場合など) チェックする方が速いfirstChild 場合に備えて、チェックを続行します。firstChildlastChild

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.firstChild) {
    myNode.removeChild(myNode.lastChild);
  }
}
<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via lastChild-loop</button>

オプション 2 B: ループしてすべて削除lastElementChild:

  • このアプローチでは、親の 以外のすべての子Element(つまり#textノードと<!-- comments -->) が保持されます (ただし、その子孫は保持されません)。これは、アプリケーション (たとえば、テンプレートの指示を保存するためにインライン HTML コメントを使用する一部のテンプレート システム) では望ましい場合があります。
  • lastElementChildInternet Explorer がIE9 でのみサポートを追加したため、このアプローチは近年まで使用されていませんでした。

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.lastElementChild) {
    myNode.removeChild(myNode.lastElementChild);
  }
}
<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <!-- This comment won't be removed -->
  <span>Hello <!-- This comment WILL be removed --></span>
  <!-- But this one won't. -->
</div>
<button id='doFoo'>Remove via lastElementChild-loop</button>

ボーナス:Element.clearChildrenモンキーパッチ:

  • JavaScript のプロトタイプに新しいメソッド プロパティを追加して、(任意のHTML要素オブジェクト)Elementのみの呼び出しを簡素化できます。el.clearChildren()el
  • (厳密に言えば、これは標準の DOM 機能でも欠落している機能でもないため、ポリフィルではなくモンキー パッチです。モンキー パッチは多くの状況で推奨されないことに注意してください。)

if( typeof Element.prototype.clearChildren === 'undefined' ) {
    Object.defineProperty(Element.prototype, 'clearChildren', {
      configurable: true,
      enumerable: false,
      value: function() {
        while(this.firstChild) this.removeChild(this.lastChild);
      }
    });
}
<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello <!-- This comment WILL be removed --></span>
</div>
<button onclick="this.previousElementSibling.clearChildren()">Remove via monkey-patch</button>

おすすめ記事