dom_dom0300_010

テキスト取得の性能と正確さを重視するなら ( A )、ユーザに見える見かけの文字列が必要なら ( B ) を使う。改行や空白の扱いも異なる。

解答

A: textContent
B: innerText

解説

textContentは高速でDOMの生テキストを返す。innerTextはレンダリングに依存し、CSSで非表示なら反映されず、改行も見た目に近い形で入る。

使用例(サンプルコード)

[ html ]

<div id="box" style="width:0">
  A<span style="display:block">B</span>
</div>
<script>
  const el = document.getElementById('box');
  console.log(el.textContent); // (A) "AB"
  console.log(el.innerText);   // (B) "A\nB"(見た目に沿って改行)
</script>

必要に応じて、各問のコードはそのままHTMLに貼り付けて挙動を確認できます。