Html Elemente identifizieren mit Dart

In den bisherigen Posts haben Sie einen ersten Zugang zu diesem Thema bekommen. Anhand von Visual Studio Code wurde das Erstellen eines Templates besprochen, um im nächsten Post das erste Mal mit Dart auf ein Html Element zu zugreifen.

Wichtig ist das Prinzip zu verstehen: Wir haben zwei Dateien, eine Html Datei und eine Dart Datei.

Damit der Code in der Dart Datei auf Html Dokument zugreifen kann, muss er das gesuchte Html Element identifizieren können !

Beispiel 1 Html:

<input type="number" id="nummer" name="zaehler" value="999">

Ein einfaches Html input Element. Mit der type Zuweisung von "number" generieren Sie ein Zahlenfeld mit Bedienelementen. Außerdem wird mit value der Initialwert des Feldes auf 999 gesetzt.

Die einfachste Variante dieses Element zu identifizieren ist die id. Sie muss einzigartig im ganzen Html Dokument sein. Aber auch über type, name und, falls vorhanden class, können Sie dieses Element mit Dart identifizieren.

Beispiel 2 Dart:

querySelector('[name="zaehler"]')

Hier sehen Sie den entsprechenden Dart Befehl dazu. querySelector(...) .  In diesem Beispiel identifizieren Sie das Element über die name Eigenschaft.

querySelector('input')

Das selbe, diesmal aber mit dem Namen des Html Elements selbst. Das ist im ersten Moment keine zuverlässige Methode. Sollten Sie mehrere input Elemente in Ihrem Html Dokument haben, wird dieser Code das erste davon retournieren !

querySelector('#nummer')

Zum Abschluss die Version die id als Referenz benutzt.

Das Prinzip dürfte klar sein: Bevor Sie ein Html Element manipulieren können, müssen Sie es identifizieren.

Das Html Element verändern:

 var meinWert = (querySelector('#nummer') as InputElement).value;

Betrachten Sie den Code im Detail:

Mit querySelector(...) sprechen Sie das Input Element anhand seiner id Bezeichnung an. Mit as InputElement wird das Element in ein Dart Objekt umgewandelt.

In der typischen Punktnotation .value greifen Sie anschliessend auf den Wert dieses Objekts zu. Dieser wird der Variablen meinWert zugewiesen und könnte jetzt weiter verwendet werden. Wenn Sie den Wert des Input Elements setzen möchten, geht das natürlich auch:

NumberInputElement meinWert = querySelector('#nummer');

meinWert.value = '33';

In der ersten Zeile wird ein Objekt vom Typ NumberInputElement definiert. Ihr wird das Html Element zugewiesen, und somit zu einem Dart Objekt. 

Mit meinWert.value = '33' wird der Wert dementsprechend gesetzt. 

Bis bald.