JS DOMリファレンスマニュアル

HTML DOM Element オブジェクト

textContentHTML DOM textContent 属性

属性です。

ノード上にtextContentを設定すると、ノードのすべての子ノードを削除し、指定されたテキストを持つ単一のテキストノードに置き換えます。textContent属性はinnerText

• textContentは属性ですが、いくつかの違いがあります：すべてのテキスト内容を返しますが、innerTextは除 <script>および<style>要素以外のすべての要素の内容。

• innerTextはCSSで隠された要素のテキストを返しません（textContentは返します）

要素のHTML内容を設定または返すには、以下を使用します：innerHTML属性。

文法：

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

node.textContent

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

node.textContent = text

var x = document.getElementById("para").textContent;

ブラウザの互換性

すべてのブラウザが完全にサポートするtextContent属性：

属性値

技術的詳細

さらに多くの例

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

var x = document.getElementById("para");
x.textContent = "HELLO WORLD";

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

var x = document.getElementById("container").textContent;

この例では、innerText、innerHTML、textContentの間の違いを示します：

<p id="x">この要素には追加のスペースがあり、<span>span</span>要素を含んでいます</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("x").innerText);
}
function　getInnerHTML()　{
alert(document.getElementById("x").innerHTML);
}
function　getTextContent()　{
alert(document.getElementById("x").textContent);
}
</script>

innerText属性はテキストのみを返し、スペースや内部の要素タグは含まれません。

innerHTML属性はスペースと内部の要素タグを含むテキストを返します。

textContent属性は間隔を持つテキストを返しますが、内部の要素タグは含まれません。

関連参考

HTML DOM 参考：HTMLElement.innerText属性

HTML DOM 参考：element.innerHTML属性

HTML DOM Element オブジェクト