Javascript DOM дерево дубликат для манипуляции

Question

Поскольку дерево DOM страницы активно и всегда отображается в браузере, как лучше всего модифицировать это дерево DOM для каких-либо целей, не затрагивая фактическое отображаемое дерево?Допустим, моя цель - поменять местами определенные дочерние узлы и посмотреть, насколько похожее дерево DOM все еще остается.

Является ли создание дублированного дерева единственным решением?Если это так, есть ли функция для этого?Или мне нужно написать свою собственную функцию для создания дубликата дерева.Мне не понадобятся все атрибуты объекта элемента, поэтому я могу создать более простой объект с несколькими атрибутами, которые указывают на братьев и сестер и детей.

Answer 1

Вы можете использовать document.cloneNode(true) или тот же метод на другом узле. cloneNode клонирует любой узел, а true означает, что он должен быть рекурсивным (глубоким). Очевидно, что это может привести к значительным потерям производительности на большой странице.

Answer 2

Если вы хотите использовать jQuery:

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

clone теперь является копией структуры элемента.

Затем вы можете работать с клоном, чтобы делать любые эксперименты, которые вам нравятся.

Answer 3

Возможно, рассмотрим одну из множества замечательных библиотек JavaScript, например, JQuery. Это позволяет вам легко копировать части или даже весь DOM документа и сохранять это сохраненное приложение из DOM.

Если вам нужно накатить собственное решение, для начала стоит написать сообщение Ресига о фрагментах документа: http://ejohn.org/blog/dom-documentfragments/.

Удачи.