Java Script 勉強メモ③

ボタンをクリックしたら要素を追加する方法。
①追加したい要素を生成。メソッドはcreateElement('要素')
//要素の部分はli、h1とかの要素
②生成した要素の中身のテキストを設定
textContent = '設定したい文字'
③親要素を取得して、定義
取得方法は「document.querySelector('親要素')」
④定義した親要素に対して、「appendChild」で末尾に追加

以下、コード例
ボタンをクリックしたら、リストに要素を１つ追加する

```javascript
'use strict';

{
  // function update(){
  //   document.querySelector('#target').textContent = 'Changed'
  document.querySelector('button').addEventListener('click',() =>{

    //要素を追加する方法
    const item2 = document.createElement('li');
    //まずitem2をこのドキュメントで<li>として生成
    item2.textContent = 'item2'
    //item2の文字は'item2'とする
    const ulNode = document.querySelector('ul');
    //親Nodeを取得して,「ulNode」として定義
    ulNode.appendChild(item2);
    //appendChildメソッドで親要素の末尾に追加
  })
}
```

以下、要素の複製と挿入

```javascript

'use strict';

{
  //要素の複製
  document.querySelector('button').addEventListener('click',() =>{
    const item0 = document.querySelectorAll('li')[0];
    //<li>要素を全て取得して、０番目の要素
    const copy = item0.cloneNode(true);//item0と同じ要素を生成
    //中のテキストもコピーするならtrue

    const ul = document.querySelector('ul');//親要素の取得
    const item2 = document.querySelectorAll('li')[2];

    ul.insertBefore(copy,item2);//親要素のitem2の前にcopyを追加
  });
}


//いろんなイベントリスナーたち
'use strict';
{
  document.querySelector('form').addEventListener('submit', ()=>{
    console.log('submit');

  document.querySelector('form').addEventListener('submit', e=>{
    e.preventDefault();  //送信した時のリロード禁止
    console.log('submit');
    //formタグの中にある場合はEnterキーでも送信できる！！
  })
  const text = document.querySelector('textarea')
  text.addEventListener('focus', ()=>{
    console.log('focus!!')
  入力エリアをクリックしたら発動
  })
  text.addEventListener('blur', ()=>{
    console.log('blur!!')
  //入力エリアから外れたところをクリックしてしたら発動
  })
  const text = document.querySelector('textarea')
  text.addEventListener('input', ()=>{
    // console.log('input!!')//文字が入力されたら発動イベント
    console.log(text.value.length)
    //入力されている文字数を表示
  })
  text.addEventListener('change', ()=>{
    console.log('change!!')
  //   //入力範囲から外れたときに発動するイベント
  })
  document.addEventListener('keydown', e=>{
    
    if(e.key === 'Shift'){
      console.log(e.key);
    }
    押したキーを表示
    上はShiftを押した時だけShiftを表示
  })

  document.querySelector('button').addEventListener('dblclick', ()=>{
  // //ダブルクリックリスナー
    console.log('hello');
  })
  document.addEventListener('mousemove' ,e =>{
  //マウス動かしたらリスナー
    console.log(e.clientX,e.clientY);
  //   //マウスの位置の座標を取得
  document.addEventListener('mousemove' ,e =>{
  //   //マウス動かしたらリスナー
    console.log('moved');
})
document.querySelector('button').addEventListener('click', ()=>{

  const colors = document.querySelectorAll('input');
  const selectedColors = [];
  //checkboxは複数選択が可能だから入力データは配列で扱う

  colors.forEach(color=>{
    if(color.checked === true){
      selectedColors.push(color.value)
      //配列に追加はpushメソッド
    }
  })
  const li = document.createElement('li');

  const ul = document.querySelector('ul');

  li.textContent = selectedColors.join(',');
  //li.textContent = selectedColors;
  //上と下は同様の結果になる
  ul.appendChild(li)


})
//ラジオボタンで要素を追加
  document.querySelector('button').addEventListener('click', () =>{
    const colors = document.querySelectorAll('input');
    let selectedColor;
    colors.forEach( color =>{
      if(color.checked === true){
        selectedColor = color.value;
        //要素の値を取得したい時はvalueでアクセス
      } 
    })
    const li = document.createElement('li');
    const ul = document.querySelector('ul');
    li.textContent = selectedColor;
    //要素のテキストに代入したい時はtextContentでアクセス
    ul.appendChild(li);


  })
  //クリックしたら、セレクタで選んだ要素がリストに追加
    document.querySelector('button').addEventListener('click', ()=>{
    const li = document.createElement('li');
    //li要素を生成
    const color = document.querySelector('select');
    //セレクトの要素を取得
    li.textContent = `${color.value} - ${color.selectedIndex}`;
    //値を得たい時はそのままvalue,何番目かはselectedIndexでOK
    const ul = document.querySelector('ul');
    ul.appendChild(li);
    //この２行で親要素を取得→末尾に挿入
  });
  //テキストを入力し、ボタンを押したら下のリストに入力した文字が追加される
  document.querySelector('button').addEventListener('click', () =>{
    //button要素にclickしたときのイベントリスナーを実装。
    const li = document.createElement('li');
    //li要素を生成
    const text = document.querySelector('input');
    //input要素を取得
    li.textContent = text.value;
    //生成したli要素のテキストにinputから取得した文字列を代入
    //値の取得はvalue
    const ul = document.querySelector('ul');
    //挿入したい場所の親要素を取得
    ul.appendChild(li);
    //親要素に対して、appendChildメソッドで要素を追加
    text.value = "";
    text.focus();
  })
  //要素の削除
  document.querySelector('button').addEventListener('click',() =>{

    const item1 = document.querySelectorAll('li')[1];
    // item1.remove();
    //新しいブラウザだと要素に対してremove()で削除可能。

    const ul = document.querySelector('ul');
    ul.removeChild(item1);
    //上の方法が無理な場合は親Node.removeChild(削除するNode)で削除可能。
  });
}

'use strict'
{
  const ul = document.querySelector('ul');
  ul.addEventListener('click', e=>{
    //ul内にあるリストにクリックリスナーを追加したい時は親要素に追加してもOK
    if(e.target.nodeName === 'LI'){
      //リスナーを追加した要素の子要素が「li」だったら
      e.target.classList.toggle('done');
      //styleの'done'をつけたり外したり（toggle）
    }
  })
}
```