jQuery - Funktionen automatisch starten, sobald das DOM geladen ist

Manchmal ist es erwünscht und notwendig, JavaScript-Funktionen zu starten, sobald das Document Object Model (DOM) der betreffenden Website vollständig geladen ist. Dies ist etwa dann der Fall, wenn bestimmte Elemente des DOM erst im Nachhinein dynamisch erzeugt werden sollen; denkbar ist hier z. B. eine Funktion, die <div>- oder <img>-Elemente nach einer näher spezifizierten Vorschrift hinzufügt. Ein anderer Praxisfall wäre die Initialisierung einer komplexen Benutzeroberfläche. Hier muss zwangsläufig sichergestellt sein, dass sämtliche Objekte des Dokuments, die im JavaScript-Code per document.getElementById()- und document.getElementsByClassName()-Methoden bzw. deren Kurzformen (je nach verwendetem Framework) angesprochen werden, auch bereits im DOM bekannt sind.

Um dieses Verhalten annähernd herbeizuführen, hat man sich in der Vergangenheit damit beholfen, dem <body>-Tag des Dokumentes einfach als Attribut einen onLoad-Event-Handler hinzuzufügen. Dieser reagiert auf den Ladeabschluss des Fensters und führt anschließend eine oder mehrere im <head> formulierte Funktionen aus.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
<html>
	<head>
		<script type="text/javascript">
		  function eigene_funktion() {
			alert("Fenster geladen!");
		  }
		</script>
	</head>
	<body onLoad="eigene_funktion()"></body>
</html>

Dies ist aber schon allein aus zwei schwerwiegenden Gründen nicht genau das, was wir wollen. Einerseits ergibt sich hier ein stilistischer Konflikt; mit Event-Handlern im HTML-Code wird die an das MVC-Konzept angelehnte und damit eigentlich idealerweise angestrebte Trennung von Markup (Layoutauszeichnung) und Funktionalität durchbrochen. Andererseits wollen wir aber auch den Punkt abpassen, an dem das DOM geladen ist und nicht das Fenster mitsamt eventueller Grafikinhalte. Diese beiden Zeitpunkte fallen nämlich nicht zusammen; das DOM steht immer schon bereit, wenn das Fenster noch gar nicht durch den Browser dargestellt/gezeichnet worden ist.

Dem ersten Kritikpunkt, also den Verzicht auf Event-Handler im Markup, können wir zwar durch Verwendung eines Event-Handlers über window.onload direkt im JavaScript-Code entgegenwirken:

01:
02:
03:
04:
05:
06:
07:
08:
09:
10:
11:
12:
13:
<html>
	<head>
		<script type="text/javascript">
		  function eigene_funktion() {
			alert("Fenster geladen!");
		  }
		  window.onload = eigene_funktion;
		</script>
	</head>
	<body>
		<p>Nach vollst&auml;ndigem Laden des Fensters wird ein JavaScript-Alert ausgegeben!</p>
	</body>
</html>

Das beseitigt aber immer noch nicht das Problem bzw. erfüllt den Anspruch, dass es uns um den Zeitpunkt des DOM-Ladeabschlusses geht. Hier stellt jQuery mit der $(document).ready()-Methode als Event-Listener eine Alternative zur Verfügung, die genau den erwünschten Moment abfragt und dann im Erfolgsfall entsprechende Anweisungen ausführt, die ihr als Parameter in Form einer anonymen Funktion übergeben werden. Hier ein Codebeispiel, das auch die notwendige Einbindung der jQuery-Klasse im <head> berücksichtigt:

01:
02:
03:
04:
05:
06:
07:
08:
09:
10:
11:
12:
13:
14:
<html>
	<head>
		<script type="text/javascript" src="/js/jquery/jquery-1.8.2.min.js"></script>
		<script type="text/javascript">
 
			$(document).ready(function() {
			// Hier stehen die Anweisungen, die beim Ladeabschluss des DOM auszuführen sind.
			});
 
		</script>
	</head>
	<body>
	</body>
</html>

Es geht sogar noch kürzer, denn das Framework stellt dieselbe Methode auch unter dem simplen Bezeichner $() (eigentlich der Konstruktor der jQuery-Klasse und synonym mit jQuery()), dem als Parameter die anonyme Funktion übergeben wird, zur Verfügung:

01:
02:
03:
04:
05:
06:
07:
08:
09:
10:
11:
12:
<html>
	<head>
		<script type="text/javascript" src="/js/jquery/jquery-1.8.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				// Hier stehen die Anweisungen, die beim Ladeabschluss des DOM auszuführen sind.
			});
		</script>
	</head>
	<body>
	</body>
</html>

Hiermit kann man nun weiterarbeiten und z. B. zusätzliche Event-Listener definieren, die auf Aktionen an DOM-Objekten lauschen; angenommen, das erwünschte Ziel ist, alle <a>-Tags im Dokument mit einem Handler zu versehen, der beim Click-Event einen JavaScript-Alert hervorruft, realisieren wir dies einfach mit diesem Code:

01:
02:
03:
04:
05:
06:
07:
08:
09:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
<html>
	<head>
		<script type="text/javascript" src="/js/jquery/jquery-1.8.2.min.js"></script>
		<script type="text/javascript">
 
			$(document).ready(function() {
 
			$('a').click(function(){
				alert("Ein Klick hat stattgefunden.");
			});
 
			});
 
		</script>
	</head>
	<body>
		<a id="element_1">Element 1</a><br />
		<a id="element_2">Element 2</a><br />
		<a id="element_3">Element 3</a><br />
	</body>
</html>

Autorin: Maren Arnhold