Ответ 1

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

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

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

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

В то время как я серьезно сомневаюсь, что вы бы назвали это "правильным способом", чтобы разобраться в вещах, одно уродливое решение - это поиск селекторов 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 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) .... То есть каждый элемент может быть понят, что он существует как дочерний элемент дочернего элемента ребенка (и т.д.), Вплоть до корневого элемента. Найдя индекс каждого дочернего элемента в пути node предка, мы можем его однозначно идентифицировать.

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

Я понятия не имею, достаточно ли это для ваших целей.

Ответ 2

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

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

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

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

Ответ 3

Так как кажется, что создание реального 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.length) ? list : null;
    };
// Usage:
var nodeListFromArray = getNodeList(arrayOfNodes);

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

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

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