textContent と innerText は、要素のテキストを取得・設定するプロパティです。似ていますが、いくつかの違いがあります。
基本的な使い方
<p id="message">Hello, World!</p>
const p = document.getElementById('message'); // 取得 console.log(p.textContent); // "Hello, World!" console.log(p.innerText); // "Hello, World!" // 設定 p.textContent = '新しいテキスト';
主な違い
| 特徴 | textContent | innerText |
|---|---|---|
| 非表示要素 | 含む | 含まない |
| <style> <script> | 含む | 含まない |
| 改行・空白 | そのまま | 整形される |
| パフォーマンス | 速い | 遅い |
非表示要素の扱い
display: none の要素のテキストは、innerText では取得されません。
<div id="container"> 表示テキスト <span style="display: none;">非表示テキスト</span> </div>
const container = document.getElementById('container'); console.log(container.textContent); // "表示テキスト 非表示テキスト" console.log(container.innerText); // "表示テキスト"
改行の扱い
<div id="content"> 行1 行2 行3 </div>
innerText は見た目どおりの改行を返しますが、textContent は HTML の空白をそのまま返します。
実際に動かしてみよう
HTML
CSS
JavaScript
<div id="target"> <span>表示テキスト</span> <span style="display:none">非表示テキスト</span> </div> <button id="textContentBtn">textContent</button> <button id="innerTextBtn">innerText</button> <pre id="result"></pre>
const target = document.getElementById('target'); const result = document.getElementById('result'); document.getElementById('textContentBtn').addEventListener('click', () => { result.textContent = 'textContent: "' + target.textContent.trim() + '"'; }); document.getElementById('innerTextBtn').addEventListener('click', () => { result.textContent = 'innerText: "' + target.innerText + '"'; });
セキュリティ面
どちらもテキストとして設定するので、HTML がエスケープされます。
element.textContent = '<script>alert("XSS")</script>'; // <script> がそのまま文字として表示される（実行されない）
これは innerHTML との大きな違いです。ユーザー入力を表示するときは textContent や innerText を使うと安全です。
どちらを使うべきか
textContent
パフォーマンスが良い。非表示要素も含む。通常はこちら
innerText
見た目どおりのテキストが欲しいとき。遅い
基本的には textContent を使い、表示されているテキストだけが必要な場合に innerText を使う、という使い分けがおすすめです。
