这是其中一个看起来很简单，但我想不出一个好的方法来解决它。
我有一个节点，可能是nodelist = document.getElementById("mydiv"); - 我需要将它标准化为一个节点列表。也不是一个数组：一个真实的、真正的 nodeList 对象。
不是 nodelist = [document.getElementById("mydiv")];
请不要使用库。
【问题讨论】：
标签： javascript nodes nodelist
如果您的目标浏览器支持document.querySelectorAll，它将始终返回NodeList。所以：
var nodelist = document.querySelectorAll("#mydiv");
【讨论】：
var nodeList = document.createDocumentFragment();
nodeList.appendChild(document.getElementById("myDiv"));
【讨论】：
nodeList instanceof NodeList 返回false。
console.log(nodeList.childNodes instanceof NodeList); // returns true
获取 JavaScript 中已经引用的任何元素，给它一个我们可以使用选择器找到的属性，将其作为列表查找，删除属性，返回列表。
function toNodeList(elm){
var list;
elm.setAttribute('wrapNodeList','');
list = document.querySelectorAll('[wrapNodeList]');
elm.removeAttribute('wrapNodeList');
return list;
}
延伸自 bfavaretto 的回答。
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;
}
我最近想到了另一种方法
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;
}());
现在
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;
【讨论】：
elm.nodeType !== 1 除外）
重提这个是因为我最近想起了一些关于 JavaScript 的事情。这取决于如何检查 NodeList，但是..
const singleNode = ((nodeList) => (node) => {
const layer = { // define our specific case
0: { value: node, enumerable: true },
length: { value: 1 },
item: {
value(i) {
return this[+i || 0];
},
enumerable: true,
},
};
return Object.create(nodeList, layer); // put our case on top of true NodeList
})(document.createDocumentFragment().childNodes); // scope a true NodeList
现在，如果你这样做了
const list = singleNode(document.body); // for example
list instanceof NodeList; // true
list.constructor === NodeList; // true
and list 具有属性 length 1 和 0 作为您的节点，以及从 NodeList 继承的任何内容。
如果你不能使用Object.create，你可以做同样的事情，除了使用原型nodelist的构造函数并设置this['0'] = node;，this['length'] = 1;并使用new创建。
ES5 版本
var singleNode = (function () {
// make an empty node list to inherit from
var nodelist = document.createDocumentFragment().childNodes;
// return a function to create object formed as desired
return function (node) {
return Object.create(nodelist, {
'0': {value: node, enumerable: true},
'length': {value: 1},
'item': {
"value": function (i) {
return this[+i || 0];
},
enumerable: true
}
}); // return an object pretending to be a NodeList
};
}());
【讨论】：
list.item，你必须隐藏它以避免非法调用（可能使用两级原型）。
singleNode返回一个自执行函数？在创建空的DocumentFragment 后返回Object.create... 似乎工作正常？是不是只创建一次文档片段，不管它被调用多少次？
基于 Reflect.construct 的另一种方法：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/construct
与其他情况一样，它需要修补 NodeList.prototype.item 才能调用此函数。
NodeList.prototype.item = function item(i) {
return this[+i || 0];
};
let nl = Reflect.construct(Array, [], NodeList);
要使用节点创建它，传递节点数组作为第二个参数。 此方法通过检查：
list instanceof NodeList; // true
list.constructor === NodeList; // true
使用它创建的数组可以使用for..of、forEach 和其他标准方法进行迭代，您可以使用简单的nl[n] = node; 向其中添加元素。
【讨论】：
+i 语法（以前从未见过），但 Reflect.construct() 效果很好。
:scope > :nth-child(${Array.from(div.parentNode.children).indexOf(div)+1}))实际的节点列表。但是，元素必须有一个父级。可以通过临时将其添加到另一个元素中来解决，以防 parentNode 为空。