Question

在Javascript中，您可以使用其原型对象扩展现有类：

String.prototype.getFirstLetter = function() {
    return this[0];
};

是否可以使用此方法扩展DOM元素？

Answer 1

我在写这个问题的过程中找到了答案，但我认为无论如何都要发帖分享这些信息。

您需要扩展的对象是Element.prototype。

Element.prototype.getMyId = function() {
    return this.id;
};

Answer 2

您可以使用Element的原型扩展DOM。但是，这在IE7及更早版本中不起作用。您需要一次扩展一个特定元素。 Prototype库就是这样做的。我建议查看source以确切了解它是如何完成的。

Answer 3

你不应该直接扩展任何东西（通过“任何东西”我指的是原生的DOM对象） - 这只会导致坏事。另外，重新扩展每个新元素（你必须做的事情来支持IE）会增加额外的开销。

为什么不采用jQuery方法并创建一个包装器/构造函数并将其扩展为：

var myDOM = (function(){
    var myDOM = function(elems){
            return new MyDOMConstruct(elems);
        },
        MyDOMConstruct = function(elems) {
            this.collection = elems[1] ? Array.prototype.slice.call(elems) : [elems];
            return this;
        };
    myDOM.fn = MyDOMConstruct.prototype = {
        forEach : function(fn) {
            var elems = this.collection;
            for (var i = 0, l = elems.length; i < l; i++) {
                fn( elems[i], i );
            }
            return this;
        },
        addStyles : function(styles) {
            var elems = this.collection;
            for (var i = 0, l = elems.length; i < l; i++) {
                for (var prop in styles) {
                    elems[i].style[prop] = styles[prop];
                }
            }
            return this;
        }
    };
    return myDOM;
})();

然后你可以通过 myDOM.fn 添加你自己的方法......你可以像这样使用它：

myDOM(document.getElementsByTagName('*')).forEach(function(elem){
    myDOM(elem).addStyles({
        color: 'red',
        backgroundColor : 'blue'
    });
});

Answer 4

是的，你可以，但强烈建议不要。

如果你覆盖某些东西，那么另一个图书馆希望是原版或另一个图书馆覆盖了你所期待的东西......混乱！

最佳做法是将代码保存在自己的命名空间/范围内。

在Javascript中，你能扩展DOM吗？

4 个答案: