从DOM分离内容

Question

通常，页面上有多种形式的监听器。 这些监听器适用于所有文档（例如jQuery的$（document）.on（“ click”，“”）），目前无法更改。我还需要在模式中显示完全相同的（按结构）形式，并且该表单共享屏幕上主要表单的所有js代码，因此这些表单不能同时使用，当它们同时处于活动状态时，会导致第二个表单中的按钮单击（例如，触发第一个表单中的元素），jQuery的分离几乎是最简单的解决方案为此，但它也从屏幕上删除了所有内容，我想避免这种情况。

有什么方法可以从HTML DOM分离内容，而无需实际从屏幕上删除内容？

我需要临时禁用页面上某些内容的所有事件侦听器，并将其从js库选择器搜索中删除（因此，例如jQuery应该找不到任何内容），但内容仍应出现在屏幕上。

这实际上可行吗？

Answer 1

简短的答案：你不能

一些导致接近目标的机会：

1. 您可以尝试使用shadow dom删除对js库选择器的直接访问：他们将需要对选择器使用::shadow后缀来查找您的内容。

2. 分离您的内容，克隆它，然后重新附加它

    var $yourcontent = $(".yourcontentselector").detach(); var $clone = $yourcontent.clone(); //clone the content but not events $clone.appendTo("body"); //later $clone.remove(); $yourcontent.appendTo("body"); 

我假设您正在使用JQuery，并且您的内容直接进入正文。 希望能有所帮助

Answer 2

您可以将DOM 深度克隆到iframe中，并显示它，直到需要重新附加/取消隐藏原始内容为止。 您还必须传送样式表，因为浏览器尚不支持Seamless属性。

如果目标元素与正确的选择器匹配，则另一个选择可能是在文档级别附加一个捕获事件侦听器并停止事件传播。 但这不会停止选择器的查找。 为此，您可以临时更改节点ID或类。

我还需要在模式中显示完全相同的表单，并且该表单共享屏幕上主要表单的所有js代码。 所以这些形式不能一起工作

好的，这些表单应该具有唯一的名称/ ID，具有相同名称或ID的两种形式违反了HTML spec 。

而且，如果它们确实具有唯一的ID或名称，则可以使您的逻辑ID为基础。

Answer 3

我认为您可能需要：

  var element = document.getElementById('element');
  var elementParent = document.getElementById('element-parent');
  elClone = element.cloneNode(true);
  console.log('cloned node', elClone);
  elementParent.removeChild(element);
  console.log('after removal: ', document.getElementById('element'));

   // ..... some time later

  elementParent.appendChild(elClone);
  console.log('after appending:' , document.getElementById('element'));

这将从实时选择中删除所有事件侦听器和“隐藏”元素。