このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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ノードでなければなりません。referenceNodeNodeであり、movedNodeの移動先はこの前になります。またはnullです。この値がnullであった場合、movedNodeはDocumentの子要素の末尾に挿入されます。
返値
なし (undefined)。
例外
HierarchyRequestErrorTypeError以下のいずれかの場面で発生します。
- 指定された
movedNodeがこの文書に属していない。 - 指定された
movedNodeはElementまたはCharacterDataノードではない。 movedNodeをこの文書のdoctype （DocumentTypeオブジェクトで表される）の前に移動しようとした。
- 指定された
NotFoundErrorTypeError指定された
referenceNodeは、moveBefore()を呼び出したノードの子ノードではない。つまり、movedNodeの移動先ノードの子ノードではない。TypeErrorTypeError2 つ目の引数が指定されていない。
解説
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 |