Как добавить мои собственные методы в объект 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 написал хорошую статью об этом, охватывая все эти моменты и многое другое.
Ответ 3
Одним словом, не надо. Лучше не изменять объекты, которыми вы не владеете.
Это особенно верно для HTMLElement
, который нельзя изменить в некоторых браузерах.
Ответ 4
Эта статья статьи от perfectionkills.com, вероятно, даст вам некоторое представление о том, как это делается, и почему вы не должны этого делать.
(Кстати, jQuery не расширяет элементы DOM. Вместо этого они используют обертки DOM.)