IDを通じてHTML内の要素を指定した上で、そのタグ内のコードを書き換える
JavaScript を使って HTML ファイルを動的に書き換える方法を解説します。以下のコードをテキストエディタなどに入力し、ファイルにindex.htmlと名前を付けて、適当な場所に保存してください。続いて、そのファイルをブラウザで開きます。
注文を確定しますか？
ブラウザ上に以下のメッセージが表示されるはずです。
現状、ブラウザには「注文を確定しますか？」という文字列が表示されていますが、JavaScript を使い、ブラウザに表示される文字列を「ご注文を承りました。」に変更します。「注文を確定しますか？」という文字列は、先ほど作成したindex.htmlにおいてp要素の内部に記述されています。そこで、このp要素の内部を「ご注文を承りました。」という文字列に置き換える JavaScript コードを作成します。
JavaScript には、HTML ファイル中の要素を id から特定し、その要素に変更を加える機能があります。そこで、まずはindex.htmlを以下のように修正した上で、上書き保存してください。
注文を確定しますか？
7 行目では、これから変更しようとしているp要素にorderという名前の id を付けています。
8行目では、今回利用する JS ファイルchange.jsを読み込んでいます。change.jsの内容は以下の通りです。
document.getElementById("order").innerHTML = "ご注文を承りました。"
上と同じ内容をテキストエディタなどに入力し、ファイルにchange.jsと名前を付けた上で、先ほど作成したindex.htmlと同じ場所に保存してください。
解説します。上の JavaScript コード中の、
document.getElementById("要素のid")
という記述は、「HTMLソースコードの中から、指定した id を持つ要素を見つけなさい」という命令です。さらに、
document.getElementById("要素のid").innerHTML = 新たなコード
と続けることで、見つけた要素の内容（開始タグと終了タグの間の内容）を変更することができます。したがって、
document.getElementById("order").innerHTML = "ご注文を承りました。"
という命令を人間の言葉に翻訳すると、「HTMLソースコードの中からorderという id を持つ要素を探し、見つかった場合には、その要素の開始タグと終了タグの間に書かれたコードを「ご注文を承りました。」という文字列に置き換えなさい。」となります。したがって、このchange.jsは以下のような処理を行います。
index.htmlのソースコードを見て、orderという id を持つ要素を探す。その結果、p要素を見つける。- 現状、発見した
p要素の開始タグ<p>と終了タグ<p>の間には「注文を確定しますか？」と書かれているが、それを「ご注文を承りました。」に置き換える。
index.htmlを実行してみてください。以下のように、ブラウザに表示される文字列が「ご注文を承りました。」に変更されているはずです。
IDを通じてHTML内の要素を指定した上で、その要素の属性を書き換える
上の例では、id から指定した要素について、その開始タグと終了タグの間にある情報を置換しました。これとは別に、id から指定した要素について、その属性の値を変更することもできます。
index.htmlの内容はそのままで、change.jsの内容を以下のように変更し、上書き保存してください。
document.getElementById("order").style.color = "#FF0000"
document.getElementById("order").style.fontSize = "30px"
document.getElementById("order").style.fontWeight = "bold"
解説します。上のコードのように、
document.getElementById("要素のid").style.プロパティ名 = "プロパティの値"
と記述することで、id を通じて指定した要素のstyle属性を変更することができます。したがって、change.js の 1 行目
document.getElementById("order").style.color = "#FF0000"
の意味は、「HTMLソースコードの中からorderという id を持つ要素を探し、見つかった場合には、その要素の style属性 のcolorプロパティ―の値を#FF0000に変更する」となります。つまり、これは色を赤に変更せよという命令です。また、2 行目
document.getElementById("order").style.fontSize = "30px"
の意味は、「HTMLソースコードの中からorderという id を持つ要素を探し、見つかった場合には、その要素の style属性 のfontSizeプロパティ―の値を30pxに変更する」となります。つまり、これはフォントサイズを30pxに変更せよという命令です。また、3 行目
document.getElementById("order").style.fontWeight = "bold"
の意味は、「HTMLソースコードの中からorderという id を持つ要素を探し、見つかった場合には、その要素の style属性 のfontWeightプロパティ―の値をboldに変更する」となります。つまり、これはフォントを太文字にせよという命令です。
index.htmlを実行してみてください。以下のように、ブラウザに表示される文字列のスタイルが変更されるはずです。
ユーザーがボタンを押したらイベントが起こるようにする
HTML ファイルを読み込んだ瞬間に JavaScript が HTML の内容を変更するのではなく、ユーザーが画面上のボタンを押すなど、何らかのアクションが起きたタイミングで HTML の内容を変更したいことがあります。以下はよくある事例です。
- 画面上に「注文を確定しますか？」というメッセージと、確定ボタンが表示されている。
- ユーザーが確定ボタンをクリックする。
- すると、画面上のメッセージが「ご注文を承りました。」に替わり、確定ボタンは画面から消える。
JavaScript を利用すれば、URL を遷移させることなく、こうした一連の流れを同一ページ内で実行することができます。
index.htmlの内容を以下のように変更し、上書き保存してください。
注文を確定しますか？
8 行目では、新たにボタンを設けています。このボタンにはbuttonという名前の id を付けています。
また、change.jsの内容を以下のように変更し、上書き保存してください。
document.getElementById("button").onclick = function() {
document.getElementById("order").innerHTML = "ご注文を承りました。";
document.getElementById("button").style.display = "none";
}
上のコードのように、
document.getElementById("ボタンのid").onclick = function() {
ボタンを押した時に実行する命令1;
ボタンを押した時に実行する命令2;
ボタンを押した時に実行する命令3;
…
}
と記述することで、ユーザーがボタンを押したタイミングで行う処理を指定することができます。change.jsでは、ボタンを押した場合に行う 2 つの処理を指定しています。1 つ目の処理である、
document.getElementById("order").innerHTML = "ご注文を承りました。";
は先ほどと同様ですので、解説は必要ありません。2 つ目の処理である、
document.getElementById("button").style.display = "none";
の意味は、「HTMLソースコードの中からbuttonという id を持つ要素を探し、見つかった場合には、その要素の style属性 のdisplayプロパティ―の値をnoneに変更する」となります。index.htmlにおいてボタンにbuttonという id を付与してありますので、この命令によってボタンは画面から消えます。
index.htmlを実行してみてください。以下のように、ボタンを押すとメッセージが変わるとともに、ボタンは画面から消えるはずです。
