javascript - 带自定义库的querySelectorAll

我有以下代码：

(function() {

var base = function (elem) {

    var elements = document.querySelectorAll(elem);

    return {
        elems: elements[0],
        on: function (evt, func) {
            if(this.elems) this.elems.addEventListener(evt, func, false);
            return this;
        }
    };
};


window.base = window._ = base;

})();

我可以这样做：

_('form').on('submit', uploadImage);

但是，如果我这样做：

_('form').appendChild(input);

我收到一个错误：Object #<Object> has no method 'appendChild'

那么如何在本机函数中使用_('element')并仍使其与对象中的方法一起使用？

最佳答案

给您的对象一个.appendChild函数，该函数在元素上调用.appendChild。

(function() {

    var base = function (elem) {

        var elements = document.querySelectorAll(elem);

        return {
            elems: elements[0],
            on: function (evt, func) {
                if(this.elems) this.elems.addEventListener(evt, func, false);
                return this;
            },
            appendChild: function(el) {
                this.elems.appendChild(el);
                return this;
        };
    };


    window.base = window._ = base;

})();

边注。如果仅对querySelectorAll返回的第一个元素感兴趣，则可以使用querySelector。

return {
    elems: document.querySelector(elem),
    on: function (evt, func) {
      // ...

关于javascript - 带自定义库的querySelectorAll，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11020022/