JS~要素の書き換え~

概要

DOM取得した後の、要素の中身操作についての記事です。
JSでは、イベント発生（ユーザーがクリックしたとき）などに処理が始まります。
今回はクリックイベントから要素の書き換えを行う操作についの記事です。

実装内容は以下のようになります。
1,クリックイベント
2,要素の書き換え
３,classの追加

イベント

Webページでは、ユーザーが操作したときにイベントが発生します。また、イベント発生時の処理をJSで登録することができます。
またそれらのユーザーからのイベントを関数で登録します。

main.js

window.addEventListener(イベント名,コールバック関数)

要素の取得

HTML

クリックイベントはボタンにしました。
クリックイベント発生後に、ul要素の中身に色がつくように実装します。

index.html

<button>ボタン</button>
<ul id="task">
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

JS

最初に、クリックイベントに登録するbuttonというタグ名を取得します。
定数button（わかりやすいように）にquerySelectorでタグ名を代入。
console.logで取得しているか確認しました。

次に、取得したbuttonをクリックイベントに登録します。
クリックイベント時に、li要素を書き換えたいのでli要素を取得します。

ボタンをクリックして、li要素が取得されているか確認してみてください。

main.js

const button = document.querySelector('button');
console.log(button);

button.addEventListener('click',() =>{
  const li = document.querySelectorAll('li');
  console.log(li);
});

書き換え

ボタンを押したときにli要素が書き換わるように実装しました.
forEachで繰り返し、innerHTMLで書き換えました。

index.js

button.addEventListener('click',() =>{
  const li = document.querySelectorAll('li');
  console.log(li);
  // li[2].innerHTML = 'abcd';
  li.forEach(list =>{
    list.textContent = 'OK!!';
  });
});

書き換えプロパティにはいくつか種類があるにで、使用目的で使い分ける必要があります。

class属性の操作

1,classList.add();

次に、class属性の操作していきます。
クリックしたときに、文字色が赤になるように実装していきます。

main.js

const button = document.querySelector('button');
console.log(button);
button.addEventListener('click',() =>{
 const li = document.querySelectorAll('li');
 console.log(li);
 // li[2].classList.add('list');
 li.forEach(list =>{
   list.textContent = 'OK!!';
   list.classList.add('list');//class属性
  });
});

クリックしたときにJS側からクラス属性を付けます。なお、CSS側でスタイルを設定します。

style.css

.list {
  color: red;
 }

2,classList.toggle

クラス属性の付け外しを行います。

index.html

<li class="lis">リスト</li>
<li class="lis">リスト</li>
<li class="lis">リスト</li>

style.css

.lis {
  color: yellow;
}

main.js

list.classList.toggle('list');

先程のclassList.addを書き換えると、listクラスのつけ外しをすることができます。