почему я не могу использовать конструктор NodeList для создания NodeList

Поскольку спецификация DOM для интерфейса NodeList не указывает атрибут WebIDL [Конструктор], поэтому его нельзя создать непосредственно в пользовательских скриптах.

почему я не могу преобразовать массив в NodeList так же, как NodeList преобразуются в массивы?

Это, безусловно, было бы полезно иметь в вашем случае, но такая функция не указана в спецификации DOM. Таким образом, невозможно напрямую заполнить NodeList из массива Node.

Хотя я серьезно сомневаюсь, что вы назовете это «правильным способом», одно уродливое решение — найти селекторы CSS, которые однозначно выбирают нужные вам элементы, и передать все эти пути в querySelectorAll в качестве селектора, разделенного запятыми:

// 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, ...]);

Это работает путем поиска строк CSS для уникального выбора каждого элемента, где каждый селектор имеет форму html > :nth-child(x) > :nth-child(y) > :nth-child(z) .... То есть можно понимать, что каждый элемент существует как дочерний элемент дочернего элемента дочернего элемента (и т. д.) вплоть до корневого элемента. Найдя индекс каждого потомка в пути предка узла, мы можем однозначно идентифицировать его.

Обратите внимание, что это не сохранит узлы типа Text, потому что querySelectorAll (и пути CSS в целом) не могут выбирать текстовые узлы.

Я понятия не имею, будет ли это достаточно производительным для ваших целей.

Вот мои два цента:

• Document — это нативный объект, и его расширение может быть плохой идеей.
• NodeList — это собственный объект с частным конструктором и без общедоступных методов для добавления элементов, и для этого должна быть причина.
• Если кто-то не может предоставить хак, невозможно создать и заполнить NodeList без изменения текущего документа.
• NodeList подобен массиву, но имеет метод item, который работает так же, как использование квадратных скобок, за исключением возврата null вместо undefined, когда вы находитесь вне диапазона. Вы можете просто вернуть массив с реализованным методом элемента:

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

PS: Возможно, вы используете неправильный подход, и ваш собственный метод запроса может просто обернуть вызов document.querySelectorAll, который возвращает то, что вы ищете.

Поскольку кажется, что создание реального NodeList из массива имеет серьезные резервы, возможно, вместо этого вы могли бы использовать обычный объект JS с самодельным прототипом для эмуляции NodeList. Вот так:

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;
    };
// Usage:
var nodeListFromArray = getNodeList(arrayOfNodes);

Есть еще некоторые запасные варианты с этим решением. Оператор instanceof не может распознать возвращаемый объект как NodeList. Кроме того, консольные журналы и каталоги отображаются иначе, чем NodeList.

(* = Цикл for используется для итерации переданного массива, чтобы функция могла принять и переданный NodeList. Если вы предпочитаете цикл forEach, его также можно использовать, если будет передан только массив.)

Прямая демонстрация на jsFiddle.

Вы можете использовать свойство outerHTML каждого элемента и добавить его к родительскому элементу (который будет создан с помощью document.createElement(), тип элемента не имеет значения). Например, в 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;
}

Пол С. написал ответ в 2013 году, на котором он основан.

var toNodeList = (function() {      
  // Create a document fragment
  var emptyNL = document.createDocumentFragment().childNodes;

  // This is returned from a self-executing function so that
  // the DocumentFragment isn't repeatedly created.
  return function(nodeArray) {
    // Check if it's already a nodelist.
    if (nodeArray instanceof NodeList) return nodeArray;

    // If it's a single element, wrap it in a classic array.
    if (!Array.isArray(nodeArray)) nodeArray = [nodeArray];

    // Base an object on emptyNL
    var mockNL = Object.create(emptyNL, {
      'length': {
        value: nodeArray.length, enumerable: false
      },
      'item': {
        "value": function(i) {
          return this[+i || 0];
        },
        enumerable: false
      }
    });

    // Copy the array elemnts
    nodeArray.forEach((v, i) => mockNL[i] = v);

    // Return an object pretending to be a NodeList.
    return mockNL;
  }
}())
    
    
var arr = document.querySelectorAll('body');
console.log('Actual NodeList is NodeList?', arr instanceof NodeList)
arr = Array.from(arr)
console.log('Plain Array is NodeList?', arr instanceof NodeList)
arr = toNodeList(arr)
console.log('Emulated NodeList is NodeList?', arr instanceof NodeList)