2016年9月23日金曜日

innerText と textContent の違い

innerText ・・・ エンドユーザーから見えている情報を返す。

textContent ・・・ 改行や script タグを含めた情報を返す。

例えば、下記の HTML があった場合の innerText と textContent の取得結果を比較してみましょう。

<div id="myDiv">
    <div>Lorem ipsum dolor sit amet,
    consectetur</div>
    <script>console.log("aaa---aaa");</script>
    <style>*{background-color:transparent;}</style>
    <div style="visibility:hidden"> adipiscing elit</div>
</div>

<input type="button" id="button1" value="innerText"/>
<input type="button" id="button2" value="textContent"/>

コンソールに出力した結果を見てみます。

--- innerText ---
Lorem ipsum dolor sit amet, consectetur


  • エンドユーザーから見えているとおりの情報が取得されます。script タグ、style タグは含まれません。
  • style が評価された結果が取得されています。このため style により非表示になっている部分は含まれていません。


--- textContent ---
            Lorem ipsum dolor sit amet,
            consectetur
            console.log("aaa---aaa");
         
            *{background-color:transparent;}
             adipiscing elit


  • エンドユーザーから見えていない情報が含まれています。script タグ、style タグが含まれています。
  • 改行や空白文字もそのまま含んでいます。
  • innerText とは異なり、style は評価される前の情報になります。


リファレンス
MDN - Node.textContent

2016年9月22日木曜日

擬似クラスと擬似要素

今日は CSS の基礎をおさらいしていました。

疑似クラス (Pseudo-classes)
https://developer.mozilla.org/ja/docs/Web/CSS/pseudo-classes

疑似要素 (Pseudo-elements)
https://developer.mozilla.org/ja/docs/Web/CSS/pseudo-elements

疑似要素の "::after" や "::before" の意味を理解してすっきりしました。"::first-letter" もものすごい使いやすくていいですね。