Javascript DOM tree duplicate for manipulation

Question

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

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

Answer 1

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

Answer 2

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

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

Удачи.

Answer 3

Если вы готовы использовать JQuery:

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

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

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