要素内のレンダリングされたテキストを取得・設定

要素内のレンダリングされたテキストを取得・設定

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【テキストを参照する】
HTMLElement オブジェクトの innerText プロパティを参照すると要素および要素の子孫要素のテキストを取得することができます。

 

書式；htmlElement.innerText

戻り値は、すべてのテキストが連結された DOMString オブジェクトが戻されます。どのような文字列が返されるのかについては、要素や要素の子孫要素がブラウザで表示されるときと同じ内容のテキスト内容を取得します。

空白ノードなどのようにブラウザでは表示されないものは取得しませんし、スタイルシートの設定などで非表示になっている要素。

＜style＞ タグのように元々ブラウザに表示されない要素のテキストは取得しません。また ＜br＞ タグで改行が行わている場合は改行された状態でテキストを取得します。

例えば次の div 要素ノードの innerText プロパティの値を参照した場合、どのような値を返すのか確認します。

＜div＞
  ＜p＞Apple＜br＞Lemon＜/p＞
  ＜p＞Orange＜/p＞
＜/div＞

div 要素ノードにはの 2 つの p 要素ノードが含まれていますが、実際にブラウザで表示されると次のように表示されます。

Apple
Lemon

Orange

サンプル

ブラウザを立ち上げる

ボタンをクリックする

孫ノードのテキストノードの中に ＜br＞ が含まれているものがあります。 textContent プロパティでは単に無視されましたが innerText プロパティでは ＜br＞ の位置で改行された状態でテキストを取得します。またスタイルの設定でブラウザで非表示になっているテキストも取得しません 

サンプル

ブラウザを立ち上げる

今回のサンプルではボタンをクリックすると body タグの要素ノードを取得し、その innerText プロパティの値を取得してコンソールに出力しています。



innerText プロパティは実際に表示されるテキストのみ取得するため、 ＜script＞ タグの中に記述された JavaScript のコードはテキストとして取得しません。またスタイルの設定でブラウザで非表示になっているテキストも取得しません。

【新しいテキストを設定する】
innerText プロパティは参照するだけではなく新しい値を設定することができます。

書式；htmlElement.innerText = 'value'

要素の innerText プロパティの値に新しい文字列を設定すると、対象の要素の子孫要素のノードがすべて削除されたあとに設定した文字列の値を持つテキストノードが追加されます。

サンプル

ブラウザを立ち上げる

「新しいテキストを設定」ボタンを押す

 id 属性が shopinfo の要素の innerText プロパティに新しい文字列を設定します。
【設定する文字列の中にHTMLのタグなどが含まれていた場合】

innerText プロパティに新しい文字列を設定するときに HTML で特別な意味を持つ文字はエスケープ処理されてから設定されます。具体的には ＜ が < 、 ＞ が > 、 & が & などへ変換されます。

変換前： ＜p＞Apple&Orange＜/p＞
変換後： <p>Apple&Orange</p&gt;

その為、 HTML のタグを含む文字列を設定した場合、タグとしては認識されず単なる文字列として扱われます。もしタグを含む文字列を設定したときに、タグとして処理して欲しい場合には innerHTML プロパティを使用してください。

サンプル

ブラウザを立ち上げる

ボタンをクリックする

設定する値の中に HTML のタグが含まれていますが、エスケープ処理されて文字列として設定されています。