Question

使用jquery你可以针对这样的元素执行一个方法：

$('#myElement').show();

如果尝试以下操作，则会引发TypeError: undefined is not a function错误：

document.getElementById('myElement').show();

show（）函数定义为：

MyClass.prototype.show = function () { }

如何在不使用jquery的情况下调用show（）函数？

Answer 1

document.getElementById('myElement')返回Element类型的对象。如果你想为它添加一个函数show，你可以执行以下操作注意：这不推荐：

Element.prototype.show = function() { return 'I am called!' }
document.getElementById('myElement').show(); // 'I am called!'

您应该避免不惜一切代价向DOM元素添加自定义方法。如果有的话，很少有这样做的理由。

以下是有关 NOT 执行此操作的原因的更多信息：http://perfectionkills.com/whats-wrong-with-extending-the-dom/

如果您希望复制jquery的show功能，您可以执行以下操作：

var _$ = function(selector) {

    var elem = document.querySelectorAll(selector);
    var hasResults = elem.length > 0;

    var _show = function() {
        if (hasResults) {
            for (var i=0,l=elem.length;i<l;i++) {
                elem[i].style.display = "block";
            }
        }

        return this;
    }

    return {
       show : _show
    }

}

_$('#foo').show();

或者，使用document.getElementById：

document.getElementById('myElement').style.display = "block";

如何对使用getElementById获取的元素执行函数？

1 个答案: