Element: replaceChildren() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年10月以降、すべてのブラウザーで利用可能です。
Element.replaceChildren() メソッドは、 Node の既存の子ノードを、指定された新しい一連の子で置き換えます。文字列または Node オブジェクトを指定することができます。
構文
replaceChildren(param1)
replaceChildren(param1, param2)
replaceChildren(param1, param2, /* … ,*/ paramN)
引数
param1, …,paramN-
一連の
Nodeオブジェクトまたは文字列で、このElementの既存の子を置き換えるものです。置き換えるオブジェクトが指定されなかった場合は、Elementの子ノードは空になります。
返値
なし (undefined)。
例外
HierarchyRequestErrorDOMException-
ノードツリーの制約に違反したときに発生します。
例
ノードを空にする
replaceChildren() は、ノードからすべての子ノードを取り除くための非常に便利なメカニズムを提供します。引数を指定せずに、親ノードで呼び出すと実現できます。
myNode.replaceChildren();
要素間でノードを移行
replaceChildren() を使えば、冗長なループコードに頼ることなく、要素間で簡単にノードを転送することができます。例えば、パーティーの料理を選択するための簡単なアプリケーションがあるとします。この HTML は次のようなものになるでしょう。
<h2>パーティーの食べ物リスト</h2>
<main>
<div>
<label for="no">No thanks!</label>
<select id="no" multiple size="10">
<option>りんご</option>
<option>オレンジ</option>
<option>ぶどう</option>
<option>バナナ</option>
<option>キウイフルーツ</option>
<option>チョコレートクッキー</option>
<option>ピーナッツクッキー</option>
<option>チョコレートバー</option>
<option>ハムサンド</option>
<option>チーズサンド</option>
<option>ファラフェルサンド</option>
<option>アイスクリーム</option>
<option>ゼリー</option>
<option>人参スティックとフムス</option>
<option>マルゲリータピザ</option>
<option>ぺぱろーにぴざ</option>
<option>ビーガン野菜ピザ</option>
</select>
</div>
<div class="buttons">
<button id="to-yes">"Yes" へ移動 --></button>
<button id="to-no"><-- "No" へ移動</button>
</div>
<div>
<label for="yes">Yes please!</label>
<select id="yes" multiple size="10"></select>
</div>
</main>
簡単な CSS を使って、 2 つの選択リストを並べ、その間にコントロールボタンを配置するのが理にかなっているでしょう。
main {
display: flex;
}
div {
margin-right: 20px;
}
label,
button {
display: block;
}
.buttons {
display: flex;
flex-flow: column;
justify-content: center;
}
select {
width: 200px;
}
ここでやりたいことは、 "yes" ボタンが押されたときに "no" リストで選択されているオプションを "yes" リストに転送し、 "no" ボタンが押されたときに "yes" リストで選択されているオプションを "no" リストに転送することです。
このイベントハンドラーは、転送したい選択済みのオプションを 1 つの定数に、転送先のリスト内の既存のオプションを別の定数にまとめます。そして、オプションを転送するリストに対して replaceChildren() を呼び出し、スプレッド演算子を用いて両方の定数に含まれるすべてのオプションを渡します。
const noSelect = document.getElementById("no");
const yesSelect = document.getElementById("yes");
const noBtn = document.getElementById("to-no");
const yesBtn = document.getElementById("to-yes");
yesBtn.addEventListener("click", () => {
const selectedTransferOptions =
document.querySelectorAll("#no option:checked");
const existingYesOptions = document.querySelectorAll("#yes option");
yesSelect.replaceChildren(...selectedTransferOptions, ...existingYesOptions);
});
noBtn.addEventListener("click", () => {
const selectedTransferOptions = document.querySelectorAll(
"#yes option:checked",
);
const existingNoOptions = document.querySelectorAll("#no option");
noSelect.replaceChildren(...selectedTransferOptions, ...existingNoOptions);
});
最終的な結果は次のようになります。
仕様書
| 仕様書 |
|---|
| DOM # ref-for-dom-parentnode-replacechildren① |