REMARQUE: Avant de cette question suppose un doublon, il y a une section au bas de cette question qui aborde pourquoi quelques questions similaires ne fournissent pas la réponse, je suis à la recherche d'.
Nous savons tous qu'il est facile de convertir une NodeList à un Tableau et il y a beaucoup de façons de le faire:
[].slice.call(someNodeList)
// or
Array.from(someNodeList)
// etc...
Ce que je suis après, c'est l'inverse; comment puis-je convertir un tableau de nœuds dans un statique NodeList?
Pourquoi ai-je envie de faire?
Sans entrer trop profondément dans les choses, je suis en création d'une nouvelle méthode pour interroger les éléments sur la page.e:
Document.prototype.customQueryMethod = function (...args) {...}
En essayant de rester fidèle à combien de querySelectorAll fonctionne, je veux un retour statique de la collection NodeList au lieu d'un tableau.
J'ai abordé le problème de trois façons différentes à ce jour:
Tentative 1:
La création d'un Fragment de Document
function createNodeList(arrayOfNodes) {
let fragment = document.createDocumentFragment();
arrayOfNodes.forEach((node) => {
fragment.appendChild(node);
});
return fragment.childNodes;
}
Alors que ce n'est le retour d'une NodeList, cela ne fonctionne pas parce que l'appelant appendChild supprime le nœud à partir de son emplacement actuel dans les DOM (où il doit le rester).
Une autre variation de cette implique cloning les nœuds et le retour de l'clones. Cependant, maintenant vous êtes de retour clonés de nœuds, qui n'ont aucune référence à la réalité de nœuds dans les DOM.
Tentative 2:
Tenter de "se moquer de" la NodeList constructeur
const FakeNodeList = (() => {
let fragment = document.createDocumentFragment();
fragment.appendChild(document.createComment('create a nodelist'));
function NodeList(nodes) {
let scope = this;
nodes.forEach((node, i) => {
scope[i] = node;
});
}
NodeList.prototype = ((proto) => {
function F() {
}
F.prototype = proto;
return new F();
})(fragment.childNodes);
NodeList.prototype.item = function item(idx) {
return this[idx] || null;
};
return NodeList;
})();
Et il peut être utilisé de la manière suivante:
let nodeList = new FakeNodeList(nodes);
// The following tests/uses all work
nodeList instanceOf NodeList // true
nodeList[0] // would return an element
nodeList.item(0) // would return an element
Si cette approche ne permet pas de supprimer les éléments du DOM, il entraîne d'autres erreurs, comme lors de la conversion d'un tableau:
let arr = [].slice.call(nodeList);
// or
let arr = Array.from(nodeList);
Chacun des ci-dessus génère l'erreur suivante: Uncaught TypeError: Illegal invocation
Je suis aussi en train d'essayer d'éviter les "imiter" une nodeList avec un faux nodelist constructeur comme je le crois, et susceptible d'avoir des conséquences inattendues.
Tentative 3:
Fixation temporaire d'attribut à des éléments de ré-interroger
function createNodeList(arrayOfNodes) {
arrayOfNodes.forEach((node) => {
node.setAttribute('QUERYME', '');
});
let nodeList = document.querySelectorAll('[QUERYME]');
arrayOfNodes.forEach((node) => {
node.removeAttribute('QUERYME');
});
return nodeList;
}
Cela fonctionnait bien, jusqu'à ce que j'ai découvert que cela ne fonctionne pas pour certains éléments, comme SVGs'. Il ne se fixe pas l'attribut (bien que je n'ai fait que tester cela dans Chrome).
Il semble que ce devrait être une chose facile à faire, pourquoi ne puis-je pas utiliser la NodeList constructeur pour créer une NodeList, et pourquoi ne puis-je pas jeté un tableau à une NodeList une manière similaire que l'élément nodelists sont exprimés à des tableaux?
Comment puis-je convertir un tableau de nœuds à un NodeList, de la bonne façon?
Semblables à des questions qui ont des réponses qui ne fonctionnent pas pour moi:
Les questions suivantes sont similaires à celui-ci. Malheureusement, les questions/réponses ne permettent pas de résoudre mon problème en particulier pour les raisons suivantes.
Comment puis-je convertir un Tableau d'éléments dans une NodeList? La réponse à cette question utilise une méthode que les clones de nœuds. Cela ne fonctionnera pas parce que j'ai besoin d'avoir accès à l'original de nœuds.
Créer la liste des nœuds à partir d'un seul nœud en JavaScript utilise le fragment de document d'approche (Tentative 1). Les autres réponses essayer des choses similaires au Tente 2 et 3.
La création d'un DOM NodeList est à l'aide de E4X, et ne s'applique donc pas. Et même si c'est à l'aide, on supprime les éléments du DOM.
