DocumentFragment: replaceChildren() メソッド

DocumentFragment.replaceChildren() メソッドは、DocumentFragment の既存の子を指定された新しい子の集合で置き換えます。これらは文字列または Node オブジェクトです。

構文

js
replaceChildren(param1)
replaceChildren(param1, param2)
replaceChildren(param1, param2, /* … ,*/ paramN)

引数

param1, …, paramN

一連の Node または文字列で、これで DocumentFragment の既存の子を置き換えます。置換するオブジェクトが指定されなかった場合、DocumentFragment は子ノードがすべて空になります。

返値

なし (undefined)。

例外

HierarchyRequestError DOMException

ノードツリーの制約に違反していた場合に発生します。

例

文書フラグメントを空にする

replaceChildren() は文書フラグメントの子ノードをすべて空にする、とても便利な方法を提供します。引数を指定せずに呼び出せばよいのです。

js
let fragment = new DocumentFragment();
let div = document.createElement("div");
let p = document.createElement("p");
fragment.append(p);
fragment.prepend(div);

fragment.children; // HTMLCollection [<div>, <p>]

fragment.replaceChildren();

fragment.children; // HTMLCollection []

仕様書

Specification
DOM Standard
# ref-for-dom-parentnode-replacechildren①

ブラウザーの互換性

BCD tables only load in the browser

関連情報