JavaScript - 了解返回 DOM 元素的方法链

JavaScript - Understanding Method Chaining with return DOM elements

本文关键字：方法 元素 DOM 了解 返回 JavaScript      更新时间：2023-09-26

我试图理解带有返回DOM元素的Javascript链接。我不知道该怎么做。

这是我的代码：

        (function () {
            function MyQuery(selector) {
                if (!(this instanceof MyQuery)) {
                    return new MyQuery(selector);
                }
                this.nodes = document.querySelectorAll(selector);
                for (var i = 0; i < this.nodes.length; i++) {
                    this.nodes[i] = this.nodes[i];
                }
            }
            MyQuery.fn = MyQuery.prototype = {
                parent: function () {
                    return this.nodes[0].parentNode;
                },
                color: function(setColor) {
                    this.nodes[0].style.color = setColor;
                    return this;
                }
            };
            window.myQuery = window.$ = MyQuery;
        })();

调用方法：

myQuery(".mySpan").parent(); 
// Returns .. <div>
myQuery(".mySpan").parent().color("red");
// TypeError: myQuery(...).parent(...).color is not a function

.HTML：

    <div>
        This DIV has some content.
        <span class="mySpan">This is a span</span>
        more content here.
    </div>
我

不确定为什么它会给我一个类型错误，我有父节点，它是div，我想做的只是设置该 div 的颜色文本。

为了使可链接的方法可用，您不得返回 DOM 元素，而必须返回具有此方法的MyQuery类的实例。

function MyQuery(selector) {
    if (!(this instanceof MyQuery)) {
        return new MyQuery(selector);
    }
    if (Array.isArray(selector)) {
        this.nodes = selector;
    } else {
        this.nodes = [];
        if (typeof selector == "string") {
            var nodes = document.querySelectorAll(selector);
            for (var i = 0; i < nodes.length; i++) {
                this.nodes[i] = nodes[i];
            }
        }
    }
}
MyQuery.prototype.parent = function () {
    return new MyQuery([this.nodes[0].parentNode]);
};
MyQuery.prototype.color = function(setColor) {
    this.nodes[0].style.color = setColor;
    return this;
};
相关文章：