HTML DOMinnerTextプロパティ
例
要素の内部テキストを取得します。
var x =
document.getElementById("myBtn").innerText;
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
innerTextプロパティは、指定されたノードとそのすべての子孫のテキストコンテンツを設定または返します 。
innerTextプロパティを設定すると、子ノードはすべて削除され、指定された文字列を含む単一のテキストノードに置き換えられます。
注：このプロパティはtextContentプロパティに似ていますが、いくつかの違いがあります。
- textContentはすべての要素のテキストコンテンツを返し、innerTextは <script>要素と<style>要素を除くすべての要素のコンテンツを返します。
- innerTextは、CSSで非表示になっている要素のテキストを返しません（textContentは返します）。
ヒント：要素のHTMLコンテンツを設定または返すには、innerHTMLプロパティを使用します。
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
| Property | |||||
|---|---|---|---|---|---|
| innerText | 4.0 | 10.0 | 45.0 | 3.0 | 9.6 |
構文
ノードのテキストコンテンツを返します。
node.innerText
ノードのテキストコンテンツを設定します。
node.innerText = text
プロパティ値
| Value | Type | Description |
|---|---|---|
| text | String | Specifies the text content of the specified node |
技術的な詳細
| 戻り値： | ノードとそのすべての子孫の「レンダリングされた」テキストコンテンツを表す文字列 |
|---|
その他の例
例
この例は、innerText、innerHTML、およびtextContentの違いのいくつかを示しています。
<p id="demo"> This element has extra spacing and contains <span>a span
element</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getHTML()
{
alert(document.getElementById("demo").innerHTML)
}
function
getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
指定されたプロパティを使用して、上記の<p>要素のコンテンツを取得します。
innerTextは次のように返します。「この要素には余分な間隔があり、スパン要素が含まれています。」
innerHTMLは次を返します：「この要素には余分な間隔があり、<span>スパン要素</ span>が含まれています。」
textContentは次を返します： "この要素には余分な間隔があり、スパン要素が含まれています。"
innerTextプロパティは、スペースタグと内部要素タグを含まないテキストのみを返します。
innerHTMLプロパティは、すべての間隔タグと内部要素タグを含むテキストを返します。
textContentプロパティは、間隔を空けてテキストを返しますが、内部要素タグは返しません。