如何将自己的方法添加到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);
};

Answer 2

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

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

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

Kangax撰写了good article on this，涵盖了所有这些要点以及更多内容。

Answer 3

总之，不要。最好not to modify objects you don't own。

对于HTMLElement尤其如此，在某些浏览器中无法修改。

Answer 4

这个article from perfectionkills.com可能会让您深入了解它是如何完成的，以及为什么不应该这样做。

（顺便说一下，jQuery不会扩展DOM元素。而是使用DOM包装器。）