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

发布于 2024-10-12 02:45:59 字数 241 浏览 4 评论 0原文

例如，对于 this.parentNode 我想只写 this.p 或代替 document.getElementById('someid')只需编写document.g('someid')。当然，这些都是简单的例子，我只是想知道正确的方法是什么。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情定在深秋 2024-10-19 02:45:59

尽管您可以在许多浏览器中的HTMLElement上构建原型，但Internet Explorer (6,7,8)不是其中之一。 AFAIK，IE9确实支持这个（虽然我还没有测试过）。

对于处理它的浏览器，您可以执行以下操作：

HTMLElement.prototype.doHello = function(thing){
  console.log(this + ' says: ' + thing)
}

document.body.doHello('hello')

Although you can prototype on the HTMLElement in many browsers - Internet Explorer (6,7,8) is NOT one of them. AFAIK, IE9 does support this (though I haven't tested it).

For browsers that do handle it, you can do:

HTMLElement.prototype.doHello = function(thing){
  console.log(this + ' says: ' + thing)
}

document.body.doHello('hello')

回复收藏 0 原文

这样的小城市 2024-10-19 02:45:59

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

浏览器兼容性。虽然这在多种浏览器中是可能的，但在 IE <= 8 中是不可能的。
DOM 元素是宿主对象。宿主对象（即环境提供的非本机 JavaScript 对象的对象）没有义务遵循与本机 JavaScript 对象相同的规则，并且除了指定的 DOM 行为之外，它们本质上可以做它们喜欢做的事情。因此，即使某些浏览器提供 HTMLElement 原型并允许您对其进行扩充，也不能保证它会按您的预期工作。
与页面中其他代码的兼容性。如果页面中的任何其他代码（例如 Prototype）与 HTMLElement 原型发生冲突，您将面临命名冲突和难以检测的错误的风险。

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

Kangax 写了一篇关于 DOM 可扩展性的好文章，涵盖了所有这些要点等等。

回复收藏 0 原文

半夏半凉 2024-10-19 02:45:59

一句话，不要。最好不要修改不属于您的对象。

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

回复收藏 0 原文

会傲 2024-10-19 02:45:59

这篇来自perfectionkills.com的文章可能会让您深入了解如何它已经完成了，以及为什么你不应该这样做。

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

回复收藏 0 原文

情深缘浅 2024-10-19 02:45:59

如果您想包装像 document 这样的全局对象，这可能不是您想要的，但是您可以使用 custom-elements [1] [2] 创建您自己的类似 HTMLElement 的节点。

创建自定义元素
添加方法到自定义元素类
您可以调用该方法

export class CustomElementInput extends HTMLElement {

  log(){
    alert("log")
  }

  // you can even overwrite methods like so
  remove(){
    alert("removing this node")
    super.remove()
  }
}

customElements.define("custom-element-input", CustomElementInput)

// somewhere else...
// in your HTML something like:
// <custom-element-input></custom-element-input> 

const el = document.querySelector("custom-element-input")
el.log() // creates alert()

This might not be what you are looking for if you want to wrap a global object like document, but you can get a similar effect with custom-elements [1] [2] to create your own HTMLElement-like nodes.

create custom-element
add method to custom-element class
you can call the method

export class CustomElementInput extends HTMLElement {

  log(){
    alert("log")
  }

  // you can even overwrite methods like so
  remove(){
    alert("removing this node")
    super.remove()
  }
}

customElements.define("custom-element-input", CustomElementInput)

// somewhere else...
// in your HTML something like:
// <custom-element-input></custom-element-input> 

const el = document.querySelector("custom-element-input")
el.log() // creates alert()

回复收藏 0 原文

~没有更多了~