我该如何在不使用jQuery的情况下向DOM对象添加JavaScript函数？

Question

如何像下面这样做，但仅适用于DOM对象，而不是所有对象：

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

请仅使用纯JavaScript，不要使用jQuery或其他第三方库。

此外，请评论您的解决方案的标准和跨浏览器兼容性。

- ma11hew28

---

你应该使用jQuery或其他库。如果你不这样做，那么你就错了。 - Stefan Kendall

我很赞成使用 jQuery，但即使是我也不会说出那样的话。做得“不对”吗？很可能用一种更加复杂的方式做错了？几乎肯定是这样的，几乎。 - treeface

不对，你做错了。我不用汇编语言构建 Web 应用程序，也不会在没有框架/库的情况下构建任何接触 DOM 的东西。 - Stefan Kendall

为了实现IE兼容性，您需要使用包装器对象或其他创新技术。最终，<在此输入您喜爱的库>可能已经做到了这一点，所以除非您是为了学习而这样做，否则这可能不值得努力。 - Reid

@Stefan: 不要太死板。DOM其实并不难，即使考虑了浏览器的差异，如果你知道自己在做什么，不使用jQuery或类似工具也完全可行。至于汇编语言和……什么？JavaScript？这个比较有点儿荒唐。 - Tim Down

请参考以下链接：https://dev59.com/w0bRa4cB1Zd3GeqP27Rf - Crescent Fresh

Answer 1

DOM中的元素使用HTMLElement作为它们的原型 - 所以在理想情况下，您只需添加到此处。

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

但是：这在IE浏览器中无法使用，所以我很遗憾。

- Sean Kinsey

Answer 2

建议阅读的是原型扩展DOM。

如果想要了解代码内部的思路（由于篇幅过长，无法在此处复制），可以在这里找到（搜索Element.extend）。

简而言之，它们无法从一开始就扩展对象，因此它们通过每个返回DOM元素的函数来扩展它们。

- mhitza