HTML DOM Element textContent 属性

定義と使用法

textContent 属性は指定されたノードのテキスト内容およびそのすべての後継子を設定または返します。

属性を設定した場合、 textContent 属性はすべての子ノードを削除し、指定された文字列を含む単一のテキストノードで置き換えます。

ヒント：時には、この属性は nodeValue 属性の代わりに使用できますが、すべての子ノードのテキストも返すことを忘れないでください。

参照も：

innerText 属性

innerHTML 属性

例

例 1

要素のテキスト内容を返します：

let text = element.textContent;

自分で試してみてください

例 2

id="demo" の <p> 要素のテキスト内容を変更します：

element.textContent = "I have changed!";

自分で試してみてください

例 3

id="myList" の <ul> 要素のすべてのテキスト内容を取得します：

let text = document.getElementById("myList").textContent;

自分で試してみてください

文法

ノードのテキスト内容を返します：

element.textContent

または

node.textContent

ノードのテキスト内容を設定します：

element.textContent = text
node.textContent = text

属性値

値 説明
text 要素またはノードのテキスト内容

返り値

タイプ 説明
文字列

要素とそのすべての後裔のテキスト内容

要素がdocument、document type、notationの場合はnullを返します。

innerHTML、innerText、textContentの違い

innerText属性は次のように返します：

要素とそのすべての子要素のテキスト内容のみを返し、CSSで隠されたテキストのスペースとタグは含まれませんが、<script>と<style>要素を除きます。

innerHTML属性は次のように返します：

要素のテキスト内容、すべての空白と内部のHTMLタグが含まれています。

textContent属性は次のように返します：

要素とそのすべての後裔のテキスト内容、空白とCSSで隠されたテキストが含まれていますが、タグは含まれません。

HTMLの例

<p id="myP">   この要素には余分なスペースがあり、<span>span要素</span>を含んでいます。</p>

JavaScript サンプル

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

自分で試してみてください

上記の例では：

innerText属性は次のように返します：

この要素には余分なスペースがあり、span要素を含んでいます。

innerHTML属性は次のように返します：

   この要素には余分なスペースがあり、<span>span要素</span>を含んでいます。

textContent属性は次のように返します：

   この要素には余分なスペースがあり、span要素を含んでいます。

ブラウザのサポート

element.textContent DOMレベル3（2004）の機能です。

すべてのブラウザが完全にサポートしています：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート 9-11 サポート サポート サポート サポート