Question

下面两个函数做同样的事情 - 首先他们复制一个元素然后清除正文然后再添加元素。我的问题是哪一个更好，在什么条件下cloneNode使用函数或另一个不起作用？

使用querySelector

function noahArc(animal) {
  // Preserve the poor animal and its children
  var arc = document.querySelector(animal);

  // Flood the entire body with rage, water and thunder
  document.body.innerHTML = "";

  // Restore the preserved animal into the post-apocalyptic world
  document.body.appendChild(arc);
}

noahArc('.asd');

使用cloneNode

function noahArc(animal) {
  // Preserve the poor animal and its children
  var arc = document.getElementsByClassName(animal)[0].cloneNode(true);

  // Flood the entire body with rage, water and thunder
  document.body.innerHTML = "";

  // Restore the preserved animal into the post-apocalyptic world
  document.body.appendChild(arc);
}

noahArc('asd');

Answer 1

首先，为避免疑问：querySelector不会克隆元素。它只是为您提供了已存在的元素的引用。在非错误的浏览器中，即使您在获得引用后擦除了主体的锥体，该引用仍然有效。它只是意味着元素不再存在于文档中。

其次，您的修改和各种评论表明您的代码存在差异，具体取决于您使用querySelector还是getElementsByClassName来选择元素是不正确的。在显示的代码中，它没有任何区别。您的示例中唯一的结果差异是您是否克隆节点。

所以，看看这两个例子：

你的第一个例子将在某些版本的 IE中失败，因为当你分配给它的祖先的innerHTML时，它会擦除后代元素的内容时出现的错误你有一个对后代元素的引用。 不应该失败，但它会失败。（这个错误导致我去年某个时候的小时调试时间......）我不认为Edge有这个错误。我刚刚使用此测试验证了IE11的问题：

＆＃13;

function noahArc(animal) {
  var arc = document.querySelector(animal);
  document.body.innerHTML = "";
  document.body.appendChild(arc);
}

noahArc('.asd');
console.log("Done, you should still see 'this is the div' above, but you won't in IE");

＆＃13;

<div class="asd">this is the div</div>

＆＃13;

除此之外，＆＃34;更好。＆＃34;这取决于你想做什么。

您的第一个示例尝试在文档中保留相同的元素（可能附加了事件处理程序）。它不会复制，只能在其工作的浏览器上工作，因为原始文件是通过分配给它的祖先innerHTML而从文档中删除的。

你的第二个例子创建了元素的副本（它上面没有事件处理程序）。

您使用的内容取决于您希望实现的目标以及您希望支持的浏览器。

为什么在使用querySelector克隆节点时可以使用cloneNode？

1 个答案: