Create node list from a single node in JavaScript
This is one of those it seems so simple, but I cannot come up with a good way to go about it.
I have a node, maybe nodelist = document.getElementById("mydiv"); - I need to normalize this to a node list. And not an array either: an actual, bona-fide nodeList object.
Not nodelist = [document.getElementById("mydiv")];
No libraries, please.
Answer
Take any element already referenced in JavaScript, give it an attribute we can find using a selector, find it as a list, remove the attribute, return the list.
function toNodeList(elm){
var list;
elm.setAttribute('wrapNodeList','');
list = document.querySelectorAll('[wrapNodeList]');
elm.removeAttribute('wrapNodeList');
return list;
}
Extended from bfavaretto's answer.
function toNodeList(elm, context){
var list, df;
context = context // context provided
|| elm.parentNode; // element's parent
if(!context && elm.ownerDocument){ // is part of a document
if(elm === elm.ownerDocument.documentElement || elm.ownerDocument.constructor.name === 'DocumentFragment'){ // is <html> or in a fragment
context = elm.ownerDocument;
}
}
if(!context){ // still no context? do David Thomas' method
df = document.createDocumentFragment();
df.appendChild(elm);
list = df.childNodes;
// df.removeChild(elm); // NodeList is live, removeChild empties it
return list;
}
// selector method
elm.setAttribute('wrapNodeList','');
list = context.querySelectorAll('[wrapNodeList]');
elm.removeAttribute('wrapNodeList');
return list;
}
There is another way to do this I thought of recently
var _NodeList = (function () {
var fragment = document.createDocumentFragment();
fragment.appendChild(document.createComment('node shadows me'));
function NodeList (node) {
this[0] = node;
};
NodeList.prototype = (function (proto) {
function F() {} // Object.create shim
F.prototype = proto;
return new F();
}(fragment.childNodes));
NodeList.prototype.item = function item(i) {
return this[+i || 0];
};
return NodeList;
}());
Now
var list = new _NodeList(document.body); // note **new**
list.constructor === NodeList; // all these are true
list instanceof NodeList;
list.length === 1;
list[0] === document.body;
list.item(0) === document.body;