javascript dom操作　備忘録

# DOMとは
Document Object Modelの略。
htmlを読み込んだ後にDOMと呼ばれるTree構造のデータが作られ、その内容に応じてWebページが描画される。

DOMをjavascriptで操作することで、さまざまな機能を実装することができる。
htmlの見た目の操作はCSS、動きの操作はjavascriptというように使い分けをする。
# ドキュメント要素を取得する方法
### ①属性や要素から取得
|項目            |説明                      |
|:--------------|:-------------------------|
|getElementById  |id属性から要素を取得|
|querySlector    |1つの要素を取得|
|querySlectorAll |複数の要素を取得|

使用例
```html
<!-- html -->
<body>
  <h1 id="target">あいさつ</h1>
  <p>こんにちは</p>
  <p>こんにちは</p>
  <p>こんにちは</p>
  <script src="js/main.js"></script>  
</body>
```
```js
//javascript
//id属性で取得
const target = document.getElementById("target");
//複数の要素を取得
const target = document.querySelectorAll("p")[1];   //p要素の２番目の要素を取得
```    
### ②階層関係から要素を取得
|項目            |説明                      |
|:--------------|:-------------------------|
|childNodes     |子ノード全てを取得|
|children       |子ノードのテキストノード以外を取得
|firstChild     |最初の子ノードを取得|
|lastChild      |最後の子ノードを取得|
|firstElementChild|最初の要素ノードだけ取得|
|lastElementChild|最後の要素ノードだけ取得|
|parentNode|親ノードを取得|
|previousSibiling|１つ前の兄弟ノードを取得|
|nextSibiling|1つ後の兄弟ノードを取得|

使用例
```html
<!-- html -->
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
```
```js
//javascript
//ulの子ノード全て取得
ul.childNodes  
```

# 要素を操作する方法
|項目              |説明                      |
|:----------------|:-------------------------|
|createElement    |要素を作成する|
|appendChild |要素を追加する|
|cloneNode(true) |要素をコピーする|
|insertBefore(a, b) |aをbの前に挿入する|
|親Node.removeChild(削除するNode)|要素を削除する|

使用例
```html
<!-- html -->
<body>
  <ul>
    <li>item 0</li>
    <li>item 1</li>
  </ul>
  <script src="js/main.js"></script>
</body>
```
```js
//javascript
  document.querySelector("button").addEventListener("click",()=>{
    //要素を追加する
    const item2 = document.createElement("li");  //要素を作成
    item2.textContent = "item2";                 //要素の中身を記述
    const ul = document.querySelector("ul");     //ul要素を取得
    ul.appendChild(item2);                       //ul要素の後にitem2の要素を追加

    //要素をコピーして挿入する
    const item0 = document.querySelectorAll("li")[0];   //li要素の1番目を取得
    const copy = item0.cloneNode(true);                 //item0をコピーする
    const ul = document.querySelector("ul");            //ul要素を全て取得する
    const item2 = document.querySelectorAll("li")[1];   //li要素の2番目を取得
    ul.insertBefore(copy, item2);                       //copyをitem2の前に挿入する
    
    //要素を削除する
    const item1 = document.querySelectorAll("li")[1];
    document.querySelector("ul").removeChild(item1);    //item要素を削除する                               
  });
```

# イベントで操作する方法
|項目            |説明                      |
|:--------------|:-------------------------|
|addEventListener|イベントを取得して操作|

使用例
```html
<!-- html -->
<body>
  <button>Run</button>
  <h1 id="target" class = "my-border">あいさつ</h1>
  <p>こんにちは</p>
  <script src="js/main.js"></script>
</body>
```
```js
//javascript
  //buttonがクリックされたら、target要素のtext内容を変更
  document.querySelector("button").addEventListener("click",()=>{
    document.getElementById("target").textContent = "Changed!";
  });
```
# イベントの種類
|項目              |説明                      |
|:----------------|:-------------------------|
|click    |clickした時にイベント発生|
|dblclick |double clickした時にイベント発生|
|mousemove|マウスを動かした時にイベント発生|
|keydown|キーを打った時にイベント発生|
|forcus|formなどにフォーカスを当てた時にイベント発生|
|blur|formなどからフォーカスを外した時にイベント発生|
|input|formなどに文字が入力された時にイベント発生|
|chnage|formなどで更新が確定された時にイベント発生|
|submit|buttonを押した時にイベント発生|


使用例
```js
//javascript

//buttonをダブルクリックした時にconcoleに"Double Clicked!"と表示  
document.querySelector('button').addEventListener('dblclick', () => {
    console.log('Double Clicked!');
});

//左上を基準にマウスのx,y位置をconsoleに表示   
document.addEventListener('mousemove', e => {
    console.log(e.clientX,e.clientY);
});

//打ったキー名をconsoleに表示
document.addEventListener("keydown",e => {
    console.log(e.key);
});
```


# クラスで操作する方法
|項目              |説明                      |
|:----------------|:-------------------------|
|classList.add    |クラスを追加で設定する|
|classList.remove |クラスの設定を削除する|
|classList.contain|クラスを含まれているか判定する|
|classList.toggle |クラス設定のon/offを切り替える|

使用例
```html
<!-- html -->
<head>
<!-- 省略 -->
    <style>
        li{
            cursor: pointer;
        }
        li.done{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <ul>
        <li>Todo</li>
        <li>Todo</li>
        <li>Todo</li>
    </ul>
<body>

```
```js
//javascript
//li要素をクリックをすることで、取り消し線が入ったり外れたりする
document.querySelector("li").addEventListener("click",e=>{
    if(e.target.nodeName ==="LI"){
        e.target.classList.toggle("done");
    }
});
```