ウェブページの要素の検査とソースコードの表示の違いについて

Chrome ブラウザで Web ページを開くと、ページを右クリックすると 2 つの非常によく似たオプションが表示されることに気づいたでしょうか。

Webページのソースコードを表示し、検査（要素の検査）することです。

私はいつも、これら 2 つのオプションに違いはないと思っていましたが、Chrome にこれら 2 つのオプションがリストされているので、それには理由があるはずです。

簡単なページを見てみましょう:

ウェブページでの表示効果は次のようになります（画像サイズを圧縮するために、空白スペースの大部分が削除されます）。

要素を確認する

<p></p> タグ内に余分な文があることがわかります。
しかし、Web ページのソース コードでは、<p></p> タグ内にそのような文はありません。

この文は JS によって動的に生成されます。

したがって、要素を検査することと、Web ページのソース コードを表示することの間にはわずかな違いがあります。この違いは、ソース コードと DOM の違いと言えます。要素を検査する場合、実際には DOM を表示しています。DOM がレンダリングされた後、Web ページのソース コードを表示すると、解析されていないソース コードが表示されます。以上がこの記事の全内容です。皆様の勉強や仕事に少しでもお役に立てれば幸いです。