Document: moveBefore() メソッド
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
moveBefore() は Document インターフェイスのメソッドで、指定された Node を DOM ノード Document 内の直接の子として、指定された参照ノードの前に移動します。
構文
moveBefore(movedNode, referenceNode)
引数
movedNode-
移動するノードを表す
Node。なお、これはElementまたはCharacterDataノードでなければなりません。 referenceNode-
Nodeであり、movedNodeの移動先はこの前になります。またはnullです。この値がnullであった場合、movedNodeはDocumentの子要素の末尾に挿入されます。
返値
なし (undefined)。
例外
HierarchyRequestErrorTypeError-
以下のいずれかの場面で発生します。
- 指定された
movedNodeがこの文書に属していない。 - 指定された
movedNodeはElementまたはCharacterDataノードではない。 movedNodeをこの文書の doctype （DocumentTypeオブジェクトで表される）の前に移動しようとした。
- 指定された
NotFoundErrorTypeError-
指定された
referenceNodeは、moveBefore()を呼び出したノードの子ノードではない。つまり、movedNodeの移動先ノードの子ノードではない。 TypeErrorTypeError-
2 つ目の引数が指定されていない。
解説
moveBefore() メソッドは、指定されたノードをこの DOM 内の新しい場所に移動します。これは Node.insertBefore() メソッドと同様の機能を提供しますが、ノードを除去せずに、再挿入される点が異なります。つまり、 insertBefore() や類似のメカニズムで移動した場合にリセットされる、次のようなノードの状態が、移動後も保持されます。
- アニメーションやトランジションの状態。
<iframe>の読み込み状態。- 操作の状態（例えば
:focusや:active）。 - 要素の全画面の状態。
- ポップオーバーの開閉状態。
<dialog>要素のモーダル状態（モーダルダイアログは閉じられません）。
<video> および <audio> 要素の再生状態は、以上の一覧には含まれません。これらの要素は、使用される仕組みに関わらず、除去され再挿入された後も状態を保持するからです。
MutationObserver を使用して DOM の変更を監視する場合、moveBefore() で移動されたノードは除去されたノードと追加されたノードとして記録されます。
moveBefore() メソッドは、Document ノードに対して呼び出しても特に有用ではありません。要素以外の用途もいくつかあり、例えば moveBefore() を使用して Document のルート周辺のコメントノードを移動させることが可能です。しかし、個々の DocumentFragment や Element に対してそれを呼び出す用途を探す方がはるかに一般的です。詳細は DocumentFragment.moveBefore() および Element.moveBefore() を参照してください。
moveBefore() の制約
moveBefore() を使用する際には、いくつか留意すべき制約があります。
- 同じ文書内でノードを移動する場合にのみ、動作します。
- DOM に接続されていないノードを既に接続済みの親ノードに移そうとした場合、またはその逆の場合、動作しません。
このような場合、moveBefore() は HierarchyRequestError 例外で失敗します。上記の制約が具体的な用途で必要となる場合、代わりに Node.insertBefore() を使用するか、try...catch を使用して、このようなケースで発生するエラーを処理する必要があります。
例
moveBefore() でコメントノードを移動
このデモでは、document.moveBefore() を使用してコメントノードをDOM内で移動する方法を示して表示させます。
HTML
この HTML は最小限のテンプレートであり、<body> 内にコメントがあるのが特徴です。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>document.moveBefore() の例</title>
</head>
<body>
<!-- このコメントは文書の終わりに置くべきである -->
<p>コンテンツ</p>
</body>
</html>
JavaScript
このスクリプトでは、<body> 要素のすべて childNodes をループ処理します。nodeType の値が 8（コメントノードを示す）のノードを見つけた場合、その参照を commentNode という変数に保存します。次に、document.moveBefore() を呼び出し、コメントノードを移動されることを指定し、2 つ目の引数として null を指定して、コメントを Document の子ノードの末尾に挿入します。
let commentNode;
for (node of document.querySelector("body").childNodes) {
if (node.nodeType === 8) {
commentNode = node;
}
}
document.moveBefore(commentNode, null);
結果
レンダリングされた例は以下のようになります。
ブラウザーの開発者ツールでこの例を調べると、コメントが文書の終わり、終了タグ </html> の後に移動されていることに気づくでしょう。
仕様書
| Specification |
|---|
| DOM # dom-parentnode-movebefore |
ブラウザーの互換性
Loading…