[Edit]

JavaScript - create new NodeList() from node array

1 contributors

2 contributions

0 discussions

8 points

Created by:

Kevin

797

In this short article we would like to show how to create custom NodeList class in JavaScript.

By default NodeList class doesn't provide public constructor, so custom one lets to use new operator to create the object.

Quick solution:

xxxxxxxxxx
 
const createNodeList = (array) => {
    const fragment = new DocumentFragment();
    for (const item of array) {
        fragment.appendChild(item);
    }
    return fragment.childNodes;
};
​
​
// Usage example:
​
const list = createNodeList([/* ... */]);

Practical example

Edit

In this section you can find DOM-based solution.

xxxxxxxxxx
 
const createNodeList = (array) => {
    const fragment = new DocumentFragment();
    for (const item of array) {
        fragment.appendChild(item);
    }
    return fragment.childNodes;
};
​
​
​
// Usage example:
​
const nodes = [
    document.createElement('div'),
    document.createElement('div'),
    document.createElement('div')
];
​
const list = createNodeList(nodes);
​
for (const node of list) {
    console.log(node);
}

Auto running

Universal solution

Edit

This solution doesn't need DOM support, so it may be run under Node.js.

Hint: working under Node.js we should remove line with NodeList.prototype from the below source code and use other way to create elements than document object, e.g. some library or own custom logic.

xxxxxxxxxx
 
function CustomNodeList(nodes) {
    const iterator = nodes[Symbol.iterator];
    Object.defineProperty(this, 'length', {
        get: function() {
            return nodes.length;
        }
    });
    this.item = function(index) {
        if (index === undefined) {
            throw new TypeError(`Failed to execute 'item' on 'NodeList': 1 argument required, but only 0 present.`);
        }
        return nodes[index] ?? null;
    };
    this.keys = function() {
        return nodes.keys();
    };
    this.values = function() {
        return nodes.values();
    };
    this.entries = function() {
        return nodes.entries();
    };
    this.forEach = function(callback) {
        nodes.forEach(callback);
    };
    this[Symbol.iterator] = function() {
        return iterator.call(nodes);
    };
    return new Proxy(this, {
        get: function(target, name) {
            return (name in target ? target[name] : nodes[name]);
        }
    });
};
​
CustomNodeList.prototype = NodeList.prototype;
​
​
​
// Usage example:
​
const nodes = [
    document.createElement('div'),
    document.createElement('div'),
    document.createElement('div')
];
​
const list = new CustomNodeList(nodes);
​
for (const node of list) {
    console.log(node);
}