5

可能重复：
在 Javascript 中，您可以扩展 DOM 吗？

我正在尝试向元素添加方法和属性。它没有被列为全局类。我可以像这样扩展字符串：

String.prototype.dosomething = function { ... };

我尝试这样（它更大，这是基本的）：

function $id(str){
    this.element = document.getElementById(str); 
    return element;
}
var myElem = $id('myId'); // WORKS !!!
$id.prototype.dosomethig = function ( ... }; 
var myValue = $id('myId').dosomething(); // DOESN'T WORK !!!

我尝试了其他方式，但它总是一样的，当我尝试扩展类时，它不起作用。有没有办法避免这种情况？我知道 jQuery 会这样做，但我想自己做 - 如果他们可以，我可以......对吗？

编辑：下面的代码已经在 Safari 和 Firefox 中运行......

Element.prototype.pos = function(){
    var curleft = this.offsetLeft;
    var curtop = this.offsetTop;
    var scrleft = this.scrollLeft;
    var scrtop = this.scrollTop;
    var pElement = pElementScr = this.offsetParent
    while(pElement){
        curleft += pElement.offsetLeft;
        curtop += pElement.offsetTop;
        pElement = pElement.offsetParent;
    }
    while(pElementScr){
        scrleft += pElementScr.scrollLeft;
        scrtop += pElementScr.scrollTop;
        pElementScr = pElementScr.offsetParent;
    }
    return {x:this.offsetLeft, y:this.offsetTop};
}

它甚至给出了许多其他 div 内部的 div 的位置。在解决了我图书馆的许多其他问题后，我将尝试在 IE8 中进行测试。

4

4 回答 4

4

在 Firefox 中，chrome 和 IE8+ 元素继承自，Element.prototype因此您必须执行以下操作：

Element.prototype.doSomething = function() {
    alert("hello");
};

扩展主机原型非常脆弱，不推荐，但如果你只是在玩玩应该没问题。主要原因是 DOM 规范没有指定原型实现，而只是接口，elem.appendChild()应该可以工作，它不必在某个原型中。

这：

function $id(str) {
    this.element = document.getElementById(str);
    return element;
}

仅因为在没有任何对象上下文的情况下调用函数时引用全局对象的不良行为才this起作用（它应该只是在看到 时直接抛出错误this，尽管严格模式通过将其设置为来解决这个问题undefined）。您正在创建一个全局变量element（因为对全局对象的属性分配成为全局变量），然后返回全局变量。

于 2012-08-02T20:45:50.463 回答
2

与其扩展 DOM 对象，不如像 jQuery 那样包装它。

var myLib = {
   addWrapper: function ( id ) {
      return new this.WrapperClass( document.getElementById( id ) );
   },
   WrapperClass: function ( element) {
      this.element = element;
   }
};
MyLib.WrapperClass.prototype.someMethod = function() {
   alert( this.element);
}

var wrappedElement = myLib.addWrapper( 'someid' );
wrappedElement.someMethod();
于 2012-08-02T20:56:35.127 回答
0 
$id('myId').dosomething()

$id('myId') 是一个元素。

你在'Element'中没有一个叫做doSomething的函数，你在$id上有它，这是一个函数。实际上，当您将函数添加到函数时会发生什么，有可能吗？

于 2012-08-02T20:52:40.480 回答
0

首先，扩展 DOM 通常（阅读：总是）是一个糟糕的选择。如果您想编写快速、跨浏览器的代码，则不应扩展 DOM 或其他本机对象（对象、字符串...）。扩展本机对象也可能导致与库等的兼容性问题。如果您想了解更多有关该主题的信息，我建议您查看这篇出色的博客文章： http: //perfectionkills.com/whats-wrong-with -扩展-dom/

如果支持旧版本的 IE (IE6 && 7) 对您来说并不重要，那么这就是您想要的：

Element.prototype.doSomething = function () {
    // Your code here
};

在您的示例中，问题是 $id 返回一个元素。您的“doSomething”附加到函数 $id，而不是附加到它返回的元素。

这样做有效：

function $id(str){
    this.element = document.getElementById(str); 
    return this;
}
于 2012-08-02T20:54:17.410 回答