Question

Hello Guys有没有任何方法可以保存DOM的一部分（子树）供以后使用？

我想要实现的目标如下：

我使用纯javascript创建了两个表单。

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

表格的构建方式相同。

某处我在我的页面中有一个div，我将appendChild（'form1'）;

假设我的页面上还有一个按钮。按钮应在表单之间切换。因此，当我推送它时，我想保存form1的状态（我希望保持事件监视器的附加以及用户在输入字段中输入的文本），例如在变量中，并从DOM中删除（分离）form1之后的bind form2。

我知道这可以通过css解决并通过使一个隐藏而另一个可见来切换表单但我实际上有兴趣将DOM的子树保存为快照。

我希望你理解我的问题，因为英语不是我的母语。

提前致谢。

Answer 1

如果我正确理解您的问题，Document.createDocumentFragment()在您的情况下不太合适，因为您需要在将碎片文档插入渲染器（进入“真实”页面的DOM）后保留更改？如果是这样，那么您可以尝试使用实验createHTMLDocument()并将其存储在某处（例如localStorage），这使您能够同步两个文档 - 您的“真实”文档和它的副本。但实际上这个问题还包括避免多余的重绘/重排等，所以这是一个深入了解文档的好时机;）

Answer 2

按钮应在表单之间切换。所以，当我推动它，我想要保存form1的状态（我想保持事件执行者附加以及用户在输入字段中输入的文本）

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>

如前所述，使用document fragment存储您稍后可以参考的片段。

保存dom的子集以供以后使用保留eventlisteners和输入的值

2 个答案: