Zugriffe auf Klassen in JavaScript unter Firefox 49

Hinweis für den Dozenten ► Hier Klassen in SIL kurz erklären: Es handelt sich praktisch um id's, die aber auch mehrfach verwendet werden dürfen.

Das DOM enthält auch spezielle Wirkfunktion zum Einwirken auf die Klassen eines Elements und spezielle Meßfunktionen, um die Klassen eines Elements zu ermitteln.

In HTML können Klassen zur Kennzeichnung von Elementen verwendet werden. Anders als bei Kennungen ist es dabei erlaubt, daß eine Klasse mehreren Elementen oder ein Element mehreren Klassen zugeordnet werden kann.

Beispieldokument für diese Lektion

userpage.fu-berlin.de/~ram/pub/xhtml_jf47ht81Ht/723551

userpage.fu-berlin.de/~ram/pub/html_jf47ht81Ht/723551

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
html { font-family: Sans-Serif; font-size: 20vmin; font-weight: bold; }
[href] { background-color: lavender; }
.r { color: palegreen; }
</style></head><body>
<p>0 <a id="a">1</a> 2</p>
<pre><code><script>/*<![CDATA[*/
/*]]>*/</script></code></pre></body></html>

Wir definieren zunächst eine Abkürzung für den Anker.

Auswertung

a = document.getElementById( "a" )

<a id="a">

Nun definieren wir eine Abkürzung für die Liste der Klassen des Ankers.

Auswertung

c = a.classList

DOMTokenList [  ]

Der Name »c« ist durch die Zuweisung an die Klassenliste des Dokuments gebunden worden, so daß Veränderungen an »c« sich sofort auf das Dokument auswirken.

Mit »toggle« wird eine Klasse in der Klassenliste „umgeschaltet“: Das heißt, daß sie hinzugefügt wird, falls sie noch nicht in der Klassenlisten vorkommt, und sonst aus der Klassenliste entfernt wird.

Auswertung

a.outerHTML

"<a xmlns="http://www.w3.org/1999/xhtml" id="a">1</a>"

Auswertung

a.getAttribute( "class" )

null

Auswertung

c.toggle( "r" ); a.outerHTML;

"<a xmlns="http://www.w3.org/1999/xhtml" id="a" class="r">1</a>"

Auswertung

a.getAttribute( "class" )

"r"

Die Klassenliste kann in der Konsole auch direkt angezeigt werden.

Auswertung

DOMTokenList [ "r" ]

Durch ein erneutes »toggle« kann die angegebene Klasse »r« wieder aus der Klassenliste entfernt werden.

Auswertung

c.toggle( "r" ); a.outerHTML;

"<a xmlns="http://www.w3.org/1999/xhtml" id="a" class="">1</a>"

Genau falls von einem »toggle« die Klasse hinzugefügt wurde, ist der Wert jenes hinzufügenden »toggle« gleich »true«.

Auswertung

c.toggle( "r" );

true

Auswertung

c.toggle( "r" );

false

Man beachte, daß das Umschalten der Klasse mit »toggle« auch im Hauptfenster des Browser an einer Änderung der Schriftfarbe erkennbar ist.

Um mit JavaScript das Erscheinungsbild eines Elements (einer Webseite) zu verändern, gibt oder nimmt man diesem Klassen, für die man entsprechende CSS -Regeln festlegt. Insbesondere kann ein Element auf diese Weise auch sichtbar oder unsichtbar gemacht werden.

Mit »add« wird sichergestellt, daß ein Element eine bestimmte Klasse hat.

Auswertung

c.add( "r" ); a.outerHTML;

"<a xmlns="http://www.w3.org/1999/xhtml" id="a" class="r">1</a>"

Wenn das Element die Klasse schon hat, ändert ein »add« nichts.

Auswertung

c.add( "r" ); a.outerHTML;

"<a xmlns="http://www.w3.org/1999/xhtml" id="a" class="r">1</a>"

Auch weitere Klassen können hinzugefügt werden.

Auswertung

c.add( "s" ); a.outerHTML;

"<a xmlns="http://www.w3.org/1999/xhtml" id="a" class="r s">1</a>"

Auswertung

a.getAttribute( "class" )

"r s"

Es ist ebenfalls möglich, mehrere Klassen mit einem Aufruf hinzuzufügen. (»toggle« kann hingegen nur mit einem Argument aufgerufen werden.)

Auswertung

c.add( "x", "y", "z" ); a.outerHTML;

"<a xmlns="http://www.w3.org/1999/xhtml" id="a" class="r s x y z">1</a>"

Einzelne Klassen können auch wieder gezielt entfernt werden.

Auswertung

c.remove( "y", "z" ); a.outerHTML;

"<a xmlns="http://www.w3.org/1999/xhtml" id="a" class="r s x">1</a>"

Die Funktion »contains« erlaubt es, auszusagen, daß eine Klasse in der Klassenliste enthalten ist.

Auswertung

c.contains( "z" )

false

Auswertung

c.contains( "r" )

true

Verbundene Listen

Das Objekt »c« ist eine verbundene Liste (“live list ”), das heißt, daß diese Liste mit dem DOM verbunden ist, so daß Änderungen an der Liste sofort im DOM erscheinen und Änderungen am DOM sofort in der Liste erscheinen.

Übungsaufgaben

Zur Erleichterung der Bearbeitung können Sie an Stelle von »document.getElementById« auch weiterhin NAOTWO zum Elementzugriff verwenden, oder erst zum Schluß – nachdem die Aufgabe gelöst ist – NAOTWO durch den Einsatz von »document.getElementById« ersetzen.

Zur Erleichterung der Bearbeitung können Sie an Stelle von »addEventListener« auch weiterhin on-Attribute verwenden, also beispielsweise an Stelle von »span.addEventListener( "click", () => span.innerHTML = 1 );« in einem Skript-Element »onclick="span.innerHTML=1"« als Attribut des span-Elements.

Durch NAOTWO (“named access on the window object ”, NAOTWO, sprich “now two ”) werden die im HTML-Quelltext mit »id=« festgelegten Elementkennungen, falls möglich, in JavaScript als globale Namen zur Verfügung gestellt. (Siehe auch: https://www.w3.org/TR/html5/browsers.html#named-access-on-the-window-object).

Unter HTML-Quelltext versteht man Text, der in HTML geschrieben wurde – also beispielsweise »id=« enthält. – Etwa im Gegensatz zu der von einem Browser angezeigten Webseite.

Zur Erleichterung der Bearbeitung können Sie bei Übungsaufgaben in den folgenden Lektionen an Stelle von polyglottem HTML auch weiterhin SIL verwenden. Dabei kann vor den SIL-Code ein style-Element gesetzt werden und hinter den SIL-Code ein script-Element. Die drei leeren Zeilen in dem folgenden SIL-Dokument können jeweils mit CSS -Code, HTML-Code beziehungsweise JavaScript -Code befüllt werden.

Main.html

<style>
</style>
<script>

</script>

Unter HTML-Quelltext versteht man Text, der in HTML geschrieben wurde – also beispielsweise »id=« enthält. – Etwa im Gegensatz zu der von einem Browser angezeigten Webseite.

/ Übungsaufgabe

Laden Sie das oben angezeigte Dokument zunächst in einen Editor, so daß Sie es dort überarbeiten können.

Fügen Sie eine CSS -Regel für eine Klasse »unsichtbar« zum Dokument hinzu, so daß Elemente mit dieser Klasse nicht angezeigt werden.

Fügen Sie diese Klasse dann von der Konsole aus zum Anker-Element hinzu und entfernen Sie sie wieder vom Anker-Element und beobachten Sie dabei, wie das Element abwechselnd verschwindet beziehungsweise wieder erscheint.

/ Übungsaufgabe

Fügen Sie eine Funktion namens »switch« zum Anker-Element hinzu, welche die Klasse unsichtbar umschaltet und rufen Sie diese dann wiederholt auf.

Das Hinzufügen von Funktionen zu DOM -Verzeichnissen wird hier nur zu Übungszwecken behandelt. Es ist für die Praxis nicht zu empfehlen, da DOM -Verzeichnisse sich anders als normale JavaScript -Verzeichnisse verhalten dürfen und das Hinzufügen von Einträgen durch den Programmierer zu unübersehbaren Konsequenzen führen kann.