Javascript 当我可以使用querySelector克隆节点时，为什么要使用cloneNode？

下面两个函数做的是相同的事情——首先复制一个元素，然后清除主体，然后将元素添加回来。我的问题是哪一个更好，在什么条件下cloneNode使用函数还是另一个不起作用

使用查询选择器

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');

使用克隆节点

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');

---

首先，为了避免疑问：

querySelector

不克隆元素。它只提供对已经存在的元素的引用。在非bug浏览器中，即使在获得引用后擦除body的元素，该引用仍然有效。它只是意味着元素不再存在于文档中

其次，您的编辑和各种注释表明您的代码中存在差异，这取决于您是使用

querySelector

还是

getElementsByClassName

来选择元素，这是不正确的。在显示的代码中，它没有任何区别。示例中结果的唯一区别在于是否克隆节点

那么，看看这两个例子：

您的第一个示例在IE的某些版本中会失败，因为它有一个bug，当您分配给其祖先的

innerHTML

时，它会清除子元素的内容，即使您有对子元素的引用。它不应该失败，但会的。（去年某个时候，这个bug花费了我几个小时的调试时间…）我认为Edge没有这个bug。我刚刚验证了IE11使用此测试仍然存在问题：

功能noahArc（动物）{
var arc=文件查询选择器（动物）；
document.body.innerHTML=“”；
document.body.appendChild（arc）；
}
noahArc（“.asd”）；
log（“完成了，您仍然应该看到上面的'thisathediv'，但您不会在IE中看到它”）
这是div
首先，为了避免疑问：
querySelector
不克隆元素。它只提供对已经存在的元素的引用。在非bug浏览器中，即使在获得引用后擦除body的元素，该引用仍然有效。它只是意味着元素不再存在于文档中

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

那么，看看这两个例子：

您的第一个示例在IE的某些版本中会失败，因为它有一个bug，当您分配给其祖先的
innerHTML
时，它会清除子元素的内容，即使您有对子元素的引用。它不应该失败，但会的。（去年某个时候，这个bug花费了我几个小时的调试时间…）我认为Edge没有这个bug。我刚刚验证了IE11使用此测试仍然存在问题：


功能noahArc（动物）{
var arc=文件查询选择器（动物）；
document.body.innerHTML=“”；
document.body.appendChild（arc）；
}
noahArc（“.asd”）；
log（“完成了，您仍然应该看到上面的'thisathediv'，但您不会在IE中看到它”）
这是您在两种解决方案中使用的div
querySelector
？我不知道在您实际上不需要节点的第二个副本的任何情况下，为什么要使用
.cloneNode（）
querySelector
和
getElementsByClassName
似乎与您的问题无关。@阿尔沙德汗：您上面关于
getElementsByClassName
的陈述是错误的。是的，
getElementsByClassName
中的节点列表是活动的，但这并不重要；当您清除body的内容时，您已经从节点列表中检索到元素并释放了对节点列表的引用。在该代码中使用哪一个都没有区别。不能使用
querySelector
克隆节点。它只选择，不克隆。您的问题说明分配
querySelector（…）
的结果与
getElementsByClassName（…）[0]相同。克隆节点（true）
。事实并非如此。如果删除
.cloneNode（true）
，则它们完全相同，因为它们都为您提供了
asd
类中找到的第一个元素。换句话说，它们都只是进行DOM选择，而没有一个复制元素本身。当您添加
.cloneNode（true）
时，您就是在制作节点的副本，但无论您使用什么方法来选择节点，这都是真的。您在两种解决方案中都使用
querySelector
？我不知道在您实际上不需要节点的第二个副本的任何情况下，为什么要使用
.cloneNode（）
querySelector
和
getElementsByClassName
似乎与您的问题无关。@阿尔沙德汗：您上面关于
getElementsByClassName
的陈述是错误的。是的，
getElementsByClassName
中的节点列表是活动的，但这并不重要；当您清除body的内容时，您已经从节点列表中检索到元素并释放了对节点列表的引用。在该代码中使用哪一个都没有区别。不能使用
querySelector
克隆节点。它只选择，不克隆。您的问题说明分配
querySelector（…）
的结果与
getElementsByClassName（…）[0]相同。克隆节点（true）
。事实并非如此。如果删除
.cloneNode（true）
，则它们完全相同，因为它们都为您提供了
asd
类中找到的第一个元素。换句话说，它们都只是进行DOM选择，而没有一个复制元素本身。