如何将DOM元素扩展为类(没有jQuery）

How to extend DOM Element as a Class (without jQuery)

本文关键字：没有 jQuery 扩展 DOM 元素      更新时间：2023-09-26

可能重复：
在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中进行测试。

在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（因为全局对象的属性赋值变成了全局变量），然后返回全局变量。

与其扩展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();

$id('myId').dosomething()

$id（'myId'）是一个元素。

"Element"中没有名为doSomething的函数，而是在$id上有它，这是一个函数。实际上，当你把一个函数添加到一个函数中时会发生什么，这可能吗？？

首先，扩展DOM通常（读作：总是）是一个糟糕的选择。如果你想写快速、跨浏览器的代码，你不应该扩展DOM或其他原生对象（Object、String…）。扩展原生对象也可能会导致与库等的兼容性问题。如果你想了解更多关于这个主题的信息，我建议你看一看这篇优秀的博客文章：http://perfectionkills.com/whats-wrong-with-extending-the-dom/

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

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

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

做到这一点：

function $id(str){
    this.element = document.getElementById(str); 
    return this;
}
相关文章：