Это один из тех, которые кажутся такими простыми, но я не могу придумать хороший способ сделать это.
У меня есть узел, возможно, nodelist = document.getElementById("mydiv"); — мне нужно нормализовать его в список узлов. И не массив: настоящий, добросовестный nodeList объект.
Нет nodelist = [document.getElementById("mydiv")];
Никаких библиотек, пожалуйста.
Возрождаю, потому что недавно вспомнил кое-что о 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
и 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, вам придется скрыть его, чтобы избежать нелегального вызова (возможно, используйте двухуровневое прототипирование).
- person Paul S.; 04.07.2013
singleNode возвращает самовыполняющуюся функцию? Кажется, он отлично работает, просто возвращая Object.create... после создания пустого DocumentFragment? Просто так фрагмент документа создается один раз, независимо от того, сколько раз он вызывается?
- person Regular Jo; 09.06.2021
Возьмите любой элемент, на который уже есть ссылка в 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)
- person Paul S.; 13.11.2012
Array.prototype.item = function(i){return this[i];};)
- person Paul S.; 13.11.2012
Invalid Invocation в Chrome. 4-е и 5-е условия оцениваются как false в Firefox и true в Chrome.
- person Joyce Babu; 17.11.2015
Если вы ориентируетесь на браузеры, поддерживающие document.querySelectorAll, всегда будет вернуть NodeList. Так:
var nodelist = document.querySelectorAll("#mydiv");
Еще один способ сделать это на основе 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() работает хорошо.
- person GuyPaddock; 31.01.2020
:scope > :nth-child(${Array.from(div.parentNode.children).indexOf(div)+1})) Не уверен в совместимости с Safari 12, и он точно не будет работать в IE11, но он возвращает фактический NodeList. Однако у элемента должен быть родитель. Можно решить, временно добавив его в другой элемент, если parentNode имеет значение null.
- person Lain inVerse; 01.03.2020
nodeList instanceof NodeList возвращает false.
- person Qian Chen; 05.04.2018
console.log(nodeList.childNodes instanceof NodeList); // returns true
- person lao; 30.07.2018
