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

HTMLElement オブジェクトの innerText プロパティを参照すると、対象の要素のテキストを取得します。この時、取得するテキストは対象の要素をブラウザで表示した時に表示されるテキストだけとなります。要素に子や孫の要素が含まれる場合は、それらの要素のテキストも含めて取得します。ここでは innerText プロパティの使い方について解説します。

(Last modified: )

テキストを参照する

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

その為 div 要素ノードの innerText プロパティの値を参照すると次のような値となります。 

Apple
Lemon

Orange

※ 表示がされるかどうかは関係ありますが、それ以外のテキストに対するスタイルの設定などは関係ありません。

サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>innerText</title>
</head>
<body>

<p>今日は外でランチを食べました。</p>

<div id="shopinfo">
  リストランテ南青山
  <div>
    <p>東京都港区<br>南青山</p>
    <p>洋食</p>
  </div>
</div>

<p>美味しかったです。</p>

<button onClick="getElement();">要素を取得</button>

<script>
function getElement(){
    let element = document.getElementById('shopinfo');
    console.log('-- ここから --');
    console.log(element.innerText);
    console.log('-- ここまで --');
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 id 属性の値が 'shopinfo' の要素ノードを取得し、その innerText プロパティの値を取得してコンソールに出力します。

テキストを参照する(1)

孫ノードのテキストノードの中に <br> が含まれているものがあります。 textContent プロパティでは単に無視されましたが innerText プロパティでは <br> の位置で改行された状態でテキストを取得します。

サンプルコード

もうひとつ別のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>innerText</title>
</head>
<body>

<p>
今日は外でランチを食べました。
<span style="display:none">少し値段高かったかな。</span>
</p>

<button onClick="getElement();">要素を取得</button>

<script>
function getElement(){
    let elements = document.getElementsByTagName('body');
    console.log('-- ここから --');
    console.log(elements[0].innerText);
    console.log('-- ここまで --');
}
</script>
</body>
</html>

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

要素および子孫要素のレンダリングされたテキストを参照する(2)

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

新しいテキストを設定する

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

htmlElement.innerText = 'value'

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

サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>innerText</title>
</head>
<body>

<p>今日は外でランチを食べました。</p>

<div id="shopinfo">
リストランテ南青山
</div>

<p>美味しかったです。</p>

<button onClick="setTextToElement();">新しいテキストを設定</button>

<script>
function setTextToElement(){
    let element = document.getElementById('shopinfo');
    element.innerText = '南青山の洋食屋さん';
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 id 属性が shopinfo の要素の innerText プロパティに新しい文字列を設定します。

新しいテキストを設定する(1)

新しい値を設定すると、ブラウザ上の表示にもすぐに反映されます。

設定する文字列の中にHTMLのタグなどが含まれていた場合

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

変換前： <p>Apple&Orange</p>
変換後： &lt;p&gt;Apple&amp;Orange&lt;/p&gt;

その為、 HTML のタグを含む文字列を設定した場合、タグとしては認識されず単なる文字列として扱われます。もしタグを含む文字列を設定したときに、タグとして処理して欲しい場合には innerHTML プロパティを使用してください。(参照：要素内のHTMLコードを取得・設定(innerHTML))。

サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>innerText</title>
</head>
<body>

<p>今日は外でランチを食べました。</p>

<div id="shopinfo">
リストランテ南青山
</div>

<p>美味しかったです。</p>

<button onClick="setTextToElement();">新しいテキストを設定</button>

<script>
function setTextToElement(){
    let element = document.getElementById('shopinfo');
    element.innerText = '南青山の<strong>洋食屋</strong>さん';
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 id 属性が shopinfo の要素の innerText プロパティに新しい文字列を設定します。

設定する文字列の中にHTMLのタグなどが含まれていた場合(1)

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

-- --

innerText プロパティの使い方について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。

カテゴリ
検索