[JavaScript]テキストを書き換える

WebページはHTMLでマークアップされています。テキストを含み、Webページ上のあらゆる要素は何らかの形でマークアップされています。マークアップしている箇所を「要素（Element）」と言い、この要素をJavaScriptで操作をします。

もちろん、要素を指定する、ということだけがJavaScriptではありません。しかし、Webページを操作する場合はHTMLの要素を指定して様々な操作を行うことができるようになることがWebページの制作には欠かすことができません。

オブジェクトを利用できるようになることがJavaScriptの第一歩であり、HTMLが作り出したオブジェクトを構造化したものがDOMと呼ばれるものです。
JavaScriptによるHTMLを操作する、ということをDOMを操作するとよく言います。

下記のように操作したい要素を取得し、どのように操作するのか命令文を書くことになります。

//HTMLのp要素を指定する。
const element = document.querySelector('p');
//HTMLのp要素に指定されたclass[sample]を指定する。
const element_class = document.querySelector('p.sample');
//HTMLのp要素に指定されたclass[onlySample]を指定する。
const element_id = document.querySelector('p#onlySample');

簡単に操作をしたい場合は下記のように要素していからinnerTextを利用してテキストを差し替えることが可能です。
なお、上記のdocument.querySelectorは最初の要素を一つだけ読み込みます。
すべてを指定したい場合はdocument.querySelectorAllを使うことで可能です。

ここをJavaScriptで書き換えます。

<p class="sample">ここをJavaScriptで書き換えます。</p>

const element_class = document.querySelector('p.sample');
element_class.innerText = '実はここをJavaScriptで書き換えるというスクリプトを実行しています。';

「innerText」は簡単に説明すれば要素のテキスト情報を取得できます。この場合は取得した上でテキストの指定をしているため、書き換わるように処理されます。

似たような処理として「textContent」と「innerHTML」があります。
「textContent」は要素に含まれるテキスト情報のみを取得します。innerTextと変わらないように思えますがinnerTextは改行を示す情報なども取得することに対して、textContentはあくまでテキスト情報のみです。
「innerHTML」はHTML要素を含んで取得することが可能です。そのためHTMLそのものを取得、書き換えを行いたいときに使われることが多いです。

// innerTextはテキスト情報及び改行などを含んで取得
element_class01.innerText = '書き換えたいテキスト';
// textContentはテキスト情報のみを取得
element_class02.textContent = '書き換えたいテキスト';
// innerHTMLはHTMLを含んだテキスト情報を取得
element_class03.innerHTML = '<p>書き換えたいテキスト</p>';

上記の書き方ですとWebページを読み込んだタイミングで実行してしまうため、後記の「イベント」を実行するということ、それと「タイミング」を指定する必要があります。

ここまではあくまで制作者目線での書きぶりでしたが、Webページはあくまでユーザーが利用するものです。
ユーザーがボタンを押したタイミングで、なにかしらのイベントを実行するなどのプログラムを書くということも非常に多くあります。

変数.addEventListener('click',() => {
  関数内の処理
});

イベントリスナー（addEventListener）を設定することは非常に重要なことです。イベントを操作したいときに使用するため、必ず覚えておく必要があります。
上記のプログラムを書くことで、指定された箇所をクリックしたとき、処理を実行する、ということが可能になります。

クリックする以外にも様々なタイミングが指定可能なため、紹介します。

//要素をクリックしたとき
変数.addEventListener('click',() => {関数内の処理});
//要素の上にマウスポインタを当てたとき
変数.addEventListener('mouseover',() => {関数内の処理});
//要素の上にマウスポインタを要素から離したとき
変数.addEventListener('mouseout',() => {関数内の処理});
//要素の上にマウスボタンを押したとき
変数.addEventListener('mousedown',() => {関数内の処理});
//要素の上にマウスボタンを離したとき
変数.addEventListener('mouseup',() => {関数内の処理});
//要素にフォーカスが当たったとき
変数.addEventListener('focus',() => {関数内の処理});
//要素からフォーカスが外れたとき
変数.addEventListener('blur',() => {関数内の処理});
//キーボードが押された場合
変数.addEventListener('keydown',() => {関数内の処理});
//キーボードが押してから離した場合
変数.addEventListener('keyup',() => {関数内の処理});
//ページが読み込まれたとき
変数.addEventListener('onLoad',() => {関数内の処理});
//ページの読み込みが完了したとき
変数.addEventListener('load',() => {関数内の処理});
//フォームがサブミットされたとき
変数.addEventListener('submit',() => {関数内の処理});
//フォームがリセットされたとき
変数.addEventListener('reset',() => {関数内の処理});
//フォームの内容が変更されたとき
変数.addEventListener('change',() => {関数内の処理});
//ウィンドウがリサイズされたとき
変数.addEventListener('resize',() => {関数内の処理});
//イメージの読み込みが失敗したとき
変数.addEventListener('abort',() => {関数内の処理});
//読み込みが失敗したとき
変数.addEventListener('error',() => {関数内の処理});

ボタンを押して書き換える

ここが書き換わります。

<input type="text" class="input_test">
<button class="button_test">ボタンを押して書き換える</button>
<p class="element_test">ここが書き換わります。</p>

const input_test = document.querySelector('.input_test');
const button_test = document.querySelector('.button_test');
const element_test = document.querySelector('.element_test');
button_test.addEventListener('click',()=> {
  element_test.innerText = input_test.value;
});

ここにテキストを入力してください。色々あって大変だけれど、私は泣いたことがない本当の愛と別れはいつもついてくる幸せの後ろをついてくるそれが私のくせなのかそいそいそい！！ ボタンを押して書き換える

ここが書き換わります。

<textarea cols="60" rows="5" id="textarea_test"
placeholder="ここにテキストを入力してください。">ここにテキストを入力してください。色々あって大変だけれど、私は泣いたことがない本当の愛と別れはいつもついてくる幸せの後ろをついてくるそれが私のくせなのかそいそいそい！！</textarea>
<input type="text" id="input_before">
<input type="text" id="input_after">
<button class="button_test2">ボタンを押して書き換える</button>
<p class="element_test2">ここが書き換わります。</p>

const tarea = document.querySelector('#textarea_test');
const fipt = document.querySelector('#input_before');
const repipt = document.querySelector('#input_after');
const btn2 = document.querySelector('.button_test2');
const tareb = document.querySelector('.element_test2');
btn2.addEventListener('click', () => {
  const input_before = fipt.value;
  const input_after = repipt.value;
  let tagtxt = tarea.value;
  tagtxt = tagtxt.replaceAll(input_before, input_after);
  const newelem = document.createElement('p.element_test2');
  tareb.innerText = tagtxt;
});