イントロダクション 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/1c4dab7a732edafec572fd19c5afca21d472112f/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEiF0IXRGF7IGm11IK216IvjsmGJVhb0jx1D9i5515J_Z5QfdnfExV9uOACYfXvolXF5N1BFn6VPi9YuOZceAIdnED4SYUhhaB_dAl4OG8NNJCc5x8Kjzg2BgJSF4ZQd_CtBpB688J-1Kx0%2Fw1200-h630-p-k-no-nu%2Fchrome_developer_tool_elements.png)