JavaScript【③HTMLを書き換える】
こんばんは😌ザッキーです🎵
火曜日の任務、お疲れさまでした✨
私は今日は、雇用してもらう予定の会社に雇用契約をしに行ってきたのですが・・・
実際に現場で働いているエンジニアの方に会えて気持ちが高揚しました!(^^)!
そして、すでに社長は私を自然にざっきーと呼びますｗ
どんな職場になるんでしょうか・・・期待と不安でいっぱいです。
今夜は連載JavaScriptの第３弾！
【HTMLを書き換えよう】をやっていきます(*^▽^*)
HTMLを書き換える
JavaScriptでできるアウトプットの３つ目は、表示されているHTMLの書き換えです。consoleやダイヤログボックスは、公開するWebサイトやWebアプリケーションで使用することは稀です。JavaScriptでもほとんどの場合、今から紹介するHTMLの書き換えを行います。
要素を取得する方法を知る
- 書き換えたい部分のHTMLタグとそのコンテンツ(要素)を取得する
- 取得した要素のコンテンツを書き換える
まずは、１.の取得からご紹介です(^^)/
今回は最も簡単な特定のid属性を持つ要素を取得する方法を使います！
まずはHTMLからみていきましょう(^^♪
<section>
<p id="choice">ここに日時を表示します</p>
</section>
続いてJavaScriptです。
<script>
'use strict';
console.log(document.getElementId('choice'));
</script>
上記のように記述することでconsoleには
<p id="choice">ここに日時を表示します</p>
という表示が出てきます。
この、console.log()の中身、※document.getElementId('choice')というdocumentプロブラムが、HTMLの要素の変更など【HTMLのidの部分(上記プログラムならchoice)を取ってきて！】というプログラムになります。
要素は、'シングルコーテーション'か"ダブルコーテーション"でくくります。
※特定のid名を持つ要素を取得する
取得した要素のコンテンツ(文章)を書き換える
では続いてchoiceの部分にnew Date()という変数を使用して実際に日時を変えていきましょう！
<script>
'use strict';
console.log(document.getElementId('choice').textContent = new Date();
</script>
上記のように、.textContent = new Date()と記述することでconsoleには
Fri May 17 2019 12:00:00 GMT+0900(日本標準時)と表示されます。
consoleに表示されたことが確認出来たら、console.logと();を削除してブラウザに反映されたか見てみましょう(^^♪
要素のコンテンツを書き換えるtextContent
document.getElementId('id名').textContent = '書き換えたい文字列';
と書くことで先ほどの日時のように文字列を書き換えることができます。
文字列を書き換えたいときはシングルコーテーションで囲みます。new Date（）など変数を使う場合はシングルコーテーションは必要ありません。
まとめ
- documentプログラムでHTMLから要素を取得しよう
- textContentをつかって文字列を書き換えよう
- 変数登場
今日は上記のような内容でお届けしました(^^)/
奥が深いプログラムの大切なところなので私も復習ができてうれしいです('ω')
今夜も最後までお付き合いいただきありがとうございました。
THANKYOU for comming
a lot of LOVE💕ザッキーでした(*^▽^*)
