В 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

вы можете расширить DOM, используя прототип Element. Однако это не работает в IE7 и более ранних версиях. Вам нужно будет расширить конкретный элемент, по одному за раз. Библиотека прототипов делает это. Я рекомендую просмотреть источник , чтобы точно узнать, как это делается.

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

Да, можно, но настоятельно не рекомендуется.

Если вы переопределяете что-то, другая библиотека ожидает, что она будет исходной, или другая библиотека перезаписала то, что вы ожидали .. хаос!

Лучше всего хранить код в собственном пространстве имен / области.