Wie DOM-Element als Klasse (ohne jQuery)

Question

Mögliche Duplizieren erweitern:
In Javascript, can you extend the DOM?

Ich versuche, Methoden und Eigenschaften zum Element hinzuzufügen. Es ist nicht als globale Klasse aufgeführt. Ich kann String wie folgt erweitern:

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

ich so versuchen (es ist größer, das ist die Grund ist):

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 !!! 

Ich versuche, auf andere Weise, aber der Punkt, es ist immer das gleiche, wenn ich Versuchen Sie, die Klasse zu erweitern, es funktioniert nicht. Gibt es eine Möglichkeit, dies zu vermeiden? Ich weiß, dass jQuery das tut, aber ich möchte mein Onwn machen - wenn sie können, kann ich ... richtig?

Edit: Unterhalb eines Code bereits in Safari und Firefox arbeiten ...

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

er die Position eines div gibt auch innere von vielen anderen divs. Ich werde versuchen, in IE8 zu testen, nachdem ich viele andere Probleme meiner Bibliothek gelöst habe.

Answer 1

In Firefox, Chrome und IE8 + Elemente erben von Element.prototype so müssen Sie tun:

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

Erweiterung Host-Prototypen sehr zerbrechlich ist und nicht zu empfehlen, aber sollte in Ordnung sein, wenn man sich nur spielen. Der Hauptgrund ist, dass die DOM-Spezifikation keine prototypischen Implementierungen spezifiziert, sondern nur Schnittstellen, elem.appendChild() sollte einfach funktionieren, es muss nicht in irgendeinem Prototyp sein.

---

Dieses:

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

Nur wegen des unerwünschten Verhalten gearbeitet, dass this auf das globale Objekt bezieht sich, wenn eine Funktion ohne Objektkontext aufgerufen wird (es sollte nur Vollgas auf der einen Fehler aus, bloßer Anblick von this, obwohl strenger Modus etwas behebt, indem er es zu setzt). Sie erstellen eine globale Variable element (da Eigenschaftszuweisungen für das globale Objekt zu globalen Variablen werden) und geben dann die globale Variable zurück.

Answer 2

$id('myId').dosomething() 

$ id ('myId') ist ein Element.

Sie haben keine Funktion namens DoSomething in 'Element', Sie haben es auf $ ID, die eine Funktion ist. Was passiert eigentlich, wenn Sie einer Funktion eine Funktion hinzufügen, ist das möglich?

Answer 3

Zunächst ist das Erweitern von DOM oft (lies: immer) eine schlechte Wahl. Wenn Sie schnellen, browserübergreifenden Code schreiben möchten, sollten Sie DOM oder andere native Objekte (Object, String ...) nicht erweitern. Das Erweitern nativer Objekte kann ebenfalls Kompatibilitätsprobleme mit Bibliotheken usw. verursachen.Wenn Sie mehr über das Thema wissen wollen, würde ich vorschlagen, dass Sie einen Blick auf dieser ausgezeichneten Blog-Post nehmen: http://perfectionkills.com/whats-wrong-with-extending-the-dom/

Wenn ältere Versionen von IE unterstützt (IE6 & & 7) ist nicht wichtig für Sie, dann ist dies ist was du willst:

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

In deinem Beispiel ist das Problem, dass $ id ein Element zurückgibt. Ihr "doSomething" ist an die Funktion $ id gebunden, nicht an das Element, das zurückgegeben wird.

Dadurch funktioniert:

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

Answer 4

Anstatt das DOM-Objekt zu erweitern, warum es nicht wickeln, Art wie jQuery tut.

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