Auf HTML-Befehle zugreifen über das JavaScript getElementsByType
Wir können auch direkt über das DOM mit JavaScript auf HTML-Elemente zugreifen. Dazu gibt es die JavaScript-Anweisung document.getElementsByTagName("h1").
Schauen wir das an unserem bisherigen Beispiel-Webseite an:
<html>
<head>
<title>Seitentitel</title>
</head>
<script>
window.addEventListener("load", function() {
}, false );
</script>
<body>
<h1>Überschrift 1</h1>
<p>Erster Absatz mit Text</p>
<p>Zweiter Absatz mit Text</p>
<a href="https://www.javascript-kurs.de/">Text des Links</a>
</body>
</html>
Zum besseren Verständnis die entsprechende DOM-Baumstruktur.
Jetzt greifen wir über JavaScript-Anweisung document.getElementsByTagName("h1") direkt auf unser HTML-Element <h1> zu, dass es auf dieser Seite nur einmal gibt. Allerdings werden wir eine Überraschung erleben, wenn wir versuchen, denn Inhalt des Elements zu Nutzen. Zum Test lassen wir es in der Konsole ausgeben:
window.addEventListener("load", function() {
console.log(document.getElementsByTagName("h1"));
} );
Wir bekommen in der Konsole als Ausgabe eine "HTMLCollection".
Klarer wird es, wenn wir den Inhalt unsere Elemente <p> ausgeben lassen. Hier haben wir in unserem Beispiel bereits 2 Absätze:
window.addEventListener("load", function() {
console.log(document.getElementsByTagName("p"));
} );
Wir bekommen als Meldung in der Konsole:
HTMLCollection(2) [p, p] 0: p 1: p length: 2 __proto__: HTMLCollection
Alleine schon in der Anweisung die Mehrzahl bei getElements zeigt uns, dass hier davon ausgegangen wird, dass mehrere Elemente zurückgeliefert werden können. Wieder haben wir es mit einem Array zu tun.
Wir können nun gezielt auf den Inhalt eines bestimmten Elements zugreifen über die Index-Nummer.
window.addEventListener("load", function() {
console.log(document.getElementsByTagName("p")[0]);
} );
Somit bekommen wir den Inhalt des ersten Elements (zur Erinnerung – Arrays fangen bei 0 mit der Zählung an) angezeigt.
In den meisten Fällen möchte man ein bestimmtes Element und nicht eine Sammlung von vielen Elementen. Allerdings gibt es durchaus HTML-Elemente, die nur einmal auf einer HTML-Seite vorkommen sollten. Dazu gehört zum Beispiel der <title>-TAG. Und hier können wir dann ohne viel Aufwand über getElementsByTagName darauf zugreifen.
console.log(document.getElementsByTagName("title")[0]);
Wir müssen den HTML-Code also weder mit eine ID noch meiner einer Klasse erweitern. Hier ist eine Stärke von getElementsByTagName. Sollen auch alle HTML-Elemente einer Art ausgewählt werden, funktioniert getElementsByTagName super.
Auswählen von „nicht alle“ und nicht nur ein bestimmtes Element sondern eine Gruppe
Bisher haben wir die Möglichkeit, alle HTML-Elemente einer Art oder 1 über das Attribut ID bestimmtes Element auszuwählen.
Im folgenden Kapitel wollen wir eine festgelegte Gruppe – sprich eine Klasse von Elementen auswählen.
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
