【JavaScript ~HTMLを置き換え・ダイアログボックス~】勉強メモ⑨

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


HTMLを置き換える
-
- 手順

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

１、要素を取得
-

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

- getElementById("id名")メソッド

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

- getElementsByClassName("class名")メソッド

```.js:class名で取得する書き方
document.getElementsByClassName("クラス名");
```
　getElementsByClassName("クラス名")メソッドは、(　)内に指定されたclass名を
　指定して取得する。
　ここで注意する所は、<b><font color="Red">getElements</font></b>と複数形になっている事。
　class名を指定するgetElementsByClassName("class名")の場合は、同じclassを持つ
　要素を全て取得することが可能な為。
<br>

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

```.js:セレクタ名で取得する書き方
document.querySelector("セレクタ名");
```
　セレクタ名とは、CSSでスタイルを適用するために指定している要素。
　querySelector("セレクタ名")メソッドは、セレクタ名を指定して要素を取得する。
　しかしHTML上から、引数で指定したセレクタに合致するもののうち<b><font color="Red">一番最初に見つかった要素1つ</font></b>を
　取得する。

<br>

２、コンテンツを置換・追加
-
　取得したHTMLの要素のコンテンツを書き換える為には下記の記述をする。

- textContentプロパティ

```.text:取得した要素のコンテンツを書き換える
document.getElementById("id名").textContent = '書き換えたい文字列';
```
<br>

- innerHTMLプロパティ

```.text:取得した要素のコンテンツを書き換える
document.getElementById("id名").innerHTML = '書き換えたい文字列';
```

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

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

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

※参考記事：[JavaScript textContentとinnerHTMLの違い](https://itsakura.com/js-textcontent-innerhtml)

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

- classListプロパティ

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

　

　今回はaddを使う。

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

```.html:HTML
<div id="target">ターゲット</div>
<div id ="btn">button</div>
```

```.css:CSS
.sample {
  color: red;
}
```

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

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

ダイアログボックス
-
<img width="1000" alt="ファイル名" src="https://i.gyazo.com/db8ce3818cfe93c7dbfb382d5bbd31d7.png">

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

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

```.js:書き方
window.alert('メッセージ');
```
<br>

- 確認ダイアログボックス

<img width="1000" alt="ファイル名" src="https://i.gyazo.com/df916da40fa5fef86bf450c362c5baf9.png">
　確認ダイアログボックスを表示させるには、windowオブジェクトとconfirmメソッドを用いる。
　confirmメソッドには、alertメソッドには無い特徴があり、ダイアログボックスを表示するだけでなく
　リターンを返すこと -リターンを返すとは、そのメソッドが実行結果を報告してくるようなもの- をし、
　確認ダイアログボックスの[OK]をクリックすればtrueが、[キャンセル]の時は、falseという
　値を返すという実行結果を報告する。

```.js:書き方
window.confirm('メッセージ');
```
<br>

過去投稿記事
-
[【JavaScript ~変数・定数、if文・switch文~】勉強メモ](https://qiita.com/k-yasuhiro/items/1fb63f0881faf67bcb29)
[【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②](https://qiita.com/k-yasuhiro/items/6625942cc901feb6bfdf)
[【JavaScript ~関数について~】勉強メモ③](https://qiita.com/k-yasuhiro/items/52e3ebb79bb0248a7c5e)
[【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④](https://qiita.com/k-yasuhiro/items/52e3ebb79bb0248a7c5e)
[【JavaScript ~ファイルの分割について~】勉強メモ⑤](https://qiita.com/k-yasuhiro/items/209eda27bbc61ae961a1)
[【JavaScript 読み込み】勉強メモ⑥](https://qiita.com/k-yasuhiro/items/fe3fc2bd7b14fe4f3968)
[【JavaScript ~配列のメソッド~】勉強メモ⑦](https://qiita.com/k-yasuhiro/items/279b7bb59f112f917c51)
[【JavaScript ~コールバック関数~】勉強メモ⑧](https://qiita.com/k-yasuhiro/private/ded7e2cad732774d059e)
[【JavaScript ~イベント~】勉強メモ⑩](https://qiita.com/k-yasuhiro/items/b0d4037d0edaae38a495)
[【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11](https://qiita.com/k-yasuhiro/items/fa586154cf7064eb7058)
[【JavaScript ~Mathオブジェクト~】勉強メモ12](https://qiita.com/k-yasuhiro/items/b931a15fb71322ee3cca)