info@a-coding-project.de

JavaScript Beispiele: Eindeutigkeit

Bei der Programmierung mit JavaScript treten des öfteren Probleme mit der Benennung von Objekten, Eigenschaften und Variablen auf. Wie man damit umgeht, zeigen wir hier.

Alle Objekte mit gleichem tagName

Ein Identifier ist an sich dazu gedacht, ein Objekt eindeutig zu bezeichnen. Doch dieses "eindeutig" ist leider nicht immer gegeben. Was kann man tun, wenn mehrere Objekte den selben Identifier tragen, oder gar keinen? Nun - man kann etwa mit der Methode tags() arbeiten.
Mit tags() kann man aus zahlreichen Kollektionen all jene Elemente herausgreifen, die einen bestimmten tagName aufweisen.- ob sie nun einen eindeutigen Identifier tragen, einen uneindeutigen Identifier oder gar keinen Identifier.
Das ist besonders dann günstig, wenn man nicht von vornherein weiß, wie viele derartige Objekte es in einem "Container" geben wird. ("Container" ist der Programmierer-Jargon für alles, was eine gewisse Klasse von Objekten enthält.) Man weiß nur, dass ALLE Objekte im Container, die einen gewissen tagName aufweisen, in der gleichen Weise behandelt werden sollen.
Als Beispiel betrachten wir folgenden Code:

var coll = document.all.tags("P");
if (coll!=null) 
{
  for (i=0; i<coll.length; i++) 
    coll[i].style.textDecoration="underline";
}

In der ersten Zeile werden unter dem Namen coll all jene Objekte im Dokument herausgegriffen, die den tagName "P" aufweisen. (In diesem Beispiel ist also der "Container" einfach das ganze Dokument!) In den meisten Dokumenten werden das ziemlich viele sein - und wie greift man nun auf jedes einzelne davon zu?
Sehr einfach - indem man coll behandelt wie ein gewöhnliches Array, also durch Indizierung (coll[i]) Und Zugriff auf die einzelnen Attribute eines solchen Objekts hat man dann, wie gewohnt, durch Qualifizierung, mit einem Punkt (.) und dem Namen des gewünschten Attributs.
Auf diese Weise kommen wir zu der - zunächst vielleicht verwirrenden - Zeile in der for-Schleife:

coll[i].style.textDecoration="underline";

Für jene eingefleischten Programmierer unter uns, denen das noch längst nicht genügend abstrus ist - wer das möglichst kompakt programmieren will, der kann das natürlich auch so schreiben:

document.all.tags("P")[i].style.textDecoration="underline";

Dadurch erspart man sich immerhin eine ganze Zeile Code, nämlich die Deklaration der Variable coll
Beachten Sie die Feinheit, dass hier eine runde und eine eckige Klammer unmittelbar aufeinander folgen:

... .tags("P")[i]

Die Verwirrung wird noch größer, wenn man daran denkt, dass in einer anderen Methode beide Indizes innerhalb einer Klammer geschrieben werden: ... .item("...",i) Doch davon mehr in der nächsten Folge.

Was macht man mit einem uneindeutigen Identifier?

Wenn man von einem Objekt nur einen Identifier weiß, bei dem man sich aber nicht darauf verlassen kann dass er eindeutig ist, wie kann man dann darauf zugreifen? - Mit der Methode item() geht auch das!
Nehmen wir mal an, wir hätten folgende HTML-Konstruktion:

<DIV ID="div1">
<INPUT ID="t1" TYPE="Text" VALUE="uuu">
<INPUT ID="t2" TYPE="Text" VALUE="vvv">
</DIV>
<DIV ID="div2">
<INPUT ID="t1" TYPE="Text" VALUE="xxx">
<INPUT ID="t2" TYPE="Text" VALUE="yyy">
</DIV>

Wie können Sie da auf t1 und t2 zugreifen?
Sie könnten z.B. versuchen, das mit mehrfacher Qualifikation zu tun, etwa:

div1.t1.value = "aaa";

Doch leider, das kann JavaScript nicht. Da muss man das ein wenig umständlicher machen:

div1.children.item('t1',0).value = "aaa";

children ist eine Collection aller Objekte im Inneren von div1 - in diesem Fall also die Text-Inputs t1 und t2.
Fatalerweise aber ist es bei item() nicht so, wie wir das bei tags() kennen gelernt haben, dass man diese Collection wie jedes gewöhnliche Array behandeln dürfte - also zum Beispiel:

var texts = div1.children.item('t1');
texts[0].value = "aaa";
//oder:
texts.item(0).value = "aaa"; 
//oder gar:
div1.children.item('t1')[0].value = "aaa"; 

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant