How to create NodeList object from two or more DOMNodes
Asked Answered
W

3

1

For example I have two DOMNodes: let node1 = document.querySelector('#node-1'); let node2 = document.querySelector('#node-2');

How do I combine them into a NodeList object? Is there an easy solution like array.push(item)?

Wickiup answered 13/3, 2016 at 11:47 Comment(0)
S
6

You can add both nodes into a document fragment:

var docFragment = document.createDocumentFragment();
docFragment.appendChild(node1);
docFragment.appendChild(node2);

And if you really want them in a NodeList do:

var list = docFragment.querySelectorAll('*');

The down side to this is that as soon as you append the nodes to the document fragment you remove them from the actual document.

Saire answered 13/3, 2016 at 11:53 Comment(2)
Is there a difference between document fragment and node list? In the API.Wickiup
a document fragment technically holds an HTMLCollection, but for most practical uses it's the same as a NodeList.Saire
E
2

Consider this as an addition to Orr Siloni's answer:

If we don't want the node to be removed from the DOM, we can append a copy of the node using node.cloneNode().

Elana answered 18/10, 2018 at 7:4 Comment(0)
S
1
var nList = document.querySelectorAll('[id^="node"]');

Collect all nodes with an id that starts with "node".

var nList = document.querySelectorAll('[id^="node"]');
for (var i = 0; i < nList.length; i++) {
  var node = nList[i].id;
  console.log('Node: ' + node);
}
<div id="node-1">node-1</div>
<div id="node-2">node-2</div>
<div id="notnode-3">notnode-3</div>
<div id="check">Check the console (F12, then choose the 'console' tab)</div>
Selfjustifying answered 13/3, 2016 at 12:4 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.