如何将元素数组转换为 NodeList？答案

【问题标题】：How can I convert an Array of elements into a NodeList?如何将元素数组转换为 NodeList？
【发布时间】：2014-09-12 05:36:29
【问题描述】：

首先要做的事：这不是问如何将 NodeList 变成一个数组。这是相反的。

为了保持一致性，我想创建一个返回 NodeList 的函数，就像 document.querySelectorAll() 所做的那样。

这是我当前的代码：

var toNodeList = function(arrayOfNodes){
  var fragment = document.createDocumentFragment();
  arrayOfNodes.forEach(function(item){
    fragment.appendChild(item);
  });
  return fragment.childNodes;
};

但是，这会从 DOM 中删除原始元素！

如何以无损方式制作NodeList？

【问题讨论】：

嗨@DominicTobias，我的意思是arrayOfNodes（之前生成的）内的节点正在从DOM中删除。
不知道为什么你需要一个 nodeList，但是你去 -> jsfiddle.net/dzu2m
@adeneo Hrm，为每个元素添加一个临时类，运行 querySelectorAll() 然后删除该类。它有效，但显然有点hacky。
你不能真正创建一个nodeList，只有native方法可以，所以获得一个带有DOM元素的nodeList的唯一方法就是选择它们，给元素添加一些独特的东西是最简单的方法这样做。
@adeneo 你有引用吗？如果是这样，请将其添加为答案。

标签： javascript dom

【解决方案1】：

您需要克隆节点。

var toNodeList = function(arrayOfNodes){
  var fragment = document.createDocumentFragment();
  arrayOfNodes.forEach(function(item){
    fragment.appendChild(item.cloneNode());
  });
  return fragment.childNodes;
};

注意将true 传递给cloneNode 以进行深度克隆。

【讨论】：

刚刚发现cloneNode()，同时您回答了这个问题。谢谢！
请注意，这会返回克隆，因此您不再使用 DOM 中的元素
啊@adeneo，你是对的。由于这样做的目的是引用原始元素以供以后操作，.cloneNode 将不起作用。将保持此打开状态，看看是否有一种方法可以让 NodeList 具有对原始节点的引用（例如，就像 document.querySelectorAll() 返回的内容）。
@mikemaccana 我想知道你是否想要这样，但是不使用querySelectorAll 的目的是什么？
@dominic 我不希望返回一个包含 DOM 中与选择器匹配的每个节点的 NodeList，只返回一个 NodeList（基于其他条件）。