2009-04-23 139 views
22

在Javascript中,你可以使用它的原型對象擴展現有類:在Javascript中,您可以擴展DOM嗎?

String.prototype.getFirstLetter = function() { 
    return this[0]; 
}; 

是否有可能用這種方法來擴展DOM元素?

+6

您可以。但可能不應該:) http://perfectionkills.com/whats-wrong-with-extending-the-dom/ – kangax 2010-04-06 15:56:34

+1

事實上,事情在過去三年中發生了變化:https://github.com/nbubna/mind -hacking/blob/gh-pages/extending-the-dom.md – 2013-10-21 16:28:23

回答

20

您可以通過使用元素的原型擴展DOM。但是,這在IE7及更早版本中不起作用。您需要逐個擴展特定元素。 Prototype庫執行此操作。我建議您通過source來查看它是如何完成的。

+0

請注意,這隻應該在IE6和IE7中需要,因爲IE8支持這一點。請參閱http://msdn.microsoft.com/en-us/library/dd282900(VS.85).aspx。 – 2009-04-23 01:02:14

18

就在我寫這個問題時,我發現了答案,但我認爲我會發帖分享信息。

您需要擴展的對象是Element.prototype

Element.prototype.getMyId = function() { 
    return this.id; 
}; 
1

是的,你可以,但強烈建議不要。

如果你重寫某些其他庫期望成爲原始文件或其他庫改寫了你期望的東西..混沌!

最好的做法是將代碼保存在自己的名稱空間/作用域中。

7

你不應該直接擴展任何東西(我的意思是本機DOM對象) - 這隻會導致不好的事情。再加上重新擴展每個新元素(你必須做的事情來支持IE)會增加額外的開銷。

爲什麼不採取jQuery的方法,並創建一個包裝/構造和擴展,而不是:

var myDOM = (function(){ 
    var myDOM = function(elems){ 
      return new MyDOMConstruct(elems); 
     }, 
     MyDOMConstruct = function(elems) { 
      this.collection = elems[1] ? Array.prototype.slice.call(elems) : [elems]; 
      return this; 
     }; 
    myDOM.fn = MyDOMConstruct.prototype = { 
     forEach : function(fn) { 
      var elems = this.collection; 
      for (var i = 0, l = elems.length; i < l; i++) { 
       fn(elems[i], i); 
      } 
      return this; 
     }, 
     addStyles : function(styles) { 
      var elems = this.collection; 
      for (var i = 0, l = elems.length; i < l; i++) { 
       for (var prop in styles) { 
        elems[i].style[prop] = styles[prop]; 
       } 
      } 
      return this; 
     } 
    }; 
    return myDOM; 
})(); 

然後你就可以通過myDOM.fn添加自己的方法......你可以使用它像這樣:

myDOM(document.getElementsByTagName('*')).forEach(function(elem){ 
    myDOM(elem).addStyles({ 
     color: 'red', 
     backgroundColor : 'blue' 
    }); 
});