Aufbau einer Internetseite
Damit es in JavaScript Objekte gibt, sollte hier geklärt sein.
Nun hilft es uns, die Webseite zu verstehen, wenn wir wissen, dass diese auch als Objekt innerhalb des Browsers dargestellt werden.
Document Object Model
Bei jedem Aufruf einer Internetseite erstellt der Browser im Arbeitsspeicher ein Model, welches als "Document Object Model" bezeichnet wird. Oder kurz gesagt DOM.
Das DOM können wir uns wie ein Baum mit seinen abzweigenden Ästen vorstellen. JavaScript nutzt dieses Model, um damit auf den Inhalt der Webseite zugreifen zu können. Die Punkte, an denen die Äste vom Stamm abzweigen, werden als Knoten bezeichnet. Im Englischen sagt man auch Nodes.
Die verschiedenen Knotentypen
Die Knotentypen, mit denen wir am häufigsten zu tun haben werden, sind.
Der Dokumentenknoten
Er steht für die gesamte Webseite und ist so was wie die Wurzel und wird deshalb auch als Wurzelknoten bezeichnet.
Der Elementknoten
Er steht für jedes einzelne HTML Element auf der Webseite.
Der Attributknoten
Der Attributknoten steht für die Attribute der HTML-Elemente. Der Attributknoten zählt übrigens nicht als Kindknoten, weil er hieraisch gesehen kein Unterobjekt vom HTML Element ist.
Der Textknoten
Der Text innerhalb von HTML Elementen wird als Textknoten bezeichnet. Textknoten können selber keine Kindknoten haben. Sie sind sozusagen das Ende vom Ast oder die Knospe bzw. das Blatt am Baum.
Der Dokumentenknoten
Er ist der Einstiegspunkt für das DOM und wird über das globale Objekt "document" repräsentiert.
"document" verfügt über mehrere Eigenschaften und Methoden.
Eine Eigenschaft ist zum Beispiel "document.title", darüber können wir uns den Titel der Webseite ausgeben lassen.
console.log(document.title); // Titel der Webseite
Der Aufbau des Document Object Model, also der Inhalt wie Knotentypen oder welche Eigenschaften und Methoden es gibt usw. ist in der DOM API festgehalten. Die DOM API ist eine Spezifikation des W3C (World Wide Web Consortium). Die API (Application Programming Interface) gilt auch für andere Programmiersprachen wie C++ oder Java.
Elemente selektieren
Bevor wir irgendwas auf der Seite verändern können, müssen wir das Element erst selektieren, also auswählen.
Die DOM API gibt uns dazu mehrere Möglichkeiten vor. Selektierungen können unter anderem anhand der "Id", "Klasse", "TagName" und noch mehr erfolgen. Zur Vorbereitung werden wir unsere HTML-Datei ("index.html"), verändern / erweitern und eine CSS-Datei mit einbinden, in der verschiedene Klassen deklariert sind.
<!DOCTYPE html>
<html lang="de">
<head>
...
<link href="design.css" rel="stylesheet">
</head>
<body>
...
<main>
<h1>Übungsseite</h1>
<p class="klasse1">Ich habe klasse1 als Attribut</p>
<p class="klasse2">Ich habe klasse2 als Attribut</p>
<p id="drittertext">Ich habe eine ID als Attribut</p>
</main>
<script src="main.js"></script>
</body>
</html>In der CSS-Datei erstellen wir 2 Klassen, um mit JavaScript die Elemente im Laufe des Programms eine neue Klasse zuweisen zu können.
.klasse1 {color: blue;}
.klasse2 {color: green;}
Auf der Webseite sollte es jetzt in etwa wie folgt aussehen:
Elemente per ID selektieren
Wenn ein Element auf einer Webseite als Attribut eine Id hat, dann können wir es mit JavaScript gezielt über diese Id ansprechen.
Dazu verwenden wir die Methode "getElementById" und übergeben ihr die Id von dem Element als Zeichenkette.
Dazu nehmen wir die Id "drittertext" vom <p>-Element und weisen dieser Id eine Klasse in CSS zu.
document.getElementById('drittertext').className = 'klasse1';
Über "document.getElementById('drittertext')" sprechen wir die Id des Elements an, und mit "className = klasse1" weisen wir dem Element die Klasse "klasse1" zu.
Nach der Eingabe in der Konsole und das bestätigen über die Entertaste sollte der Text mit der ID, die gleichen Eigenschaften aufweisen wie der Text mit der Klasse "klasse1".
In der Praxis macht es durchaus Sinn zu prüfen, ob es überhaupt ein Element mit der Id "drittertext" gibt, bevor man irgendwelche Befehle ausführen lässt und es dadurch zu Laufzeitfehler kommt.
if (document.getElementById('drittertext') !== null) {
document.getElementById('drittertext').className = 'klasse1';
}
Nur wenn es die ID "drittertext" gibt, wird auch die Anweisung im Codeblock ausgeführt.
Elemente per Klasse selektieren
Die Selektierung der Id gibt uns die Möglichkeit, auf einzelne Elemente zugreifen zu können. Wenn wir allerdings mit mehreren Elementen gleichzeitig arbeiten möchten, dann verwendet man dazu Klassen wie auch in CSS. Als Erstes spielen wir einen Runde Stadt, Land, Fluss, um damit ein Paar Daten für eine Tabelle zu sammeln. Die Daten werden verständlicherweise in der "index.html" eingetragen.
<!DOCTYPE html>
<html lang="de">
<head>
...
<link href="design.css" rel="stylesheet">
</head>
<body>
...
<table>
<tr class="ungerade"><th>Stadt</th><th>Land</th><th>Fluss</th></tr>
<tr class="gerade"><td>Essen</td><td>Elfenbeinküste</td><td>Ems</td></tr>
<tr class="ungerade"><td>Nürnberg</td><td>Niederlande</td><td>Nil</td></tr>
<tr class="gerade"><td>Tübingen</td><td>Türkei</td><td>Themse</td></tr>
<tr class="ungerade"><td>Wien</td><td>Weißrussland</td><td>Weser</td></tr>
<tr class="gerade"><td>Florenz</td><td>Finnland</td><td>Fulda</td></tr>
</table>
<script src="main.js"></script>
</body>
</html>Nun haben wir genug HTML-Elemente, auf die wir zugreifen können.
Über JavaScript machen wir das mit der Methode "document.getElementsByClassName".
Achtung!
Achtung, auch wenn sich die Schreibweise zu den Id´s ähnelt.
Wenn wir mit Klassen arbeiten, dann reden wir von einer Mehrzahl der Elemente und dann haben wir ein s bei Elements.
document.getElementsByClassName" ist eine Knotenliste, ähnlich wie ein Array.
Diese Liste enthält ziemlich viele Informationen, der Aufruf dieser Liste ist ganz einfach.
console.log(document.getElementsByClassName('gerade'));
Nun bekommen wir eine kleine Übersicht zu den gefundenen Elementen.
Über einen Klick auf die kleinen Pfeile klappt sich eine größere Übersicht auf, die weitere Informationen über die einzelnen Elemente bereithält. Das ist aber an dieser Stelle etwas zu weit ausgeholt, daher gehen wir wieder zurück und nehmen einfach hin, dass wir über den Rückgabewert auch die Information erhalten, wie viele Elemente es gibt.
console.log(document.getElementsByClassName('gerade').length);
Der Rückgabewert ist 3.
Gerade bei Tabellen ist es schwer vorherzusagen, welche Ausmaße diese annehmen werden.
Daher bietet es sich an, mit der "for"-Schleife zu arbeiten, um die Elemente zu selektieren
let geradeZeile = document.getElementsByClassName('gerade');
if (geradeZeile.length > 0) {
for (let i=0; i < geradeZeile.length; i++) {
geradeZeile[i].style.backgroundColor = 'beige';
}
}
Als Erstes erstellen wir die Variable "geradeZeile". Mit der Methode "getElementsByClassName" selektieren wir die Elemente der Klasse "gerade" und weisen diese der Variablen zu.
Danach fragen wir, ob die Variable eine Länge hat, die größer ist als 0.
Wenn das der Fall ist, dann greift unsere "for"-Schleife und setzt jedes Element der Klasse "gerade" auf die Hintergrundfarbe "beige".
Und weil es so schön war, machen wir das Ganze als Übung für die ungeraden Zeilen. Mit der Hintergrundfarbe "peachpuff", um diese zu unterscheiden.
let ungeradeZeile = document.getElementsByClassName('ungerade');
if (ungeradeZeile.length > 0) {
for (let i=0; i < ungeradeZeile.length; i++) {
ungeradeZeile[i].style.backgroundColor = 'peachpuff';
}
}
Nach Elementnamen selektieren
Die Methode "getElementsByTagName" selektiert alle Elemente mit demselben Elementnamen.
let jedeZeile = document.getElementsByTagName('tr');
if (jedeZeile.length > 0) {
for (let i=0; i < jedeZeile.length; i++) {
jedeZeile[i].style.fontSize = '150%';
}
}
Wie bereits bei den Klassen erstellen wir eine Variable für unsere HTML-Elemente die verändert werden sollen. Dann prüfen wir, ob die Elemente vorhanden sind und wenn dem so ist, dann ändern wir die Größe der Schrift auf 150%.
Weitere Selektierungsmöglichkeiten
Andere Methoden wären das Selektieren per Selektor oder das Selektieren der Eltern-/ Geschwister-/ oder Kindelemente sowie der Zugriff über den Dokumentknoten und des Elementtyps.
Mit Textknoten arbeiten
Wenn wir ein oder mehrere Elemente selektiert haben, dann beginnen wir mit den Veränderungen. Wir können Texte, Attribute oder Elemente hinzufügen oder entfernen. Die einzelnen Eigenschaften und Methoden dazu gehen wir jetzt mal an. Als Erstes benötigen wir ein paar Elemente, mit denen wir arbeiten können, also erstellen wir diese in unserer HTML-Datei.
<ul id="news">
<li><strong>News: </strong>USA, China und Russland unterzeichnen als erste Nationen gemeinsam den <u>Weltfriedensvertrag.</u></li>
</ul>Der Text auf einer Website wird als Textknoten in der DOM-Struktur repräsentiert.
Um auf den Text eines Elements zugreifen zu können, verwenden wir die Eigenschaft "textContent".
"textContent" hat den Vorteil, dass eventuell vorkommende markup´s (wie bei uns die <strong> und <u> Tags) völlig ignoriert werden.
Das bedeuten, wir bekommen den reinen Text ausgegeben.
console.log(document.querySelector('#news').textContent);
Die Rückgabe ist nur der Text ohne die Auszeichnungen <strong> oder <u>.
Um nun den Text zu ändern, übergeben wir einfach den neuen Text an die Eigenschaft "textContent"
document.querySelector('#news').textContent = 'News: Der Welto als neue Weltwährung wird bereits gedruckt.';
Der Inhalt wurde erfolgreich überschrieben.
Über die Eigenschaft "textContent" ist es aber nicht möglich den Text mit entsprechender Auszeichnung wie <strong> oder <u> zu versehen.
Wer aber möchte das die Auszeichnung des Textes mit berücksichtigt wird, der verwendet die Eigenschaft "innerHTML".
console.log(document.querySelector('#news').innerHTML);
"innerHTML" liefert uns das gesamte <li> Element und die darin enthaltenen Auszeichnungen zurück.
Achtung, wir haben uns gerade die gesamte Liste ausgeben lassen. Wir benötigen aber nur das erste Element, also schreiben wir:
console.log(document.querySelector('#news li:nth-Child(1)').innerHTML);
Jetzt bekommen wir auch nur das erste Element innerhalb der Liste ausgegeben.
Um neuen Inhalt mit Auszeichnung zu übergeben, setzen wir ihn einfach wie bei TextContent mit hinten an.
document.querySelector('#news li:nth-Child(1)').innerHTML = '<strong>News: </strong>Der Welto als neue <u>Weltwährung</u> wird bereits gedruckt.';
Weitere Selektierungsmöglichkeiten
Des Weiteren können wir die Elemente direkt ansprechen oder sie über ihre Attribute selektieren.
Weiter mit Ereignisgesteuerte Programmierung