HTML DOMtextContentプロパティ
例
要素のテキストコンテンツを取得します。
var x =
document.getElementById("myBtn").textContent;
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
textContentプロパティは、指定されたノードとそのすべての子孫のテキストコンテンツを設定または返します 。
textContentプロパティを設定すると、子ノードはすべて削除され、指定された文字列を含む単一のTextノードに置き換えられます。
注:このプロパティはinnerTextプロパティに似ていますが、いくつかの違いがあります。
- textContentはすべての要素のテキストコンテンツを返し、innerTextは <script>要素と<style>要素を除くすべての要素のコンテンツを返します。
- innerTextは、CSSで非表示になっている要素のテキストを返しません(textContentは返します)。
ヒント:nodeValueプロパティの代わりにこのプロパティを使用できる場合もありますが 、このプロパティはすべての子ノードのテキストも返すことに注意してください。
ヒント:要素のHTMLコンテンツを設定または返すには、innerHTMLプロパティを使用します。
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
textContent | 1.0 | 9.0 | Yes | Yes | Yes |
構文
ノードのテキストコンテンツを返します。
node.textContent
ノードのテキストコンテンツを設定します。
node.textContent = text
プロパティ値
Value | Type | Description |
---|---|---|
text | String | Specifies the text content of the specified node |
技術的な詳細
戻り値: | ノードとそのすべての子孫のテキストを表す文字列。 要素がドキュメント、ドキュメントタイプ、または表記の場合はnullを返します。 |
---|---|
DOMバージョン | コアレベル3ノードオブジェクト |
その他の例
例
<p>要素のテキストコンテンツをid = "demo"で変更します。
document.getElementById("demo").textContent = "Paragraph changed!";
例
id = "myList"を使用して<ul>要素のすべてのテキストコンテンツを取得します。
var x = document.getElementById("myList").textContent;
xの値は次のようになります。
Coffee Tea
例
この例は、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プロパティは、間隔を空けてテキストを返しますが、内部要素タグは返しません。