如何将DOM元素扩展为一个类(没有jQuery)

Question

可能重复:
在Javascript中,你可以扩展DOM吗？

我正在尝试向Element添加方法和属性.它未列为全局类.我可以像这样扩展String:

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这样做,但我想做我的onwn - 如果可以,我可以......对吗？

编辑:下面已经在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中进行测试.

Answer 1

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