Methoden und Prototype

[Gilles]

Hallo Leute,
Habe mich ein wenig mit prototype beschäftigt und habe dem document noch getElementsByClass hinzugefügt. Meine Frage ist nun: Kann ich auch eine Methode hinzufügen, die Ergebnisse aus anderen Methoden benutzt?
mal ein Beispiel was ich meine

document.getElementsByTagName("div").colorize();
// zurück gegeben: elemente
// nun in colorize auf elemente zugreifen
// elemente.colorize();

Hoffe das Beispiel ist einiger Maßen verständlich
Kann mir jemand sagen wie so etwas funktioniert? :)
Vielen dank schon einmal

-----------------

Habs nun doch heraus gefunden. Hab vergessen darauf zu achten, was für ein Objekt dabei raus kommt wenn ich mir die entsprechenden Elemente hole. natürlich ein Array mit Elementen
Dann muss man auch da mit Prototype eine Funktion anhängen.

Element.prototype.colorize = function (color) {
        this.style.backgroundColor = color;
      };

Array.prototype.colorize = function (color) {
        for(var i=0; i < (this.length); i++) {
          if(this[i] instanceof Element) {
            this[i].style.backgroundColor = color;
          } 
        }
        
      };

Ob das eine schöne Lösung ist weiss ich nicht. Nehme da gerne Kritik entgegen, da ich noch nicht ganz so fit mit prototype bin :)

 

[struppi]

An sich eine schöne Idee, sie funktioniert nur nicht im IE und getElements.. gibt kein Array zurück, sondern eine HTMLCollection. Weiß aber nicht ob du die prototypisch erweitern kannst.

 

[Gilles]

Hm Das ja echt doof mit IE. Grade mal ausgetestet. Gibt es denn eine andere Möglichkeit Prototype dort anzuwenden? Und zur HTML Collection. Also in Firefox funktioniert es super mit Array ^^ Aber vielen dank für die Antwort. Hatte es vergessen im IE zu testen. :)

 

[struppi]

prototype funktioniert im IE super, nur nicht mit DOM Elementen

Und bei mir funktioniert es auch nicht mit der Array Erweiterung.

 

[crash]

Der Internet Explorer kennt die ganzen DOM-Klassen nicht. getElementsBy(Tag)Name liefert ein NodeList, sein getElementsByClass hingegen nicht.

Wenn wir mal davon ausgehen, dass es den IE nicht gibt, dann würde ich Array.prototype.colorize weglassen und stattdessen folgendes schreiben:

elementenArray.forEach(function (e) { e.colorize() } );

 

[struppi]

Der Internet Explorer kennt die ganzen DOM-Klassen nicht. getElementsBy(Tag)Name liefert ein NodeList, sein getElementsByClass hingegen nicht.

Also bei mir liefern beide Funktionen das gleiche: HTMLCollection und bei elementenArray beschwert er sich dass er das nicht kennt

 

[crash]

Er benutzt aber eine eigene getElementsByClassName. So wie diese hier: [email protected] - javascript-q.git/blob - snippets/getElementsByClassName.js

 

[struppi]

ach so. Aber woher weißt du das?
Das ist aber ungünstig - da alle anderen Funktionen etwas anderes zurück geben.

 

[crash]

Woher ich weiß, dass er ein eigenes getElementsByClassName benutzt? Weil etwas anderes wenig Sinn ergeben würde und es so sein muss, weil er ein Array hat.

Man kann leider keine NodeListen selber erzeugen, weil IE NodeList nicht kennt; nimmt man also ein Array.

Bei meiner getElementsByClassName-Implementierung steht auch extra da:

* NOTE: getElementsByClassName() always returns a array, never a NodeList!

und die NodeList des nativen getElemenentsByClassName wird in ein Array umgewandelt:

return Array.prototype.slice.call((scope || document).getElementsByClassName(className));

 

[Gilles]

Hello again ;)
Wie crash schon richtig erraten hat habe ich die getElementsByClass Funktion selbst geschrieben (Auch wenn nicht so schön wie die gepostete Version :)) Hatte auch gehofft, dass es durch den ersten Satz klar wird. Muss mich demnächst mal etwas besser ausdrücken . Hier mal die Funktion.

Document.prototype.getElementsByClass = function (className, tags) {
        if(tags == undefined) tags = "*";
        var newElement = new Array();
        var element = document.getElementsByTagName(tags);
        for(i = 0; i < element.length; i++)
        {
          if(element[i].className == className) {
            newElement[newElement.length] = element[i];
          }
        }
        if(newElement.length == 0) return false;
        return newElement;
      };

Eigentlich sollte die Funktion ja auch nur eine Aufwärmübung sein, um mich in Prototype einzuarbeiten. Aber echt Schade, dass IE die DOM Elemente nicht kennt. Gibt es da irgend einen Kniff den man sich zu nutzen machen kann, um diese Funktionen auch im IE zum laufen zu bringen? (Funktionen, die DOM Objekte erweitern sollen).
Vielen dank nochmals für die Ratschläge :)

 

[struppi]

Ich hab den ersten Satz zwar gelesen, aber irgendwie nicht aufgenommen ;-) - du weißt aber, dass neue Browser eine solche Funktion mittlerweile eingebaut haben?

Und zu deiner Frage, meines Wissens geht das nicht, du musst es so machen, wie es die meisten Frameworks machen, um die Objekte dein eigenes Objekt bauen.

 

[mermshaus]

Problem mit der Funktion: <div class="eineklasse diegesuchteklasse"> Würde das Element gefunden?

addClass, removeClass, hasClass - JavaScript - Snipplr

 

[crash]

Was hat das mit addClass() etc zu tun?

Da habe ich im übrigen auch einen Wrapper für classList : [email protected] - javascript-q.git/blob - snippets/addClass.js

 

[mermshaus]

Was hat das mit addClass() etc zu tun?

Diese Bedingung aus Gilles' Funktion...

if(element[i].className == className) {
    newElement[newElement.length] = element[i];
}

...müsste imo durch ein hasClass ersetzt werden. Ich habe bloß die erste passende Funktion, die ich gefunden habe, verlinkt. Die steht auch auf der Snippet-Seite.

[noparse][email protected] - javascript-q.git/blob - snippets/getElementsByClassName.js
[email protected] - javascript-q.git/blob - snippets/addClass.js[/noparse]

Schick. Bisschen unübersichtlich vielleicht. Du magst den ternary operator, was? :)