pourquoi ne puis-je pas utiliser la NodeList constructeur pour créer une NodeList

parce que la spécification DOM pour NodeList interface ne spécifie pas l'attribut WebIDL [constructeur] , il ne peut donc pas être créé directement dans les scripts d'utilisateur.

pourquoi ne puis-je pas lancer un tableau à un NodeList de la même manière que les nodelists sont lancés sur des tableaux?

ce serait certainement une fonction utile à avoir dans votre cas, mais aucune fonction de ce genre n'est spécifiée pour exister dans la spécification DOM. Ainsi, il n'est pas possible de remplir directement un NodeList à partir d'un tableau de Node .

bien que je doute sérieusement que vous appelleriez cela "la bonne façon" de faire les choses, une solution moche est de trouver des sélecteurs CSS qui sélectionnent uniquement vos éléments désirés, et passer tous ces chemins dans querySelectorAll en tant que sélecteur séparé par des virgules:

// find a CSS path that uniquely selects this element
function buildIndexCSSPath(elem) {
    var parent = elem.parentNode;

     // if this is the root node, include its tag name the start of the string
    if(parent == document) { return elem.tagName; } 

    // find this element's index as a child, and recursively ascend 
    return buildIndexCSSPath(parent) + " > :nth-child(" + (Array.prototype.indexOf.call(parent.children, elem)+1) + ")";
}

function toNodeList(list) {
    // map all elements to CSS paths
    var names = list.map(function(elem) { return buildIndexCSSPath(elem); });

    // join all paths by commas
    var superSelector = names.join(",");

    // query with comma-joined mega-selector
    return document.querySelectorAll(superSelector);
}

toNodeList([elem1, elem2, ...]);

cela fonctionne en trouvant des chaînes CSS pour sélectionner uniquement chaque élément, où chaque sélecteur est de la forme html > :nth-child(x) > :nth-child(y) > :nth-child(z) ... . C'est, chaque élément peut être entendu à exister en tant qu'enfant d'un enfant, d'un enfant (etc.) tout le chemin jusqu'à l'élément racine. En trouvant l'index de chaque enfant dans le chemin de l'ancêtre du noeud, nous pouvons l'identifier de façon unique.

noter que cela ne préservera pas le type Text les noeuds, parce que querySelectorAll (et les chemins CSS en général) ne peuvent pas sélectionner les noeuds de texte.

Je n'ai aucune idée si cela sera suffisamment performant pour vos fins, cependant.

Voici mes deux cents:

• le Document est un objet natif et en l'étendant peut-être pas une bonne idée.
• NodeList est un objet natif avec un constructeur privé et aucune méthode publique pour ajouter des éléments, et il doit y avoir une raison pour cela.
• à moins que quelqu'un soit capable de fournir un hack, il n'y a aucun moyen de créer et de peupler une NodeList sans modifier le document actuel.
• NodeList is comme un tableau, mais ayant la méthode item qui fonctionne tout comme l'utilisation de crochets, à l'exception de retourner null au lieu de undefined quand vous êtes hors de portée. Vous pouvez simplement retourner un tableau avec la méthode Item implémentée:

myArray.item= function (e) { return this[e] || null; }

PS: peut-être que vous prenez la mauvaise approche et votre méthode de requête personnalisée pourrait simplement envelopper un appel document.querySelectorAll qui renvoie ce que vous recherchez.

comme il semble que la création d'un vrai NodeList à partir d'un tableau ait de graves conséquences, peut-être pourriez-vous utiliser un objet JS régulier avec un prototype fait par vous-même pour émuler un NodeList à la place. Comme ceci:

var nodeListProto = Object.create({}, {
        item: {
            value: function(x) {
                return (Object.getOwnPropertyNames(this).indexOf(x.toString()) > -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++) { // *
            Object.defineProperty(list, n.toString(), {
                value: nodes[n],
                enumerable: true
            });
        }
        return (list.length) ? list : null;
    };
// Usage:
var nodeListFromArray = getNodeList(arrayOfNodes);

cette solution présente encore quelques inconvénients. L'opérateur instanceof ne peut pas reconnaître L'objet retourné comme un NodeList. De plus, les loggings et les dirrings de la console sont affichés différemment d'une NodeList.

(* = Un for loop est utilisé pour itérer le tableau passé, de sorte que la fonction peut accepter un NodeList passé aussi. Si vous préférez une boucle forEach , celle-ci peut être utilisée aussi longtemps qu'un tableau seulement sera passé.)

Une démonstration en direct à jsFiddle .

vous pouvez utiliser la propriété outerHTML de chaque élément, et l'ajouter à un élément parent (qui créera par document.createElement() , le type d'élément n'a pas d'importance). Par exemple, dans ES6:

function getNodeList(elements) {
  const parentElement = document.createElement('div');
  // This can be a differnet element type, too (but only block (display: block;) element, because it impossible to put block element in inline element, and maybe 'elements' array contains a block element).
  let HTMLString = '';
  for (let element of elements) {
    HTMLString += element.outerHTML;
  }

  parentElement.innerHTML = HTMLString;

  return parentElement.childNodes;
}