如何将自己的方法添加到HTMLElement对象？

Question

例如,this.parentNode我想写this.p或不 document.getElementById('someid')写document.g('someid').当然这只是一个简单的例子,我只是想知道这样做的正确方法是什么.

(我知道我可以使用jQuery或Prototype,但我想了解它是如何在JS中完成的)

Answer 1

虽然您可以HTMLElement在许多浏览器中进行原型设计- 但Internet Explorer(6,7,8)不是其中之一.AFAIK,IE9确实支持这一点(虽然我还没有测试过).

对于处理它的浏览器,您可以:

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

@Flash Thunder - 我在答案中表示...... IE6,7,8绝对不在'支持'表中. (3认同)
但是对于“HTMLElement.prototype....”，您不能将“self”的“this”作为目标元素（例如“String.prototype....”）:( (2认同)

Answer 2

我强烈建议不要尝试这样做,原因如下:

浏览器兼容性.虽然可以在多个浏览器中使用,但在IE <= 8中是不可能的.
DOM元素是宿主对象.主机对象(即由非本机JavaScript对象的环境提供的对象)没有义务使用与本机JavaScript对象相同的规则,并且除了指定的DOM行为之外,它们基本上可以执行他们喜欢的操作.因此,即使某些浏览器提供HTMLElement原型并允许您对其进行扩充,也无法保证它能够按预期工作.
与页面中其他代码的兼容性.如果页面中的任何其他代码(例如Prototype)与HTMLElement原型混淆,则存在命名冲突和难以检测的错误的风险.

相反,我建议像jQuery,YUI和其他库那样在DOM节点周围创建包装器对象.

Kangax写了一篇很好的文章,涵盖了所有这些要点以及更多.

@JojOatXGME：是的，在`data()` 的特定情况下，jQuery 确实在 DOM 元素上存储了“expando”属性（但不是方法）。我怀疑它也可能使用 expandos 来跟踪事件侦听器和其他可能的东西。然而，总体观点是：jQuery 的 API 通过包装器对象而不是通过扩展 DOM 本身来提供扩展的 DOM 功能。它对 DOM 所做的扩展仅在内部使用。 (2认同)