This is a jQuery-lite implementation using Symbol.iterator for built-in iterability

JQ class using Symbol.iterator.js

class JQ {
    constructor(list) {
        let i = 0;

        while (list[i] !== undefined) {
            this[i] = list[i];
            i++;
        }

        this.length = i;
    }
    
    splice(...args) {
        return [ ...this ].splice(...args);
    }

    addClass(className) {
        for (const elem of this) {
            elem.classList.add(className);
        }

        return $$([ ...this ]);
    }

    append(content) {
        for (const elem of this) {
            elem.append(content.cloneNode());
        }

        return $$([ ...this ]);
    }

    attr(name, val) {
        for (const elem of this) {
            elem.setAttribute(name, val);
        }

        return $$([ ...this ]);
    }

    on(event, handler) {
        for (const elem of this) {
            elem.addEventListener(event, handler);
        }

        return $$([ ...this ]);
    }

    [Symbol.iterator]() {
        let i = 0;
        const _this = this;

        return {
            next() {
                return _this[i]
                    ? { done: false, value: _this[i++] }
                    : { done: true };
            }
        }
    }
}

const $$ = input => {
    if (typeof input === "string") {
        const nodes = document.querySelectorAll(input);
        return new JQ(nodes);
    }

    return new JQ(input);
}