javascript - DOM ツリーはどのようにロードされますか?

Question

Javascript 高度なプログラミング IE のエラーについて話すとき、短縮された操作の概念が言及されます。

ロードされていないページを変更するとエラーが発生します。

サンプルコードは次のとおりです:

リーリー

<script> が要素に含まれており、JS コードが DOM メソッドを使用してその親要素または祖先要素を変更すると、操作中止エラーが発生します (ロードされた要素のみが変更できるため)。

は

に変更されました リーリー

でエラーを回避できます。

新しい <p> が document.body の末尾ではなく先頭に追加された場合、エラーは発生しません。

---

読んだ後、ドキュメントがどのように読み込まれるのかよくわかりません。本文の先頭に挿入すると機能するのに、最後に挿入しないのはなぜでしょうか。

Answer 1

ブラウザはページをロードすると、js コードをロードして解析します。この時点で、他のコードの解析とレンダリングは停止します。このため、通常、js コードはページの最後に配置され、ページ ドキュメント構造の読み込みが整理されず、すべての DOM 要素を操作できます。

上記のコードでは、jsコードを実行する時点ではページ全体のhtml構造が読み込まれていないため、ブラウザはbodyの終了位置が分からず、bodyの開始位置が決まっているため、新しい p は先頭に追加できますが、末尾には追加できません。

Answer 2

DOM ドキュメントを読み込む手順
1 HTML 構造を解析します。
2 外部スクリプトとスタイルシート ファイルを読み込みます。
3 スクリプトコードを解析して実行します。
4 HTML DOM モデルを構築します。 //DOMContentLoaded
5 は画像などの外部ファイルを読み込みます。
6 ページが読み込まれます。 //ロード

これは理論的には正しいですが、実際には、ドキュメントのコンテンツの場所も考慮する必要があります。ドキュメントは上から下に解析されるため、js に遭遇すると、js の解析と実行のレンダリングがブロックされます。

ご指摘の問題は、体の前部分はレンダリングされているのに、尻尾の部分が実行時にレンダリングされていない、つまり尻尾の部分をどこに挿入すればよいかわからないことが原因だと思われます。

最新のブラウザでは DOM 操作が最適化されているため、Chrome でのテストではエラーは見つかりません。どちらの方法でも問題ないため、この問題にあまり注意を払う必要はありません。順番にレンダリングして配置することを忘れないでください。 jsが一番下にあります。