Как добавить функции JavaScript в объекты DOM без jQuery?

Question

Как мне сделать что-то вроде следующего, но только для объектов DOM, а не для всех объектов:

Object.prototype.hide = function() {
  this.style.display = 'none';
};

Пожалуйста, используйте только чистый JavaScript, никакие jQuery или другие сторонние библиотеки.

Также, пожалуйста, прокомментируйте стандарты вашего решения и совместимость с различными браузерами.

Answer 1

Элементы в DOM используют HTMLElement в качестве прототипа - так что в идеальном мире вы бы просто добавили к этому.

HTMLElement.prototype.hide = function() {
    this.style.display = 'none';
};

НО: это не работает в IE, так что не надобоюсь.

Answer 2

Рекомендуемое прочтение для этого - способ прототип расширяет DOM .

И для идеи внутри кода (который слишком велик для воспроизведения здесь) вы можете найти здесь (Поиск Element.extend).

Одним словом, они не могут расширять объекты с самого начала, поэтому они расширяют их каждой из своих функций, возвращающих элементы DOM.