Reihenfolge der JS-Ausführung in HTML-Seiten

Question

Angenommen, ich habe etwas wie dieses

<script type="text/javascript" src="somefile.js"></script>
<div>something</div>
<script type="text/javascript">
// Some INLINE javascript
</script>

Ist (bei allen Browsern) gewährleistet, dass bei der Ausführung des Inline-JS-Codes sowohl somefile.js geladen wurde als auch das div davor bearbeitet werden kann?

Answer 1

Es ist garantiert, dass Sie auf den Code von somefile.js zugreifen können.

Das DOM ist jedoch zu diesem Zeitpunkt noch nicht fertig, so dass Sie nicht auf das div. Wenn Sie dies tun möchten, verwenden Sie das folgende Konstrukt:

<div>something</div>
<script type="text/javascript">
// document.write calls go here, not in onReady

function onReady() {
    document.getElementsByTagName('div')[0].setAttribute('class', 'loaded');
    // Or other inline JavaScript
}

if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', onReady, false);
} else {
    window.onload = onReady;
}
</script>

jQuery vereinfacht dies erheblich, Sie schreiben einfach

$(function() {
   // inline code ...
});