【JavaScript】「textContent」の使い方！【要素のテキストを操作できます】
しゅーた（@chibasyuta）です！
JavaScriptでHTML要素のテキストを取得したり変更したりするには「textContent」が便利です。「textContent」を使うと「要素の内容を簡単に操作できるため、使えるようにしておくといいでしょう！
この記事では「textContent」の使い方について解説します。
この記事の内容！
- 「textContent」の使い方
- 「textContent」を使う上での注意点
それでは内容へ入ります！
textContentとは何か？
「textContent」を使うことで要素のテキストを取得したり変更したりできます。これにより、下記のことが可能になります。
- HTML要素のテキストを読み取る
- HTML要素のテキストを書き換える
ユーザーが入力したデータに従ってテキストを表示する時。
「textContent」を使った具体例！
1. 要素のテキストを取得
下記のHTMLがあるとします。
<p id="example">Hello, world!</p>この要素のテキストをJavaScriptで取得します。
const paragraph = document.getElementById("example");
console.log(paragraph.textContent); // 出力: Hello, world!2. 要素のテキストを変更
paragraph.textContent = "Welcome to JavaScript!";
console.log(paragraph.textContent); // 出力: Welcome to JavaScript!これで、HTMLの内容は下記のように変更されます。
<p id="example">Welcome to JavaScript!</p>「textContent」を使う上での注意点！
「textContent」で取得できるのは「テキスト」だけです。なので上書きすると「<strong>」などからなる部分は消えてしまいます。
たとえば下記のようなHTMLがある場合。
<p id="example"><strong>Hello</strong>, world!</p>「textContent」は「Hello, world!」を取得します。つまりテキストのみです。
ここに他のテキストを代入すると、要素内のテキストが全て取得され、変更されます。要素の構造に対しても同様です。
つまり「<strong>」の部分が保持できません。消えてしまいます。
なので、HTMLの要素の構造を保持したい場合は別の方法を検討してください。
参考リンク！
仕様書。
https://dom.spec.whatwg.org/#ref-for-dom-parentnode-queryselectorall%E2%91%A0
https://dom.spec.whatwg.org/#interface-nodelist
MDN。
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll
https://developer.mozilla.org/ja/docs/Web/API/NodeList
おすすめの再生リスト！
こちらは僕が制作したYouTubeの再生リスト「JavaScriptの入門編」です。
「JavaScriptの入門編」はWeb制作を勉強している方がJavaScriptに入門する際に知っておきたい情報をまとめたコンテンツとなります。
こちらの再生リストで「JavaScript」について「丁寧」に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！
まとめ！
「textContent」を使うことで要素のテキストを取得したり変更したりできます。
ただし、上書きする場合は「HTMLの構造」を変えてしまうことがあるので注意が必要。
それではまた！