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