JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで子ノードを新しいノードに置き換える方法（replaceChild()の使い方）

JavaScriptで子ノードを新しいノードに置き換えるには、replaceChild()メソッドを使用します。処理の手順としては、まず新しいノードを作成し、その後replaceChild()を呼び出して、古いノードを新しいノードと入れ替えるという流れになります。

構文

node.replaceChild(newnode, oldnode);

replaceChild()は「新しいノード」と「古いノード」の2つの引数を受け取り、指定された古いノードを新しいノードで置き換えます。

使用例

次の例では、最初に順序なしリスト（ul要素）の中に「Boost」「Horlicks」「Maltova」の3つの項目が含まれています。replaceChild()を使って最初の要素を「Bournavita」に置き換えると、出力結果は以下のように「Bournavita」「Horlicks」「Maltova」となります。

<html>
<body>
<ul id="List"><li>Boost</li><li>Horlicks</li><li>Maltova</li></ul>
<script>
    var newnode = document.createTextNode("Bournavita");
    var item = document.getElementById("List").childNodes[0];
    item.replaceChild(newnode, item.childNodes[0]);
</script>
</body>
</html>

実行結果

Bournavita
Horlicks
Maltova

補足：より新しいreplaceWith()メソッド

近年のモダンブラウザでは、より直感的に使えるreplaceWith()メソッドも利用できます。replaceChild()とは異なり、親ノードを意識する必要がなく、置き換えたいノード自身に対して直接呼び出すだけで済むため、コードがシンプルになります。

oldNode.replaceWith(newNode);

用途や対応ブラウザの範囲に応じて、両者を使い分けるとよいでしょう。

  1. JavaScriptで子ノードの数を取得する方法

    JavaScriptでは、children.lengthプロパティを使うことで、要素が持つ子ノード（子要素）の数を簡単に取得できます。この記事では、実際のコード例を使って、その基本的な使い方を解説します。children.lengthとはchildrenは、ある要素の子要素（HTMLコレクション）を返すプロパティです。さらに.lengthを付けることで、子要素の総数を数値として取得できます。例えば、<ul>タグの中にある<li>要素の個数を知りたい場合などに便利です。サンプルコード<!DOCTYPE html> <html lang="ja&

  2. JavaScriptでDOMノードのすべての子要素を一括削除する方法

    JavaScriptでDOMノードからすべての子要素を削除したい場合は、親要素のinnerHTMLに空文字列（''）を設定するのが最もシンプルで手軽な方法です。これにより、その要素の中身が丸ごとクリアされます。 サンプルコード 実際に動作するコードを見てみましょう。ボタンをクリックすると、赤い枠のボックス内の子要素がすべて削除される仕組みです。 <!DOCTYPE html> <html lang="ja"> <head>     <meta charset="U