【Javascript】Javascriptを使ってHTMLを書き換える方法
今回はJavascriptの基本にして最大の機能、「要素のコンテンツを書き換える」方法をメモしていきます。本当にこれね、Javascriptで行える中でも使用頻度はかなり高いので、頑張って自分のものにして行こうと思いますφ(・＿・”)ﾒﾓﾒﾓ
Javascriptによる要素の書き換え
それでは簡単な例を使ってみていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JavascriptでHTMLを書き換える！</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="asset/style.css"> </head> <body> <p id="sample">ここを書き換えます</p> <script type="text/javascript" src="asset/javascript.js"> </script> </body> </html> |
まずはこんな感じのHTMLモデルを用意しますそして大事なのは
|
1 |
<p id="sample">ここを書き換えます</p> |
この部分ですね。ここの要素を取得し、”p”タグ内の文章、「ここを書き換えます」を書き換えてみたいと思います。それでは早速Javascriptを加えてみたいと思います。
See the Pen
GRoOKXJ by egg (@egg0522sei)
on CodePen.
HTMLには変更を加えていませんが、結果として出力されている文章は「これが「Javascript！」」となりました(*’ω’*)
今回書いたJavascriptコードはこちらです。
|
1 2 3 4 |
// JavaScript Document 'use strict' document.getElementById('sample').textContent = 'これがJavascript！'; |
これがJavascriptによる要素の書き換えになります。それでは要所を確認していきましょう。
要素を取得する
Javascriptで要素を書き換える時、実は二段階の処理が行われています。
- 書き換えたい部分のHTMLタグとそのコンテンツ、つまり要素を取得する
- 取得した要素のコンテンツを書き換える
という二つの処理ですね。まず一つ目、HTMLの書き換える前に必要な処理である、「書き換えたい部分のHTMLタグとそのコンテンツ、つまりは要素を取得する」処理です。まずはプログラムにどこを書き換えたいのかということを伝えなければいけないんですね。そのJavascript命令文が
特定のidを取得するコード
|
1 |
document.getElementById('id名') |
の部分です。「documentオブジェクト」と呼ばれるこの書き方は、ブラウザに表示されているHTMLや、それに関連するCSSを操作する為の機能が多数用意されています。今回使用した「getElementById」メソッドは（）内に指定されたidを持つ要素を取得します。注意点としてidは文字列で指定する必要があるのでシングルクォートで囲みます。逆にいえば書き換えたい要素にはちゃんとidを設定しておかなければなりませんね。
取得した要素のコンテンツを書き換える
それでは無事、要素を取得できたら今度は要素のコンテンツを書き換えないといけませんね。そのJavascript命令文が次の部分にあたります。
取得した要素のコンテンツを書き換えるコード
|
1 |
.textContent = '書き換える文字列'; |
「.textContent = ‘書き換えたい文字’」という書き方により、要素内の文章が書き換わっているんですね。
ちなみにこの文字列部分には数式もあてることができ、「new Date()」などを入れると、現在の日付が表示されることになります。
new Date() （現在の日時）を入れてみた場合
See the Pen
dyGZyPy by egg (@egg0522sei)
on CodePen.
まとめ
- JavascriptでHTMLのコンテンツ、すなわち要素を書き換えることができる
- 書き換えの処理は二段階ある
- 書き換えたい要素を取得→取得した要素のコンテンツを書き換えるという順で処理される
- 書き換える文字列には数式や関数もあてはめることができる