HTMLElement.innerText
innerText
は HTMLElement
のプロパティで、ノードとその子孫の「レンダリングされた」テキスト内容を示します。ゲッターとして、カーソルで要素の内容を選択しクリップボードにコピーした際のテキストに近いものを取得することができます。
メモ: innerText
は Node.textContent
と混同しやすいのですが、両者には重要な違いがあります。基本的に innerText
はテキストがレンダリングされる表示を意識しますが、 textContent
はそうではありません。
構文
const renderedText = htmlElement.innerText htmlElement.innerText = string
値
DOMString
で、要素の表示されたテキストの内容を表します。要素自身が表示されないとき (例えば、文書から切り離されたり、表示から隠されたりしている場合)、返値は Node.textContent
プロパティと同じ値になります。
例
この例では innerText
と Node.textContent
を比較しています。 innerText
が <br>
要素のようなものをどのように意識するかや、非表示の要素を無視することに注意してください。
HTML
<h3>元の要素:</h3>
<p id="source">
<style>#source { color: red; }</style>
このテキストが<br>どのように扱われるか<br>
下で見てみてください。
<span style="display:none">隠しテキスト</span>
</p>
<h3>textContent の結果:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
<h3>innerText の結果:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>
JavaScript
const source = document.getElementById('source');
const textContentOutput = document.getElementById('textContentOutput');
const innerTextOutput = document.getElementById('innerTextOutput');
textContentOutput.value = source.textContent;
innerTextOutput.value = source.innerText;
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard innerText の定義 |
現行の標準 | 導入。 innerText の仕様書の草稿に基づく。履歴は whatwg/html#465 および whatwg/compat#5 を参照。 |
ブラウザーの互換性
BCD tables only load in the browser