javascript - How can I convert an Array of elements into a NodeList? - Stack Overflow

admin管理员组

文章数量:1287497

First thing's first: this isn't asking to how to turn a NodeList into an Array. This is the opposite.

For consistency's sake, I would like to create a function that returns a NodeList, just like document.querySelectorAll() does.

Here's my current code:

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

However this removes the original elements from the DOM!

How can I make a NodeList in a non-destructive fashion?

First thing's first: this isn't asking to how to turn a NodeList into an Array. This is the opposite.

For consistency's sake, I would like to create a function that returns a NodeList, just like document.querySelectorAll() does.

Here's my current code:

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

However this removes the original elements from the DOM!

How can I make a NodeList in a non-destructive fashion?

• javascript
• dom

Share Improve this question Follow edited Nov 16, 2022 at 14:46 mikemaccana asked Jul 21, 2014 at 16:14 mikemaccanamikemaccana 124k110110 gold badges430430 silver badges532532 bronze badges 6

• Hi @DominicTobias, I mean the nodes inside arrayOfNodes (generated previously) are being removed from the DOM. – mikemaccana Commented Jul 21, 2014 at 16:17
• 1 Not sure why you would need a nodeList, but here you go -> jsfiddle/dzu2m – adeneo Commented Jul 21, 2014 at 17:28
• @adeneo Hrm, adding a temporary class to each element, running querySelectorAll() and then removing the class. It works, but it's obviously a little hacky. – mikemaccana Commented Jul 22, 2014 at 8:23
• You can't really create a nodeList, only native methods can, so the only way to get a nodeList with DOM elements is to select them, and adding something unique to the elements is the easiest way to do that. – adeneo Commented Jul 22, 2014 at 8:27
• @adeneo do you have a citation for that? If so add it as an answer. – mikemaccana Commented Jul 22, 2014 at 17:55

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

You would need to clone the node.

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

Note pass true to cloneNode to make a deep clone.

Use DocumentFragment's constructor and return fragment's NodeList:

const createNodeList = (array) => {
    const fragment = new DocumentFragment();
    for (const item of array) {
        fragment.appendChild(item);
    }
    return fragment.childNodes;
};


// Usage example:

const list = createNodeList([
    document.createElement('div'),
    document.createElement('div'),
    document.createElement('div')
    // ...
]);

Based on: https://dirask./posts/JavaScript-create-new-NodeList-from-node-array-D7d6Bp

本文标签： javascriptHow can I convert an Array of elements into a NodeListStack Overflow