イントロダクション Chrome のデベロッパーツールの Elements では、Web ページの現在表示している状態の HTML (DOM エレメントツリー)を見ることができます。 その DOMエレメントツリーは、”Web ページの現在表示している状態の HTML”であり、Web ページのソースコードを表示したものとは異なります。 従って、JavaScriptを使用してWebページのHTML要素の構造を書き換えると、Elements で表示しているDOMエレメントツリーの構造へその変更が反映されます。そのため、Webページによっては、Web ページのソースコードと大きく異なった表示となることがあります。 Chrome のデベロッパーツールの Elements のDOM エレメントツリーと、Webページのソースコードとの大きな違いはそれくらいだと認識していたのですが、他にも違いがありました
![Chrome:デベロッパーツールのElementsでは、HTMLの特殊文字は実体参照・コード参照ではなく、実際の字として表示される](https://cdn-ak-scissors.b.st-hatena.com/image/square/db3fe8f242cf01959c194b869ccff94e92d6bc06/height=288;version=1;width=512/http%3A%2F%2F2.bp.blogspot.com%2F-Iqi2QVGTa3A%2FVJvuhPLQS_I%2FAAAAAAAADak%2FKuAVQnFD6Y8%2Fw1200-h630-p-k-no-nu%2Fchrome_developer_tool_elements.png)