【JavaScript】取得したDOMのテキストを変更する方法を学ぼう！

この記事の内容

この記事ではJavaScriptで取得したDOMのテキストを変更する方法について解説していきます！

結論としては取得したDOMに対して「innerHTML」や「innerText」プロパティを指定することでテキストのみを扱うことができて、テキストの変更もできるという内容になっています。

取得したDOMをコンソールに表示してどのようになっているのかを見てみる
テキストを扱っているプロパティについて
テキストのみを変更してみる
まとめ

取得したDOMをコンソールに表示してどのようになっているのかを見てみる

今回は以下のHTMLを題材にして見ていきます。
このHTMLの中でbodyタグの中にあるh1タグのDOMを取得するJavaScriptのコードを書いて解説を進めていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script.js" defer></script>
</head>
<body>
    <h1 class="title">Hello</h1>
</body>
</html>

では、さっそくh1タグのDOMを取得するコードを見ていきます。

let element = document.querySelector('.title');
console.log(element);

クラス名のtitleを使ってh1タグのDOMを取得し、コンソールに表示させるコードです。

するとブラウザ上では以下の２通りのどちらかの表示がされます。

HTMLのコードが表示される場合は文字列として表示されています。そうでない場合はDOMオブジェクトが表示されている状態です。ブラウザをリロードすると不規則で表示のされ方が変わります。ここでは一旦気にしないでください。

この後の解説の都合上、DOMオブジェクトで表示されている方で解説を進めていきます。

ここで伝えたいことはDOMを取得してコンソールに表示させた時にDOMが表示されているのであって、「Hello」という文字だけが表示されていないという点です。

テキストを扱っているプロパティについて

先ほど述べた通り、DOMを取得してコンソールに表示させた場合、それはDOMを表示させているだけでテキストのみを表示させているわけではないです。

DOMを取得した際にDOMが持つプロパティの中にテキストを扱っているプロパティがあります。それを使うことでテキストのみを扱うことができるようになります。

DOMが持つプロパティはDOMをコンソール上に表示させることで確認することができます。

先ほど表示させたDOMの▶︎マークをクリックすることで、そのDOMが持つプロパティの一覧を見ることができます。こちらはアルファベット順で並んでいます。

下の方にスクロールしてみると「innerHTML」や「innerText」が出てきて「Hello」と書かれています。
この「innerHTML」や「innerText」がテキストを扱っているプロパティになります。

以下のコードの場合、コンソール上にテキストのみが表示されます。

let element = document.querySelector('.title');
console.log(element.innerHTML);
console.log(element.innerText);

このように取得したDOMが持つプロパティを指定することでテキストのみを扱うことができます。もちろんテキスト以外を扱いたい場合はそれに適したプロパティを指定することで可能となります。

テキストのみを変更してみる

ここまでテキストのみを扱う方法について解説をしてきました。最後にテキストを変更するコードについても解説をしていきます。

テキストを変更する場合は変更したいテキストを代入することで変更することができます。

let element = document.querySelector('.title');
element.innerHTML = 'Goodbye';
console.log(element.innerHTML);

上記のコードではコンソール上に「Hello」ではなく「Goodbye」が表示されます。また画面上のテキストも「Goodbye」に変わります。

これをaddEventListener()と組み合わせて使うとイベントの発生時にテキストを変えるといったこともできます。

let element = document.querySelector('.title');

element.addEventListener('click', () => {
    element.innerHTML = 'Goodbye';
})

上記のコードはh1タグがクリックされたら「Hello」が「Goodbye」に変化します。

まとめ

最後にこの記事のまとめです。

⚫︎取得したDOMをコンソールに表示してどのようになっているのかを見てみる

DOMを取得してコンソールに表示させた場合、テキストではなくDOMそのものが表示される。

⚫︎テキストを扱っているプロパティについて

「innerHTML」や「innerText」がDOMの中のテキスト部分を扱っているプロパティになります。

⚫︎テキストのみを変更してみる

変更したいテキストを代入してあげることで変更できます。
addEventListener()などと組み合わせて特定の場合のみテキストを変更するような処理もできます。

最後まで読んでいただきありがとうございました！