Trong Javascript, bạn có thể mở rộng DOM không?

Question

Trong javascript, bạn có thể mở rộng các lớp học hiện tại bằng cách sử dụng đối tượng nguyên mẫu của nó:

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

Có thể sử dụng phương pháp này để mở rộng phần tử DOM?

Answer 1

bạn có thể mở rộng DOM bằng cách sử dụng nguyên mẫu của Phần tử. Tuy nhiên, điều này không làm việc trong IE7 và trước đó. Bạn sẽ cần mở rộng từng phần tử cụ thể. Thư viện Prototype thực hiện điều này. Tôi khuyên bạn nên xem qua số source để xem chính xác cách thực hiện.

Answer 2

Tôi tìm thấy câu trả lời ngay khi tôi đang viết câu hỏi, nhưng tôi nghĩ rằng tôi sẽ đăng bài để chia sẻ thông tin.

Đối tượng bạn cần gia hạn là Element.prototype.

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

Answer 3

Có bạn có thể, nhưng không nên làm như vậy.

Nếu bạn ghi đè lên thư viện khác, thư viện khác hoặc thư viện khác sẽ ghi đè thứ bạn đang mong đợi .. hỗn loạn!

Cách tốt nhất là giữ mã của bạn trong không gian tên/phạm vi của riêng bạn.

Answer 4

Bạn không nên trực tiếp mở rộng bất cứ điều gì (bởi "bất cứ điều gì" tôi có nghĩa là các đối tượng DOM gốc) - điều đó sẽ chỉ dẫn đến những điều xấu. Cộng với việc mở rộng lại mọi phần tử mới (một cái gì đó bạn phải làm để hỗ trợ IE) bổ sung thêm chi phí.

Tại sao không có những phương pháp jQuery và tạo một wrapper/constructor và kéo dài mà thay vào đó:

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; 
})(); 

Sau đó, bạn có thể thêm các phương pháp của riêng bạn qua myDOM.fn ... Và bạn có thể sử dụng nó như thế này:

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