Auf HTML-Befehle zugreifen über den JavaScript-Befehl getElementsByTagName()

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 uns das bei unserer 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.

DOM Aufbau für unser Beispiel mit getElementsByTagName

Jetzt greifen wir über die JavaScript-Anweisung document.getElementsByTagName("h1") direkt auf unser HTML-Element <h1> zu, das 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 unserer 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 die Mehrzahl in der Anweisung 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 über die Index-Nummer zugreifen.

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 einer ID, noch mit 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 ein über das Attribut ID bestimmtes Element auszuwählen.

Im folgenden Kapitel wollen wir eine festgelegte Gruppe, sprich eine Klasse von Elementen, auswählen.

Bitte unterstützen Sie dieses Projekt

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bestellen Sie über folgenden Link bei Amazon:
Bücher über JavaScript

Sie können uns auch eine Spende über PayPal zukommen lassen.

Vielen Dank für Ihre Unterstützung

weitere eigene Projekte: