在 JavaScript 中从单个节点创建节点列表

Question

这是其中一个看起来很简单的问题，但我想不出一个好的方法来解决它。

我有一个节点，也许

nodelist = document.getElementById("mydiv");

- 我需要将其标准化为节点列表。也不是数组：一个实际的、真正的

nodeList

对象。

不是

nodelist = [document.getElementById("mydiv")];

请不要使用图书馆。

Answer 1

获取 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;

Answer 2

如果您的目标浏览器支持

document.querySelectorAll

，它将始终返回

NodeList

。所以：

var nodelist = document.querySelectorAll("#mydiv");

Answer 3

恢复这个是因为我最近想起了一些关于 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

and

list

具有属性 length

和 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
    };
}());

Answer 4

还有另一种基于 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;

向其中添加元素。

Answer 5

var nodeList = document.createDocumentFragment();
nodeList.appendChild(document.getElementById("myDiv"));

Answer 6

谢谢@lao

var nodeList = document.createDocumentFragment();
nodeList.appendChild(document.getElementById("myDiv"));
nodeList = nodeList.childNodes

console.log(nodeList instanceof NodeList);

在 JavaScript 中从单个节点创建节点列表

问题描述投票：0回答：6

6个回答

最新问题

在 JavaScript 中从单个节点创建节点列表

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6