JavaScript textContent

概要: このチュートリアルでは、JavaScriptのtextContentプロパティを使用して、ノードとその子孫のテキストコンテンツを取得する方法を学習します。

ノードからtextContentを読み取る

ノードとその子孫のテキストコンテンツを取得するには、textContentプロパティを使用します。

let text = node.textContent;Code language: JavaScript (javascript)

次のHTMLスニペットがあるとします。

<div id="note">
    JavaScript textContent Demo!
    <span style="display:none">Hidden Text!</span>
    <!-- my comment -->
</div>    Code language: HTML, XML (xml)

次の例では、textContentプロパティを使用して<div>要素のテキストを取得します。

let note = document.getElementById('note');
console.log(note.textContent);Code language: JavaScript (javascript)

動作の仕組み。

• まず、getElementById()メソッドを使用して、idがnoteであるdiv要素を選択します。
• 次に、textContentプロパティにアクセスして、ノードのテキストを表示します。

出力

JavaScript textContent Demo!
Hidden Text!

出力から明らかなように、textContentプロパティは、コメント（および処理命令）を除くすべての子ノードのtextContentの連結を返します。

textContent vs. innerText

一方、innerTextはCSSスタイルを考慮し、人間が読み取れるテキストのみを返します。例えば

let note = document.getElementById('note');
console.log(note.innerText);Code language: JavaScript (javascript)

出力

JavaScript textContent Demo!

ご覧のとおり、非表示のテキストとコメントは返されません。

innerTextプロパティは最新のCSSを使用してテキストを計算するため、アクセスするとリフローがトリガーされます。これは計算コストが高くなります。

リフローとは、ウェブブラウザがウェブページの一部または全体を再処理して描画する必要がある場合に発生します。

ノードのtextContentを設定する

textContentの読み取りに加えて、textContentプロパティを使用してノードのテキストを設定することもできます。

node.textContent = newText;

ノードでtextContentを設定すると、ノードの子はすべて削除され、newText値を持つ単一のテキストノードに置き換えられます。例えば

let note = document.getElementById('note');
note.textContent = 'This is a note';Code language: JavaScript (javascript)

まとめ

• すべての子ノードのtextContentの連結を返すには、textContentプロパティを使用します。ノードのテキストを設定するためにも使用できます。
• innerTextは、CSSを考慮した人間が読み取れるテキストを返します。

クイズ