日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2015年1月5日月曜日

Chrome:デベロッパーツールのElementsでは、HTMLの特殊文字は実体参照・コード参照ではなく、実際の字として表示される

イントロダクション

Chrome のデベロッパーツールの Elements では、Web ページの現在表示している状態の HTML (DOM エレメントツリー)を見ることができます。



Chrome デベロッパーツール Elements Web ページの現在表示している状態の HTML(DOM エレメントツリー)を見ることが出来る
Chrome デベロッパーツール
Elements
Web ページの現在表示している状態の HTML(DOM エレメントツリー)を見ることが出来る


その DOMエレメントツリーは、”Web ページの現在表示している状態の HTML”であり、Web ページのソースコードを表示したものとは異なります

従って、JavaScriptを使用してWebページのHTML要素の構造を書き換えると、Elements で表示しているDOMエレメントツリーの構造へその変更が反映されます。そのため、Webページによっては、Web ページのソースコードと大きく異なった表示となることがあります。


Chrome のデベロッパーツールの Elements のDOM エレメントツリーと、Webページのソースコードとの大きな違いはそれくらいだと認識していたのですが、他にも違いがありました。

それは、Chrome のデベロッパーツールの Elements では、HTMLの特殊文字は実体参照・コード参照ではなく、実際の字として表示されるという点です。


Chrome のデベロッパーツールの Elements では、HTMLの特殊文字は実体参照・コード参照ではなく、実際の字として表示される

HTML の特殊文字として、< や >, ♥などがあります。
HTML の特殊文字の一覧は、次のページを参照してください。

HTMLの特殊文字 : IT用語辞典
http://e-words.jp/p/r-htmlentity.html


これらの特殊文字を、HTML のソースコードに記載する際には、そのまま(< や >, ♥など)記載するのではなく、実体参照コード参照として記載します。

すると、Webページをブラウザで表示した際に、ブラウザがその実体参照(&lt; や &gt;、&hearts;)コード参照(&#60; や &#62;、&#9829;)実際の字(< や >, ♥など)として表示します。

ソースコードに記載された実体参照やコード参照は、 ブラウザの表示では実際の字として表示される
ソースコードに記載された実体参照やコード参照は、
ブラウザの表示では実際の字として表示される


さて、その実体参照コード参照で書かれたソースコードを、Chrome のデベロッパーツールの Elements のDOM エレメントツリーで確認してみます。


ソースコードに記載された実体参照やコード参照
ソースコードに記載された実体参照やコード参照

ソースコード:
  実体参照 : &lt;, &gt;, &hearts;<br>
  コード参照 : &#60;, &#62;, &#9829;<br>


すると、実体参照やコード参照で書かれた部分が、実際の字として表示されています。

ソースコードに記載された実体参照やコード参照をブラウザで表示した状態 かつ、その部分を Chrome のデベロッパーツールのElementsのDOM エレメントツリーで表示
ソースコードに記載された実体参照やコード参照をブラウザで表示した状態
かつ、その部分を Chrome のデベロッパーツールのElementsのDOM エレメントツリーで表示

Chrome のデベロッパーツールのElementsのDOM エレメントツリーの表示:
"
  実体参照 : <, >, ♥"
<br>
"
  コード参照 : <, >, ♥"
<br>


ソースコード上では、実体参照(&lt; や &gt;、&hearts;)コード参照(&#60; や &#62;、&#9829;)で記載した部分が、Chrome のデベロッパーツールのElementsのDOM エレメントツリーの表示では、実際の字(< や >, ♥など)として表示されています。


従って、Chrome のデベロッパーツールの Elements のDOM エレメントツリーで要素を見ただけでは、特殊文字が実体参照やコード参照で記載されているのか、実際の字として記載されているのか判断できません


そのため、Web ページのソースコードを見て、特殊文字の表記を確認する必要があります





関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...