1. 開発者向けのウェブ技術
  2. Web API
  3. Document
  4. moveBefore()

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Document: moveBefore() メソッド

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

Want more support for this feature? Tell us why.

moveBefore() は Document インターフェイスのメソッドで、指定された Node を DOM ノード Document 内の直接の子として、指定された参照ノードの前に移動します。

構文

js
moveBefore(movedNode, referenceNode)

引数

movedNode

移動するノードを表す Node。なお、これは Element または CharacterData ノードでなければなりません。

referenceNode

Node であり、 movedNode の移動先はこの前になります。または null です。この値が null であった場合、movedNode は Document の子要素の末尾に挿入されます。

返値

なし (undefined)。

例外

HierarchyRequestError TypeError

以下のいずれかの場面で発生します。

  • 指定された movedNode がこの文書に属していない。
  • 指定された movedNode は Element または CharacterData ノードではない。
  • movedNode をこの文書の doctype （DocumentType オブジェクトで表される）の前に移動しようとした。
NotFoundError TypeError

指定された referenceNode は、moveBefore() を呼び出したノードの子ノードではない。つまり、movedNode の移動先ノードの子ノードではない。

TypeError TypeError

2 つ目の引数が指定されていない。

解説

moveBefore() メソッドは、指定されたノードをこの DOM 内の新しい場所に移動します。これは Node.insertBefore() メソッドと同様の機能を提供しますが、ノードを除去せずに、再挿入される点が異なります。つまり、 insertBefore() や類似のメカニズムで移動した場合にリセットされる、次のようなノードの状態が、移動後も保持されます。

<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> 内にコメントがあるのが特徴です。

html
<!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 の子ノードの末尾に挿入します。

js
let commentNode;

for (node of document.querySelector("body").childNodes) {
  if (node.nodeType === 8) {
    commentNode = node;
  }
}

document.moveBefore(commentNode, null);

結果

レンダリングされた例は以下のようになります。

ブラウザーの開発者ツールでこの例を調べると、コメントが文書の終わり、終了タグ </html> の後に移動されていることに気づくでしょう。

仕様書

仕様書
DOM
# dom-parentnode-movebefore

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告