Frage zu JavaScript OOP

[PoWl89]

Hi!

In der Objektorientierten Programmierung geht es ja gerade darum, bestimmte reale oder irreale Objekte zu haben und ihnen Eigenschaften und Methoden zu geben. In HTML lässt sich das ja wunderbar anwenden, da eben jedes HTML-element so ein Objekt darstellen könnte.

Nun kann ich aus einem Element ja eine Referenz erzeugen die ja dann quasi ein Objekt darstellt.

<img src="bla.jpg" id="image">

<script>

var imageObj = document.getElementById('image');
imageObj.src = "blub.jpg";

</script>

Wenn ich nun allerdings noch Methoden und Eigenschaften dazu haben will bin ich immer so vorgegangen bisher:

<script>

function imageClass()
{
  var imageRef;

var bild;
  var nochwas;
...

this.init = function(Obj)
  {
    imageRef = document.getElementById(Obj);
  }

this.changeBorder = function(size)
  {
    imageRef.border = size;
  }
}

var imageObj = new imageClass();
imageObj.init("image");

imageObj.imageRef.src = "blub.jpg";
imageObj.changeBorder(3);

</script>

Die "Klasse" imageClass ist dazu da um Methoden und Eigenschaften für verschiedene Bilder bereit zu stellen. Nun erzeuge ich in imageObj ein neues Objekt von imageClass. Das ganze hat aber den Schönheitsfehler, dass Objekt nun nur als eine Ansammlung von Eigenschaften und Methoden alleine rumsteht, und ihr ihr HTML-element, zu dem sie gehört, nur in eine private Variable imageRef zugewiesen wird.

Wie man sieht muss jeder Zugriff aufs HTML-Objekt über diese erfolgen.
imageObj.imageRef.src = ...;

Es wäre viel schöner, wenn man eine Referenz auf ein HTML-Element erzeugen und dieser dann direkt Methoden und Eigenschaften übertragen könnte.

dann könnte ich sowohl den Pfad der Bilddatei als auch den Rahmen wie folgt ändern:
imageObj.src = "blub.jpg";  // Referenz auf HTML-element
imageObj.changeBorder(3);   // Und zugleich JS-Objekt mit Methoden und Eigenschaften

Das hätte z.B. den Vorteil dass ich das JS-Objekt direkt über das HTML-element ansprechen kann. Oder auch direkt aus dem HTML-element heraus mit this:

<img src="bla.jpg" onclick="this.changeBorder(3)">

ist sowas möglich?

lg PoWl