HTML DOM ドキュメントを操作する場合の難点の 1 つは、DOM が完全にロードされる前に JavaScript が実行される可能性があり、コードに多くの潜在的な問題が発生する可能性があることです。ブラウザのレンダリングと操作のシーケンスは大まかに次のとおりです:
HTML 解析が完了
外部スクリプトとスタイル シートが読み込まれました
ドキュメント内でスクリプトが解析および実行されます
HTML DOM が完全に構築されました
画像と外部コンテンツの読み込み
Web ページの読み込みが完了します
Web ページの先頭にあるスクリプトと外部ファイルから読み込まれたスクリプトは、HTML が実際に構築される前に実行されます。前述したように、これら 2 つの場所で実行されるスクリプトはまだ存在しない DOM にアクセスできないため、これは重大な問題です。幸いなことに、私たちにはいくつかの救済策があります。
現在、最も一般的に使用されているレベルは、DOM 操作を実行する前にページ全体がロードされるのを完全に待機することです。このテクノロジーでは、ウィンドウ オブジェクトのロード イベントを使用して関数をバインドするだけでよく、ページのロード後にトリガーできます。
addEvent(window, "load", function (){
// 何かを実行します
});
最も単純な操作は最も遅くなります。読み込みプロセスの順次リストでは、ページが読み込まれるかどうかが最後のステップによって完全に制御されていることがわかります。つまり、ページに多くの写真やビデオなどが含まれている場合、JavaScript が実行されるまでにユーザーはしばらくログインする必要がある可能性があります。
別の進行を使用して、DOM の読み込みステータスをリッスンすることができます。これは、おそらく (実装の観点から) 最も複雑ですが、最も効率的でもあります。
このテクノロジーは、ブラウザーの読み込みをブロックすることなく、実行に必要な属性を備えた HTML DOM ドキュメントができるだけ早く読み込まれているかどうかをチェックします。 HTML DOM が利用可能かどうかを確認するための重要なポイントをいくつか示します。
document: DOM ドキュメントがロードされているかどうかを知る必要があります。すぐに確認すれば、運が良ければ unknown が表示されるでしょう。
document.getElementsByTagName および document.getElementById: document.getElementsByTagName および document.getElementById 関数を頻繁に使用してドキュメントを確認します。これらの関数が存在する場合は、DOM がロードされていることを示します。
document.body: 追加のボーナスとして、要素が完全にロードされているかどうかをチェックします。理論的には、前回のチェックですでに判断できるはずですが、場合によってはまだ不十分であることがわかりました。
これらのチェックを使用するだけで、DOM が利用可能かどうかを判断できます (ここでの「十分な」とは、一定のミリ秒の時間差がある可能性があることを意味します)。この方法には欠点がほとんどありません。前述のチェックだけを使用すると、スクリプトは最新のブラウザで比較的適切に実行されるはずです。ただし、最近 (2008 年?) Firefox はキャッシュの改善を実装し、スクリプトが DOM が利用可能かどうかを確認する前にウィンドウのロード イベントが実際に発生できるようにしました。これを利用して、より高速な実行速度を実現するために、ウィンドウ読み込みイベントにもチェックを付けました。
最後に、domReady 関数は、DOM が使用可能なときに実行する必要があるすべての関数への参照を収集します。 DOM が利用可能であるとみなされると、これらの参照が 1 つずつ呼び出され、順番に実行されます。
// DOM が有効かどうかを監視する関数利用可能です
function domReady(f) {
// DOM がロードされている場合、Mashan は関数
if(domReady.done) return f();
// If関数
if(domReady.timer) {
// 実行する関数のリストにあると仮定します
domReady.ready.push(f); else {
// 読み込み後にページをバインドする 最初に完了した場合のイベント。
addEvent(window, "load", isDOMReady);
// 実行関数の配列を初期化します
domReady.ready = [f] >// DOM が使用可能かどうかを確認します。 possible
domReady.timer = setInterval(isDOMReady, 13);
}
}
// DOM が動作しているかどうかを確認します
function isDOMReady() {
// DOM が可能であると判断できた場合は、無視します。
if(domReady.done) return false;
// いくつかの関数と要素が可能かどうかを確認します。
if(document && document. getElementsByTagName && document.getElementById && document.body) {
// 利用可能な場合は、チェックを停止します
clearInterval(domReady.timer);
// 実行します。すべての待機中の関数
for(var i = 0; i
domReady.ready.length; i ) {
domReady.ready[i](); ここで完了したことを記録します
domReady.ready = null;
domReady.done = true;
}
}
}
次に、HTML ドキュメントでどのように実行されるかを見てみましょう。 domReady 関数が domready.js という名前の外部ファイルに書き込まれているとします。
