在Javascript中,你能扩展DOM吗？

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库就是这样做的.我建议查看源代码,看看它是如何完成的.

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'
    });
});