Здравствуйте, ребята, есть ли способ сохранить часть (поддерево) DOM для дальнейшего использования?

Я хочу добиться следующего:

Я создаю две формы с чистым JavaScript.

form1 = document.createElement('form1');
input = document.createElement('input');
input.addEventListener(Listener);
form1.appendChild('input');
....

Формы строятся одинаково.

Где-то у меня есть div на моей странице, где я могу добавить appendChild ('form 1');

Предположим, у меня также есть кнопка на моей странице. Кнопка должна переключаться между формами. Поэтому, когда я нажимаю его, я хочу сохранить СОСТОЯНИЕ формы1 (я хочу сохранить прикрепленные списки событий, а также тексты, введенные пользователем в поля ввода), например, в переменной и удалить (отсоединить) после формы1 из DOM и связать форму2.

Я знаю, что это можно решить с помощью css и переключать формы, делая одну скрытую, а другую видимой, но на самом деле я заинтересован в сохранении поддерева DOM в качестве снимка.

Я надеюсь, вы понимаете мой вопрос, так как английский не мой родной язык.

Заранее спасибо.

0
panwork 24 Апр 2017 в 14:54

2 ответа

Лучший ответ

Кнопка должна переключаться между формами. Поэтому, когда я нажимаю его, я хочу СОХРАНИТЬ СОСТОЯНИЕ формы1 (я хочу сохранить прикрепленные списки событий, а также тексты, которые пользователь вводил в полях ввода)

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

Осторожно : НЕ используйте это на производстве. Это не рекомендуется. Используйте простые элементы UI / UX, чтобы показать / скрыть части вашей страницы посредством CSS и / или Javascript. Пример ниже предназначен исключительно для демонстрации того, как все работает.

Храните ссылки на ваши формы в переменных. Используйте appendChild, чтобы добавить их в свой контейнер. Перепишите innerHTML, чтобы удалить элемент из контейнера, и снова используйте appendChild, чтобы поменять местами с другой переменной. Все обработчики событий и состояния входных элементов будут сохранены как есть, поскольку переменная является ссылкой.

Пример: ( Введите различные значения во входах, чтобы увидеть состояние при переключении. )

var forms = [], 
    btn = document.getElementById('btn'), 
    display = document.getElementById('display'), 
    result = document.getElementById('result'), 
    currentForm = 0;
;

start();

function start() {
  btn.addEventListener('click', switcher);
  forms[0] = createForm(0);
  forms[1] = createForm(1);
  display.appendChild(forms[0]);
}

function switcher() { 
  display.innerHTML = '';
  if (currentForm === 0) {
    display.appendChild(forms[++currentForm]);
  } else {
    display.appendChild(forms[--currentForm]);
  }
}

function createForm(idx) { 
  var frm, inp, lbl;
  frm = document.createElement('form');
  inp = document.createElement('input');
  inp.addEventListener('input', show);
  lbl = document.createElement('label');
  lbl.textContent = "Form # " + (idx + 1) + ": ";
  frm.appendChild(lbl);
  frm.appendChild(inp);
  return frm;
}

function show(e) { result.textContent = e.target.value; }
<button id="btn">Switch</button>
<hr>
<div id="display"></div>
<hr>
<span>Keeping typing in the input above: </span><span id="result"></span>

Как упоминалось ранее, используйте фрагмент документа для хранения фрагментов, которые вы можете обратитесь позже.

0
Abhitalks 24 Апр 2017 в 12:32

Если я правильно понимаю ваш вопрос, Document.createDocumentFragment () не слишком подходит для вашего случая, потому что вам нужно сохранить изменения после того, как фрагментированный фрагмент документа будет вставлен в средство визуализации (в DOM «реальной» страницы)? Если это так, то вы можете попробовать использовать экспериментальные createHTMLDocument () и сохраните его где-нибудь (например, в localStorage), что даст вам возможность синхронизировать оба документа - ваш «настоящий» и его копию. Но на самом деле этот вопрос включает также избегание лишних перерисовок / перекомпоновки и т. Д., Так что это хороший момент, чтобы погрузиться в документацию;)

0
HopeNick 24 Апр 2017 в 12:24