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.

DOM Aufbau für unser Beispiel mit getElementsByTagName

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.

weitere eigene Projekte: