Um DOM Elemente im Browser zu manipulieren muss man warten bis der Browser die entsprechenden Elemente fertig geladen hat bevor man  per JavaScript auf diese zugreifen kann.

window.onload

Hier gibt es im Prinzip eine einfache Möglichkeit. Man wartet bis der Browser die onload Methode aufruft. Dahinter hängt man dann die eigentliche Funktion zum Manipulieren der Elemente

<script>
window.onload = function() {
// tue was immer du tun musst
});
</script>

Leider wird diese Methode erst aufgerufen wenn sämtliche DOM Elemente auch wirklich fertig geladen sind, sprich auch Grafiken und weitere externe Ressourcen. Das ist natürlich ungünstig, da man schon mit der DOM Manipulation anfangen könnte, aber man letztlich doch noch nicht aufgerufen wird.

jQuery kann helfen

Möchte man also nicht von window.onload abhängig sein, so muss man einen anderen Weg finden um dies zu tun. Doch ganz so einfach ist das leider nicht. Denn verschiedene Browser und deren Versionen (ja, wir sind auch schuld) erfordern unterschiedliche Ansätze. Wer das mal im Detail lesen möchte der kann sich hier zwei ältere Blog Posts mal reinziehen.

The window.onload Problem - Solved!
window.onload (again)

Bevor man sich nun selbst eine Lösung strickt würde ich immer auf eine bestehende zugreifen. Und eine Möglichkeit ist einfach jQuery einzusetzen.

Mit jQuery sieht der Aufruf fast identisch aus

<script>
$(function() {
// tue was immer du tun muss
});
</script>

die Funktion wird ausgeführt sobald man Zugriff auf das DOM hat, praktisch!

DotNetKicks-DE Image