JavaScript 基礎編 (ブラウザオブジェクト / DOM)

# この記事の内容について
　フロントエンドの第一歩としてJavaScriptの基礎学習を始めました。アウトプットとして、JavaScriptのオブジェクトやDOM操作などをまとめていこうと思います！
　私はまだエンジニア歴1年未満の初学者なので、間違い等があればご指摘いただけると幸いです。

# JavaScript 基礎編
* [ブラウザオブジェクト / DOM](https://qiita.com/Nao52/items/c6b7531b85a5e4a6c8dc)
* [イベント](https://qiita.com/Nao52/items/6705eeca68a77b3f280a)
* [通信と非同期処理](https://qiita.com/Nao52/items/3ae127867cee0f838643)
* [ミニアプリの開発](https://qiita.com/Nao52/items/ed9f64a9b1c1da91abc0)

# JavaScript 応用編
* [モダンなJavaScriptの機能](https://qiita.com/Nao52/items/5ee9c2af96b4e9dfd278)

# ブラウザオブジェクト
### アラートを表示する 「alert('文字列');」
```
alert('アラートです');
```
### 確認ダイアログを表示する 「confirm('文字列');」
ユーザーが「OK」と「キャンセル」のどちらを選択したのか、boolean型のtrueかfalseの戻り値で受け取ることができる。
```javascript:選択式ダイアログを表示する
const result = confirm('本当に消去してもよいですか？');
if (result) {
    console.log('削除しました');
} else {
    console.log('キャンセルしました');
}
```
### 指定した数秒後に実行する 「setTimeout(関数, ミリ秒数)」
　指定する秒数の単位はミリ秒なので、**1秒後なら(1000)と指定**し、**5秒後なら(5000)と指定**する。setTimeout()に渡す関数は**関数の名前**でなくてはならない。
例：delayTask → OK!! / delayTask() → ダメ
```javascript:1秒後に関数を実行する
function delayTask() {
    console.log('1秒後に実行する');
}

setTimeout(delayTask, 1000);
```
また、無名の関数を直接記述することも可能
```javascript:無名の関数を直接記述するパターン
setTimeout(function () {
  alert('1秒後に実行する');
}, 1000);

setTimeout(() => {
  alert('5秒後に実行する');
}, 5000);
```
### タイマーをキャンセルする 「clearTimeout()」
　setTimeout()を実行すると数値が返ってくる。これはsetTimeout()で作成されたタイマーを識別できるIDであり、このIDを使うことで未来に実行するタイマーをキャンセルできる。
```javascript:タイマーをキャンセルする
function delayTask() {
    console.log('1秒後に実行する');
}

const timeId = setTimeout(delayTask, 5000);
clearTimeout(timeId);
```
これで、5秒後にdelayTask関数を実行する予定をキャンセルできる。
### 指定した秒数ごとに繰り返し実行する 「setInterval(関数, ミリ秒数)」
setInterval()を設定すると、基本的にブラウザが閉じるまで処理が続く。
```javascript:1秒ごとに繰り返し関数を実行する
function delayTask() {
    console.log('1秒ごとに繰り返し実行される');
}

setInterval(delayTask, 1000);
```
止めたい場合はclearInterval()を使う。使い方はclearTimeout()と同様でタイマーのIDを渡す。
```javascript:繰り返し処理を停止する
function delayTask() {
    console.log('1秒ごとに繰り返し実行される');
}

const timerId = setInterval(delayTask, 1000);
clearInterval(timerId);
```
### ウインドウを開く 「open(URL, ウインドウ名の指定, オプション)」
```javascript:ウインドウを開く
open('https://example.com', 'window name', 'width=400, height=250');
```
### ウインドウを閉じる 「close()」
close()で閉じられるのはopen()で開いたものに限定される。
```javascript:ウインドウを閉じる
// まず新しいウインドウを開く
const newWindow = open('https://example.com');

// 開いた後、close()を実行すると閉じる
newWindow.close();
```

# ドキュメントオブジェクト(DOM)
### 特定の要素を探す
引数のCSSセレクタに一致する最初の要素を返す。
```
document.querySelector(CSSセレクタ);
```
### すべての特定要素を探す
戻り値はNodeListと呼ばれる特殊な配列型式のデータとなる。
```
document.querySelectorAll(CSSセレクタ);
```
### 要素のテキストを変更する
```
要素.textContent = '変更したいテキスト';
```
### 要素の属性を変更する
```
要素.属性名 = '変更したい値';
```
### CSSスタイルを変更する
```
要素.style.CSSプロパティ名 = '値';
```
### クラスを削除する
```
要素.classList.remove('削除するクラス名');
```
### クラスを追加する
```
要素.classList.add('追加するクラス名');
```
### それ以外のClassListオブジェクトのメソッド
* 指定クラスがあれば削除し、なければ追加する
```
要素.classList.toggle('クラス名');
```
* 指定のクラスを置換する
```
要素.classList.replace('対象クラス名','置換クラス名');
```
* 指定のクラスが要素に指定されているか確認する
```
要素.classList.contains('クラス名');
```
### 要素を作成する
```
document.createElement('タグの名前');
```
### 要素の追加
* 要素を先頭に追加する
```
親要素.prepend(追加する要素);
```
* 要素を末尾に追加する
```
親要素.append(追加する要素);
```
* 指定要素の前に要素を追加する
```
指定要素.before(追加する要素);
```
* 指定要素の後ろに要素を追加する
```
指定要素.after(追加する要素);
```
### 要素を削除する
```
削除したい要素.remove();
```
### 要素を置換する
```
置き換えたい要素.replaceWith(置き換える要素);
```