DOM

：

：

HTMLElement.innerTextプロパティ

　編集：2022.09.30 by T.A.

[Edge]○。→

element の内容の「レンダリングされた」テキストを取得／設定します。

ゲッターとして、カーソルで要素の内容を選択しクリップボードにコピーした際のテキストに近いものを取得することができます。

メモ： innerText は Node.textContent と混同しやすいのですが、両者には重要な違いがあります。基本的に innerText はテキストがレンダリングされる表示を意識しますが、textContent はそうではありません。

構文
element.innerText
element HTMLElement。
値

DOMString。要素の表示されたテキストの内容を表します。

要素自身が表示されないとき（例えば、文書から切り離されたり、表示から隠されたりしている場合）は、返値は Node.textContent プロパティと同じ値になります。

例
mdnより

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;

innerTextでの取得では： 

このテキストが
どのように扱われるか
下で見てみてください。

textContentでの取得では： 

  #source { color: red; }
  このテキストがどのように扱われるか
       下で見てみてください。
  隠しテキスト

HTML： 

<SPAN id=IdTest>[SPAN要素<SPAN id=IdS1>[これを隠してみます]</SPAN>続きです]</SPAN>
[SPAN要素[これを隠してみます]続きです]

JavaScript： 

IdS1.hidden=true;
[SPAN要素続きです] 
D=IdTest.innerText;    //＝[string]：[SPAN要素続きです]
DA=IdTest.textContent; //＝[string]：[SPAN要素[これを隠してみます]続きです]
テスト