Как добавить мои собственные методы в объект HTMLElement?

Например, для this.parentNode я хотел бы просто написать this.p или вместо document.getElementById('someid') просто напишите document.g('someid'). Конечно, это простые примеры, я просто хочу знать, как правильно это сделать.

(Я знаю, что могу использовать jQuery или Prototype, но я хотел бы узнать, как это делается в JS)

ОТВЕТЫ

Ответ 1

Хотя вы можете прототип на HTMLElement во многих браузерах - Internet Explorer (6,7,8) является НЕ одним из них. AFAIK, IE9 поддерживает это (хотя я его не тестировал).

Для браузеров, которые его обрабатывают, вы можете:

HTMLElement.prototype.doHello = function(thing){
  alert('Hello World from ' + thing);
};

Ответ 2

Я бы настоятельно рекомендовал не пытаться сделать это по нескольким причинам:

  • Совместимость с браузером. Хотя это возможно в нескольких браузерах, это невозможно в IE <= 8.
  • Элементы DOM являются объектами хоста. Объекты-хосты (т.е. Те, которые предоставляются средой, которые не являются собственными объектами JavaScript) не обязаны играть по тем же правилам, что и родные объекты JavaScript, и кроме указанного поведения DOM могут по существу делать то, что им нравится. Таким образом, даже если некоторые браузеры предоставляют прототип HTMLElement и позволяют увеличить его, нет гарантии, что он будет работать так, как вы ожидаете.
  • Совместимость с другим кодом на вашей странице. Если какой-либо другой код на вашей странице (например, Prototype) запутался с прототипом HTMLElement, вы рискуете назвать коллизии и трудно обнаруживать ошибки.

Вместо этого я бы предложил создать объекты-оболочки вокруг узлов DOM, как это делают jQuery, YUI и другие библиотеки.

Kangax написал хорошую статью об этом, охватывая все эти моменты и многое другое.

Ответ 4

Эта статья статьи от perfectionkills.com, вероятно, даст вам некоторое представление о том, как это делается, и почему вы не должны этого делать.

(Кстати, jQuery не расширяет элементы DOM. Вместо этого они используют обертки DOM.)