JavaScriptのDOMで要素の内容を変更する方法をやさしく解説！初心者向け完全ガイド

新人と先輩の会話形式で理解しよう

新人

「JavaScriptで表示されているテキストを動的に変更するにはどうしたらいいですか？」

先輩

「JavaScriptのDOM操作を使えば、簡単に要素の内容を変更できますよ。今から基本的な使い方を見ていきましょう！」

1. DOMを使って要素の内容を変更する方法とは？

DOM（ドキュメントオブジェクトモデル）を使えば、HTML内の要素をJavaScriptから操作し、その内容を変更することができます。たとえば、ボタンを押したときに見出しの文字を変えたり、入力フォームの内容をリアルタイムで反映することが可能です。

2. 要素の内容を変更する基本の方法

HTMLの要素を取得し、その中のテキストやHTMLを変更するには、innerHTMLやtextContentを使います。次の例で実際に見てみましょう。


<h1 id="heading">初期の見出しです</h1>
<p id="output1"></p>

<script>
let heading = document.querySelector("#heading");
heading.innerHTML = "変更された見出しです！";

let output1 = document.querySelector("#output1");
output1.innerHTML = "変更後の見出し: " + heading.innerHTML;
</script>

ブラウザ表示

このプログラムでは、querySelectorを使って見出しを取得し、その内容をinnerHTMLで書き換えています。最初の見出しが「変更された見出しです！」に変わり、その結果が画面に表示されます。

3. ボタンを押したときに内容を変更する例

次に、ボタンをクリックしたときに要素の内容を変更する例を見てみましょう。


<h2 id="message">元のメッセージです</h2>
<button onclick="changeMessage()">クリックしてメッセージを変更</button>
<p id="output2"></p>

<script>
function changeMessage() {
    let message = document.querySelector("#message");
    message.innerHTML = "メッセージが変更されました！";

    let output2 = document.querySelector("#output2");
    output2.innerHTML = "変更されたメッセージ: " + message.innerHTML;
}
</script>

ブラウザ表示

このコードでは、ボタンをクリックすると関数changeMessageが実行され、メッセージが変更され、その結果が画面に表示されます。

4. innerHTMLとtextContentの違い

要素の内容を変更する際に使うinnerHTMLとtextContentには重要な違いがあります。

innerHTML: HTMLタグを含めたコンテンツを変更できます。
textContent: テキストのみを変更します。HTMLタグは無視されます。

たとえば、次のような違いがあります：


<p id="demo"></p>
<p id="output3"></p>

<script>
let demo = document.querySelector("#demo");

// innerHTMLを使ってHTMLタグを含む内容を追加
demo.innerHTML = "これは<strong>太字</strong>のテキストです。";

let output3 = document.querySelector("#output3");
output3.innerHTML = "innerHTMLの結果: " + demo.innerHTML;
</script>

ブラウザ表示

innerHTMLを使った場合にはHTMLタグも反映されますが、textContentではタグが無視され、単なる文字列として扱われます。

5. 実際の活用例：フォームの入力内容を表示する

次の例では、入力フォームに入力した内容をボタンを押したときに表示する方法を紹介します。


<input type="text" id="inputText" placeholder="何か入力してください">
<button onclick="displayInput()">入力内容を表示</button>
<p id="displayText">ここに入力内容が表示されます</p>

<script>
function displayInput() {
    let input = document.querySelector("#inputText");
    let display = document.querySelector("#displayText");
    display.innerHTML = "入力された内容: " + input.value;
}
</script>

ブラウザ表示

この例では、フォームに入力された内容がボタンを押すと画面に表示される仕組みです。これを応用して、インタラクティブなウェブページを作ることができます。

6. 要素の属性を変更する方法

DOM操作では、要素のテキストだけでなく、属性（属性値）も変更することができます。たとえば、画像の表示先やリンク先を動的に変更することが可能です。


<img id="image" src="image1.jpg" alt="サンプル画像">

<script>
let image = document.querySelector("#image");
image.setAttribute("src", "image2.jpg");
</script>

この例では、画像のsrc属性を変更することで、表示される画像を切り替えています。

7. クラスの追加・削除で見た目を変更する

要素の内容だけでなく、CSSのクラスを操作することで見た目を変更することもできます。これにより、動的なデザイン変更が可能になります。


<p id="text">スタイルを変更します</p>

<script>
let text = document.querySelector("#text");

// クラスを追加
text.classList.add("highlight");

// クラスを削除
text.classList.remove("highlight");
</script>

classListを使うことで、簡単にクラスの追加や削除ができ、見た目の変更を柔軟に行えます。

8. 要素を新しく追加・削除する方法

DOM操作では、既存の要素の変更だけでなく、新しい要素を追加したり、不要な要素を削除することもできます。


<div id="container"></div>

<script>
let container = document.querySelector("#container");

// 新しい要素を作成
let newElement = document.createElement("p");
newElement.textContent = "新しく追加された要素です";

// 要素を追加
container.appendChild(newElement);

// 要素を削除
container.removeChild(newElement);
</script>

このように、要素の追加や削除を行うことで、より動的で柔軟なページを作ることができます。