テキストを書き換える

解説

このレッスンで分かること

• 要素の textContent に代入すると、中の文字がそのまま差し替わります
• innerHTML は渡した文字列をタグとして読むので、文字を出す用途では使いません

印は付いたのに、画面は何も変わっていない

前回は要素を掴んで、データ属性の印を付けました。検証ツールでは確かめられますが、画面は前のままです。今回はその要素の中の文字を差し替えて、見ている人にも分かる変化を起こします。書き方は拍子抜けするほど短く、プロパティに代入するだけです。

これで画面の見出しが差し替わります。第2章でやった変数への代入と同じ書き方で、左辺が変数ではなく要素のプロパティになっただけです。= の意味は変わりません。

読むこともできます。代入せずに右辺として使えば、いま表示されている文字が取れます。

textContent は、その要素の中にある文字をすべてつなげたものです。子要素の中の文字も含まれます。自己紹介の段落には span や strong が入っていますが、textContent で読むとタグは消えて、文字だけが 1 本につながって返ります。

解説

代入すると、中に入っていた子要素はまるごと消えます。.profile-text の textContent に文字を入れると、中の span.highlight も strong も無くなり、代入した文字だけが残ります。中の一部だけを変えたいときは、その一部を先に掴んでから代入します。

同じ li がページに 15 個ある

書きかえる相手が 1 つに決まらないと、狙った場所は変わりません。プロフィールサイトの li は、ナビ、趣味、経歴、フッターに散らばっています。querySelector("li") と書くと、いちばん上にあるナビの「自己紹介」が返ってきます。

そこで、CSS で書いてきた子孫セレクタをそのまま使い、探す範囲を先に絞ります。

半角スペースをはさむと「この中にある」という意味になります。同じ名前の見出しやリストが並ぶページでは、この絞り込みができるかどうかで、狙いどおりに当たるかが決まります。

タグを書いたのに、そのまま文字として出る

textContent に "<strong>やあ</strong>" を入れると、画面には太字ではなく <strong>やあ</strong> という文字がそのまま並びます。渡したものを文字としてしか扱わないからです。

タグとして解釈させたいときは innerHTML があります。

便利そうに見えますが、innerHTML は渡された文字列をそのままページの一部にします。入力欄に打たれた文字や、あとから取ってきたデータを入れると、そこに書かれたタグが本当に動いてしまいます。文字を出したいときは textContent を使う、と決めておけば、この事故は起きません。このコースでは最後までそうします。

同じ理由で、textContent に © と渡しても記号にはならず、© の 6 文字がそのまま出ます。実体参照を記号に直すのは HTML を読むときの仕事で、textContent はそこを通らないからです。記号を出したいときは (c) のような、ただの文字を渡します。

よくある間違い

• textContent を関数として呼ぶ — el.textContent("こんにちは") は TypeError です。プロパティなので丸かっこは付けず、el.textContent = "こんにちは" と代入します
• 代入したあとに子要素を掴む — p.textContent = "..." で中身は消えるので、そのあとの p.querySelector(".highlight") は null になります。掴むのが先、代入があとです

1. .tagline の textContent を "JavaScript も学びはじめました" にする
2. #works .section-title を掴み、textContent を "作品ギャラリー" にする
3. .site-footer p を掴み、textContent を "(c) 2026 山田 太郎 / JavaScript で更新" にする
4. 文字を入れるのは textContent だけを使い、innerHTML は使わない