DocumentFragment: replaceChildren() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

関連情報