HTMLElement.innerText - レンダリングされた状態のテキスト
innerTextは、HTMLElementのプロパティです。レンダリングされた状態のテキストを反映します。HTMLのタグは取り除かれますが、br要素による改行は反映されます。
概要
- 名前
- innerText
- 所属
- HTMLElement
- IDL
[CEReactions] attribute [TreatNullAs=EmptyString] DOMString innerText;
- 仕様書
- https://html.spec.whatwg.org/multipage/dom.html#dom-innertext
説明
チュートリアル
innerTextは、表示されているままのテキストを反映するプロパティです。タグは取り除かれ、テキストだけを返します。代入した場合、子孫は全てなくなり、代入した値のテキストだけが残ります。
<p id="hoge">SYNCERは、<span>2014年6月</span>からある<b>ウェブサイト</b>だ。</p>
// 要素の取得
var element = document.getElementById( "hoge" ) ;
// プロパティの取得
element.innerText ; // "SYNCERは、2014年6月からあるウェブサイトだ。"
// プロパティに代入
element.innerText = "yeah" ; // →<p id="hoge">yeah</p>
Node.textContentとinnerTextの違いは、br要素の取り扱いにあります。前者は、単純にテキストだけを繋ぎ合わせるため、br要素は取り除かれます。しかし後者は、改行文字に変換します。「表示されているままのテキストを反映する」というのはこういうことです。
<p id="hoge"><b>今日</b>は<br>いい<b>天気</b>だ。</p>
<!-- 表示のイメージ:
今日は
いい天気だ。
-->
// textContentの場合
element.textContent ; // "今日はいい天気だ。"
// innerTextの場合
element.innerText ; // "今日は(改行文字)いい天気だ。"
デモ
HTMLElement.innerTextを取得するデモです。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap }
</style>
</head>
<body>
<p id="hoge">SYNCERは、<br><span>2014年6月</span>からある<br><b>ウェブサイト</b>だ。</p>
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;
// 代入
// element.innerText = "hoge" + "\n" + "fuga" ;
// 取得
console.log( element.innerText ) ;
document.getElementById( "result" ).appendChild( new Text( element.innerText ) ) ;
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● 45+ | ● | ● | ● | ● | ● | ● |
関連記事
- HTMLCollection
- HTMLCollectionは、HTML要素の集合を表すオブジェクトです。Elementだけが含まれた配列であるかのように、手軽にインデックス番号でアクセスできます。
- HTMLCollection.item()
- item()は、HTMLCollectionのメソッドです。インデックス番号を指定してHTML要素を取得します。このメソッドは、ブラケット記法(例: [0])に置き換えられます。
- Document.getElementsByClassName()
- getElementsByClassName()は、Documentのメソッドです。class属性を指定して要素を取得します。
- Document
- Documentは、ドキュメントを管理するための機能を備えたインターフェイスです。