Javascriptでは、DOMを拡張できますか？ JavaScriptでは

Question

、あなたはそのプロトタイプオブジェクトを使用して、既存のクラスを拡張することができます。

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

それはDOM要素を拡張するために、このメソッドを使用することは可能ですか？

Answer 1

要素のプロトタイプを使用してDOMを拡張できます。しかし、これはIE7以前では機能しません。特定の要素を1つずつ拡張する必要があります。プロトタイプライブラリはこれを行います。どのように完了したかを見るには、sourceを調べることをおすすめします。

Answer 2

私は質問を書いていたときと同じように答えを見つけましたが、とにかく情報を共有するために投稿すると思いました。

拡張する必要があるオブジェクトはElement.prototypeです。

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

Answer 3

はい、できますが、強くお勧めします。

何かを上書きすると、別のライブラリが元のものか、別のライブラリが期待していたものが上書きされてしまいます。カオス！

独自の名前空間/スコープにコードを保存することをお勧めします。

Answer 4

あなたは何も直接拡張してはいけません（ネイティブ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' 
    }); 
});