webページの表示とソースが異なる

Question

例えば、こちらのサイト
https://whowatch.tv/
をクロームで要素を検証すると

liタグの
ng-scope selectedクラスに、
サイドバーの情報が入っています。

しかし、ソースを見ると
view-source:https://whowatch.tv/
ng-scope selectedクラスはなく、中のテキスト等もありません。
これはなぜでしょうか？
教えていただけると幸いです。
どうぞ、よろしくお願いします。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

[nao_yasu]

解決済みにしました。ご指摘ありがとうございました。

Answer 1

「要素を検証」で出てくるのは、DOMツリーの現在の状態です。

HTMLのソースからJavaScriptで変化した場合、その変化後のものが見えています。

Comments

[nao_yasu]

回答いただきありがとうございました。
理解できました。変化後のものが見えているのですね。

Answer 2

view-source:は、JS整形前のもの
開発ツールで見た時には、JSで、読み込み時になんらかの処理をしたからでしょう

Comments

[nao_yasu]

回答いただきありがとうございました。
理解できました。

Answer 3

ngならAngularかな。
JavaScriptで描写してるから。

Comments

[nao_yasu]

回答いただきありがとうございました。理解できました。
Angularについても調べてみます！