JavaScript はトップダウンの順序で実行されます。特に指定しない限り、JavaScript コードはページがロードされるまで待機せずに実行されます。たとえば、Web ページには次の HTML コードが含まれています。
次のようにコードをコピーします。
<div id="ele">www.VeVB.COm へようこそ</div>
HTML コードのこの行の前に次の JavaScript コードを追加すると、次のようになります。
次のようにコードをコピーします。
<script type="text/javascript">
document.getElementById('ele').innerHTML= '私のブログへようこそ';
</script>
ページを実行すると、「document.getElementById('ele') が null です。」というエラー メッセージが表示されます。これは、上記の JavaScript を実行すると、ページに ID が「ele」の DOM 要素が存在しないためです。
解決策は 2 つあります。
1. JavaScript コードを HTML コードの後に配置します。
次のようにコードをコピーします。
<div id="ele">www.VeVB.COm へようこそ</div>
<script type="text/javascript">
document.getElementById('ele').innerHTML='私のブログへようこそ';
</script>
2. Web ページがロードされるまで待ってから、JavaScript コードを実行します。従来の解決策 (ロード) を使用できます。最初に HTML 本文を追加し、「<bodyload="load()">」を追加してから、load() 関数で上記の JavaScript コードを呼び出します。ここで注目したいのは、jQuery を使用して次のことを実現することです。
次のようにコードをコピーします。
<スクリプト>
$(ドキュメント).ready(function(){
document.getElementById('ele').innerHTML= '私のブログへようこそ';
});
</script>
//もちろん、jQuery を使用するので、より簡単に記述する方法は次のとおりです。
<スクリプト>
$(ドキュメント).ready(function(){
$('#ele').html('私のブログへようこそ'); // .text() メソッドはここでも利用できます
});
</script>
上記の jQuery コードはページ上のどこにでも配置でき、常にページが読み込まれるまで待機してから実行されます。