Javascript DOM-Baum doppelt für Manipulation

Question

Da der DOM-Baum einer Seite aktiv ist und immer im Browser widergespiegelt wird, was ist der beste Weg, um diesen DOM-Baum für einen bestimmten Zweck zu modifizieren, ohne den tatsächlich gerenderten Baum zu beeinflussen? Nehmen wir an, mein Ziel ist es, bestimmte Kinderknoten zu tauschen und zu sehen, wie ähnlich der DOM-Baum noch ist.

Ist das Erstellen eines doppelten Baumes die einzige Lösung? Wenn ja, gibt es eine Funktion, dies zu tun? Oder muss ich meine eigene Funktion schreiben, um eine doppelte Kopie des Baumes zu erstellen. Ich brauche nicht alle Attribute des Elementobjekts, also kann ich ein einfacheres Objekt mit ein paar Attributen erstellen, die auf die Geschwister und Kinder zeigen.

Answer 1

Sie können document.cloneNode(true) oder die gleiche Methode auf einem anderen Knoten verwenden. cloneNode klont jeden Knoten, und die true bedeutet, dass es rekursiv (tief) sein sollte. Offensichtlich könnte dies erhebliche Leistungskosten auf einer großen Seite haben.

Answer 2

Vielleicht eine der vielen großen JavaScript-Bibliotheken, z. jQuery. Damit können Sie Teile oder sogar das gesamte DOM eines Dokuments ganz einfach kopieren und vom DOM ablegen lassen.

Wenn Sie Ihre eigene Lösung rollen müssen, ist ein guter Punkt zu beginnen, Resig's Beitrag auf Dokumentfragmente: http://ejohn.org/blog/dom-documentfragments/.

Viel Glück.

Answer 3

Wenn Sie bereit sind, jQuery zu verwenden:

var clone = $("selectorForSomeElement(s)").clone(); 

clone jetzt ist eine Kopie der Elementstruktur.

Sie können dann von Klon arbeiten, um zu tun, was Sie experimentieren mögen.