JSFiddle - React, Tailwind, and code Playground
HTML
<div id="div">
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p>Paragraph 3.</p>
</div>
JavaScript
var list, nodeArr, arrCopy, test,
nodeListProto = Object.create({}, {
item: {
value: function(x) {
return (Object.getOwnPropertyNames(this).indexOf(x.toString(10)) > -1) ? this[x] : null;
},
enumerable: true
},
length: {
get: function() {
return Object.getOwnPropertyNames(this).length;
},
enumerable: true
}
}),
getNodeList = function(nodes) {
var n, eN = nodes.length,
list = Object.create(nodeListProto);
for (n = 0; n < eN; n++) { // for loop iterates also a nodelist if that was passed
Object.defineProperty(list, n.toString(), {
value: nodes[n],
enumerable: true
});
}
return (list.length) ? list : null;
};
nodeArr = Array.from(document.querySelectorAll('div p'));
list = getNodeList(nodeArr);
// Testing static
test = document.querySelector('p');
test.parentElement.removeChild(test);
console.log(list.item(0).textContent, 'length:', list.length);
// Testing copy back to array
arrCopy = Array.from(list);
console.log(arrCopy[1].textContent, 'length:', arrCopy.length);