Dokument: moveBefore() Methode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die moveBefore() Methode der Document Schnittstelle bewegt einen gegebenen Node innerhalb des Document DOM-Knotens als direktes Kind vor einen angegebenen Referenzknoten.

Syntax

moveBefore(movedNode, referenceNode)

Parameter

movedNode: Ein Node, der den zu bewegenden Knoten darstellt. Beachten Sie, dass dies ein Element oder ein CharacterData Knoten sein muss.
referenceNode: Ein Node, vor dem movedNode bewegt wird, oder null. Wenn der Wert null ist, wird movedNode am Ende der Kindknoten des Document eingefügt.

Ausnahmen

HierarchyRequestError TypeError

Wird in einer der folgenden Situationen ausgelöst:

Der angegebene movedNode ist nicht Teil dieses Dokuments.
Der angegebene movedNode ist kein Element oder CharacterData Knoten.
Sie versuchen, movedNode vor dem doctype des Dokuments zu bewegen (dargestellt durch ein DocumentType Objekt).

NotFoundError TypeError

Der angegebene referenceNode ist kein Kind des Knotens, auf den Sie moveBefore() aufrufen, das heißt, des Knotens, in den Sie movedNode bewegen möchten.

TypeError TypeError

Das zweite Argument wurde nicht übergeben.

Die moveBefore() Methode bewegt einen gegebenen Knoten an eine neue Stelle im DOM. Sie bietet eine ähnliche Funktionalität wie die Node.insertBefore() Methode, außer dass sie den Knoten nicht entfernt und dann neu einfügt. Das bedeutet, dass der Zustand des Knotens (der zurückgesetzt würde, wenn man ihn mit insertBefore() und ähnlichen Mechanismen bewegt) nach der Verschiebung erhalten bleibt. Dies umfasst:

Animation und Transition Zustand.
Ladezustand des <iframe>.
Interaktivitätszustände (zum Beispiel, :focus und :active).
Fullscreen Elementzustand.
Offen/geschlossener Zustand von Popovers.
Modalzustand von <dialog> Elementen (Modale Dialoge werden nicht geschlossen).

Der Abspielzustand von <video> und <audio> Elementen ist in der obigen Liste nicht enthalten, da diese Elemente ihren Zustand behalten, wenn sie entfernt und erneut eingefügt werden, unabhängig vom verwendeten Mechanismus.

Wenn Änderungen am DOM mit einem MutationObserver beobachtet werden, werden Knoten, die mit moveBefore() bewegt wurden, mit einem entfernten Knoten und einem hinzugefügten Knoten aufgezeichnet.

Die moveBefore() Methode ist nicht besonders nützlich, wenn sie auf den Document Knoten aufgerufen wird. Es gibt einige nicht-elementare Anwendungen dafür, zum Beispiel könnten Sie moveBefore() verwenden, um Kommentar-Knoten um die Wurzel des Document zu bewegen. Sie werden jedoch viel eher einen Nutzen dafür finden, wenn Sie es auf einem individuellen DocumentFragment oder Element aufrufen — siehe DocumentFragment.moveBefore() und Element.moveBefore().

Einschränkungen von `moveBefore()`

Es gibt einige Einschränkungen, die bei der Verwendung von moveBefore() zu beachten sind:

Es kann nur verwendet werden, um einen Knoten innerhalb desselben Dokuments zu verschieben.
Es funktioniert nicht, wenn Sie versuchen, einen Knoten, der nicht mit dem DOM verbunden ist, zu einem bereits verbundenen Elternteil zu bewegen, oder umgekehrt.

In solchen Fällen schlägt moveBefore() mit einer HierarchyRequestError Ausnahme fehl. Wenn die oben genannten Einschränkungen Anforderungen für Ihren speziellen Anwendungsfall sind, sollten Sie stattdessen Node.insertBefore() verwenden oder try...catch, um die Fehler zu behandeln, die in solchen Fällen auftreten.

Beispiele

Verschieben eines Kommentarknotens mit `moveBefore()`

In dieser Demo zeigen wir, wie man document.moveBefore() verwendet, um einen Kommentarknoten innerhalb des DOM zu verschieben.

HTML

Das HTML ist eine minimale Vorlage, die einen Kommentar im <body> enthält.

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>document.moveBefore() example</title>
  </head>
  <body>
    <!-- This comment should be at the end of the document -->
    <p>Some content</p>
  </body>
</html>

JavaScript

In unserem Skript durchlaufen wir alle childNodes des <body> Elements. Wenn wir einen Knoten mit einem nodeType Wert von 8 (was auf einen Kommentarknoten hinweist) finden, speichern wir eine Referenz dazu in einer Variablen namens commentNode. Dann rufen wir document.moveBefore() auf, wobei wir angeben, dass wir den Kommentarknoten verschieben möchten, und ein zweites Argument von null, um unseren Kommentar am Ende der Kindknoten des Document einzufügen.

let commentNode;

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

document.moveBefore(commentNode, null);

Ergebnis

Das gerenderte Beispiel sieht so aus:

Wenn Sie das Beispiel mit den Entwicklerwerkzeugen Ihres Browsers inspizieren, werden Sie bemerken, dass der Kommentar an das Ende des Dokuments, nach dem abschließenden </html> Tag, verschoben wurde.