在Javascript中，您可以扩展DOM吗？

问题描述：

在Javascript中，你可以使用它的原型对象扩展现有类：在Javascript中，您可以扩展DOM吗？

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

是否有可能用这种方法来扩展DOM元素？

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

事实上，事情在过去三年中发生了变化：https：//github.com/nbubna/mind -hacking/blob/gh-pages/extending-the-dom.md – 2013-10-21 16:28:23

答

您可以通过使用元素的原型扩展DOM。但是，这在IE7及更早版本中不起作用。您需要逐个扩展特定元素。 Prototype库执行此操作。我建议您通过source来查看它是如何完成的。

请注意，这只应该在IE6和IE7中需要，因为IE8支持这一点。请参阅http://msdn.microsoft.com/en-us/library/dd282900(VS.85).aspx。 – 2009-04-23 01:02:14

答

就在我写这个问题时，我发现了答案，但我认为我会发帖分享信息。

您需要扩展的对象是Element.prototype。

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

答

是的，你可以，但强烈建议不要。

如果你重写某些其他库期望成为原始文件或其他库改写了你期望的东西..混沌！

最好的做法是将代码保存在自己的名称空间/作用域中。

答

你不应该直接扩展任何东西（我的意思是本机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' 
    }); 
});

在Javascript中，您可以扩展DOM吗？

相关推荐