JavaScriptちゃんと学習中。
ほぼ自分の勉強メモです。
過度な期待はしないでください。

HTMLを置き換える

手順

　１、JavaScriptを使って、書き換えたい部分のHTML要素のid名やクラス名を指定することで、マッチする要素を取得
　２、取得した要素のコンテンツを書き換える

１、要素を取得

　documentオブジェクトには、ブラウザに表示されているHTMLや、それに関連するCSSを
　操作する機能を持っている。また、いくつかのメソッドを利用することでマッチする要素を
　抽出して取得することが出来る。

getElementById("id名")メソッド

id名で取得する書き方

document.getElementById("id名");

　今回使用したgetElementById("id名")メソッドは、(　)内に指定されたid名を
　持つ要素を丸ごと取得する。
　id名は、文字列で指定する必要があるのでシングルクォテーションで囲む。

getElementsByClassName("class名")メソッド

class名で取得する書き方

document.getElementsByClassName("クラス名");

　getElementsByClassName("クラス名")メソッドは、(　)内に指定されたclass名を
　指定して取得する。
　ここで注意する所は、getElementsと複数形になっている事。
　class名を指定するgetElementsByClassName("class名")の場合は、同じclassを持つ
　要素を全て取得することが可能な為。

document.querySelector("セレクタ名")メソッド

セレクタ名で取得する書き方

document.querySelector("セレクタ名");

　セレクタ名とは、CSSでスタイルを適用するために指定している要素。
　querySelector("セレクタ名")メソッドは、セレクタ名を指定して要素を取得する。
　しかしHTML上から、引数で指定したセレクタに合致するもののうち一番最初に見つかった要素1つを
　取得する。

２、コンテンツを置換・追加

　取得したHTMLの要素のコンテンツを書き換える為には下記の記述をする。

textContentプロパティ

取得した要素のコンテンツを書き換える

document.getElementById("id名").textContent = '書き換えたい文字列';

innerHTMLプロパティ

取得した要素のコンテンツを書き換える

document.getElementById("id名").innerHTML = '書き換えたい文字列';

　上記２つのつ違いは、HTMLを解釈して出力するかしないか。

　textContentプロパティは、htmlのタグを文字としてそのまま出力する(HTMLを解釈せず出力)
　innerHTMLプロパティは、htmlのタグを解釈して出力する。

　例えば、<b>ボタンを押しました</b>という文字列に書き換える場合、
　textContentプロパティは、<b>ボタンを押しました</b>と出力し、タグも文字として表示する。
　innerHTMLプロパティは、ボタンを押しましたと出力し、タグをHTMLとして解釈して表示する。

※参考記事：JavaScript textContentとinnerHTMLの違い

　documentやconsoleなどの全てオブジェクトには、それぞれ固有のメソッドとプロパティを持っている。
　メソッドには、必ず後ろに（）がつき、オブジェクトに◯◯しなさいと指示を出す。
　また、プロパティはその値を読み取たり、書き換えたりすることが出来る。ここでいうプロパティの値とは、
　＝の横の'書き換えたい文字列'の部分を指す。

classListプロパティ

　特定の要素のクラス名を追加、削除することが出来るプロパティ。
　classListの後にメソッドを定義することにより、機能を指定する事が出来る。
　メソッドとして、add、remove、item、toggle、contains、replaceなどがある。

　今回はaddを使う。

　-addメソッド
　addメソッドは、クラスを追加する
　classList.add("クラス名")と使うことで追加する。

HTML

<div id="target">ターゲット</div>
<div id ="btn">button</div>

CSS

.sample {
  color: red;
}

JavaScript

// idを取得して、変数で定義
let target = document.getElementById("target");
let btn = document.getElementById("btn");

// クラス追加を押したらsamleクラスが追加される
btn.addEventListener("click", function() {
  target.classList.add("sample");
});

ダイアログボックス

アラートダイアログボックス

　windowオブジェクトとalertメソッドを用いることで、上記の画像のように
　ブラウザ上にアラートを表示することが出来る。
　引数にアラートを表示させる情報を渡します。上記の例では、文字列を直接引数にしましたが、変数でも可。

書き方

window.alert('メッセージ');

確認ダイアログボックス

　確認ダイアログボックスを表示させるには、windowオブジェクトとconfirmメソッドを用いる。　confirmメソッドには、alertメソッドには無い特徴があり、ダイアログボックスを表示するだけでなく　リターンを返すこと -リターンを返すとは、そのメソッドが実行結果を報告してくるようなもの- をし、　確認ダイアログボックスの[OK]をクリックすればtrueが、[キャンセル]の時は、falseという　値を返すという実行結果を報告する。

書き方

window.confirm('メッセージ');

過去投稿記事

【JavaScript ~変数・定数、if文・switch文~】勉強メモ
 【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②
【JavaScript ~関数について~】勉強メモ③
【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④
【JavaScript ~ファイルの分割について~】勉強メモ⑤
【JavaScript 読み込み】勉強メモ⑥
【JavaScript ~配列のメソッド~】勉強メモ⑦
【JavaScript ~コールバック関数~】勉強メモ⑧
【JavaScript ~イベント~】勉強メモ⑩
【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11
【JavaScript ~Mathオブジェクト~】勉強メモ12