JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでHTMLの内容を変更することはできる？基本と実例をわかりやすく解説

はい、JavaScriptを使えばHTMLの内容を変更することは十分に可能です。通常、HTMLのコンテンツは<p>や<span>などのタグの中に記述されています。JavaScriptにはHTMLタグへアクセスするためのDOMメソッドが用意されており、document.getElementById()やdocument.getElementsByTagName()などを利用することで、対象のタグを指定して表示内容を書き換えられます。

DOMメソッドによるHTML操作の仕組み

ブラウザは読み込んだHTMLを「DOM（Document Object Model）」と呼ばれるツリー構造として管理しています。JavaScriptはこのDOMを通じて各要素にアクセスし、innerHTMLプロパティに新しい文字列を代入するだけで、画面に表示されているテキストを動的に変更できます。

例1：spanタグの内容を変更する

次の例では、DOMメソッドdocument.getElementById()を使って、spanタグ内のテキストをボタンのクリック時に切り替えています。

<html>
<body>
    <span id="change">Is javaScript is java.</span>
    <input type = "button" value = "change"
    onclick='document.getElementById("change").innerHTML = "No JavaScript is not java!"'>
</body>
</html>

上記のコードを実行すると、最初は画面に次のように表示されます。

JavaScriptでHTMLの内容を変更することはできる？基本と実例をわかりやすく解説

ここで「change」ボタンをクリックすると、spanタグの中身が書き換わり、出力は以下のようになります。

実行結果

JavaScriptでHTMLの内容を変更することはできる？基本と実例をわかりやすく解説

例2：pタグ（段落）の内容を変更する

続いて、JavaScriptのDOMメソッドを使って、段落タグ（<p>）の内容を変更する例を見てみましょう。

<html>
<body>
    <p id="change">Elon musk has failed 3 times</p>
    <input type = "button" value = "change"
    onclick='document.getElementById("change").innerHTML = "Elon musk has succeded in his fourth attempt"'>
</body>
</html>

コードを実行すると、まず画面には初期状態として次のように表示されます。

JavaScriptでHTMLの内容を変更することはできる？基本と実例をわかりやすく解説

「change」ボタンをクリックすると、段落のテキストが差し替えられ、出力は以下のようになります。

実行結果

JavaScriptでHTMLの内容を変更することはできる？基本と実例をわかりやすく解説

補足：textContentとの使い分け

innerHTMLはHTMLタグを含む文字列を設定できる一方、悪用されるとXSS（クロスサイトスクリプティング）のリスクがあります。単純なテキストのみを扱う場合は、より安全なtextContentプロパティを使うのがおすすめです。また、近年ではquerySelector()を使った要素の取得も広く利用されています。

  1. 【JavaScript】ドキュメント全体のHTMLを文字列として取得する方法を解説

    Webページのソースコード全体を取得して処理したい場面は、デバッグや動的なコンテンツ操作など、JavaScript開発では意外と多くあります。この記事では、ドキュメント全体のHTMLを文字列として取得する方法を、具体的なコード例とともにわかりやすく解説します。 innerHTMLプロパティを使った取得方法 ドキュメント全体のHTMLを文字列として取得するには、document.documentElementのinnerHTMLプロパティを利用します。 document.documentElement.innerHTML; document.documentElementはHTML文書のルート要

  2. JavaScriptで関数の実行結果をHTMLとして表示する方法

    関数の結果をHTMLとして表示するには？JavaScriptで関数の実行結果をHTMLとして画面に表示したい場合は、document.getElementById().innerHTML を使います。このプロパティに文字列や計算結果を代入することで、指定した要素の中身を動的に書き換えることができます。innerHTMLはDOM操作の基本であり、ユーザーの操作に応じてリアルタイムに画面を更新したい場合によく利用されます。サンプルコード以下は、ページ内にあるテキストボックス（input type=text）の数をカウントし、その結果をHTMLとして表示するコード例です。<!DOCTYPE h