JavaScriptのwindowオブジェクトとdocumentオブジェクトについて(DOM操作、イベントリスナーなど)

# windowオブジェクトとは
***JavaScriptが動作しているブラウザのwindow***を指します。
この中に***ブラウザ操作のための関数やオブジェクトがあります***。


windowオブジェクトのメソッド確認を確認するには
devtoolsを開いた後に
consoleにwindowを入力するとwindowのオブジェクトの確認ができます。
そうするとalertやconsoleなどたくさん出てきます。

```js
window.console.log('ポチ'); //devtoolsなどでポチと出力されます。
window.alert('失敗');//アラートで失敗と出力
```

# documentオブジェクトとは
***DOM操作ができるもの***です。
DOMが操作できるとHTMLを追加したり削除できたりします。


⚫︎```DOMとは```
略してDocument Object Modelでドキュメントを物として扱うモデルという意味です。
JavaScriptを通してhtmlやXMLのようなマークアップ言語を操作するための仕組みです。


# DOM操作
```DOMはJavaScroptからHTMLの操作ができるものです```。
devtoolsのconsoleにdocumentを入力するとHTMLが見れるようになります。

```js
document;
```
これだけでokです。

このHTMLを前提にやっていきます。

```index.html
<body>
    <div class="テスト">テスト</div>
    <div class="alert" id="alert">アラート</div>

    <script src="./javascript/main.js"></script>
  </body>
```

⚫︎***DOMの取得***
devtoolsのconsoleに以下のように入力します。

```js
const elements = document.getElementsByClassName('id');
console.log('elements')
```
で出力すると

```js
HTMLCollection [div.テスト]
```
でdevtoolsに出力され、

```js
const elements = document.getElementsByClassName('id');
console.log('elements')
```
```js
<div class="テスト">テスト</div>
```
がdevtoolsに出力されます。

```js
const elements = document.getElementById('alert');
console.log(elements);
```
に変えると

```js
<div class="alert" id="alert">アラート</div>
```
がdevtoolsに出力されます。

もう少し見ていきます。
```index.html
 <h1>終了時点コード</h1>
```

```main.js
const h1Element = document.querySelector("h1");
console.log(h1Element);

//accessKey: ""
//align: ""
//ariaAtomic: null
//h1の中身が見れる
```
こんな感じでも出力されているはずです。

![スクリーンショット 2023-04-01 15.33.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/6fb2b2bb-f87e-0325-f0cf-85aaaf0fd15c.png)

***h1タグの内容を変更する***場合は以下のようにします。

```main.js
const h1Element = document.querySelector("h1");
console.log(h1Element);
console.log(h1Element.textContent);
h1Element.textContent = "変更したタイトル";
```
![スクリーンショット 2023-04-01 15.39.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/89078955-6a82-b653-d1aa-00286884be41.png)


## console.dir
***console.dir()はオブジェクトをJSON型で表示します***。このやり方も試してみてください。


## DOMの書き換え
```innerText```を使うと書き換えができます。

```js
const elements = document.getElementsByClassName('id');
console.log('elements');
elements.innerText = 'アラートの試験中'; //アラートからアラートの試験中
```
devtoolsで出力すると

```js
<div class="alert" id="alert">アラートの試験中</div>
```
に変わります。


●DOM作成
DOMの作成ではappendChildを使います。

```js
const element = document.getElementById('alert');
console.log(element);
element.innerText = 'アラートの試験中';


//DOM作成
const dom_new = document.createElement('div');
dom_new.innerText = 'DOM作成';
element.appendChild(dom_new);
```

# Eventlistenerについて
まず```Event```についてですがこれは***クリックされた時や、キーが押された時、
ある領域にカーソルが入った時***に使います。
```イベントリスナー```とは***システムからイベントが発生したメッセージを受け取る為の機能***です。

```js
elm.addEventListener('event',
function(){
  //処理
}
)
```

```js
const element = document.getElementById('alert');
console.log(element);
const alertFunc = function () {
  alert('アラート');
};
element.addEventListener('click', alertFunc);
```
もう少し見ていきます。

```index.html
 <h1>終了時点コード</h1>
  <button>ボタン</button>
```
```main.js
const h1Element = document.querySelector("h1");
console.log(h1Element);
console.log(h1Element.textContent);
h1Element.textContent = "変更したタイトル";

const btnEl = document.querySelector("button");
const helloFn = (e) => {
  console.dir(e.target.textContent);
  console.log("hello");
};
btnEl.addEventListener("click", helloFn);
```
![スクリーンショット 2023-04-01 15.55.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/6e14dbef-4588-4ce1-7e04-6f8424c9de6f.png)

![スクリーンショット 2023-04-01 15.56.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/44d1f2d6-444c-a27d-c550-a31b4ca6c144.png)



### 参考資料
https://tektektech.com/what-is-window-object/
https://eng-entrance.com/what-is-dom
https://www.wakuwakubank.com/posts/306-javascript-dom/
https://developer.mozilla.org/ja/docs/Web/Events
https://www.udemy.com/course/react-complete-guide/