【DOM操作(後編)】JavaScriptのaddEventListenerについて、「・・したら」をまとめてみた

前回はDOM操作の大まかな流れを解説しました。
具体的には「AをしたらBの処理をする」の「A（きっかけとなるアクション）」について解説していきました。
(例)「クリックしたら」「ホバーしたら」など

今回はそのAの後の
「Bの処理」にてよく使用されるメソッドについて解説していきます。

①ボタンをクリックするとリストが生成

まずは次のように記述

 <button>追加</button>
 <ul>
 </ul>

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

document.querySelector('button').addEventListener('click' ,() => {
  // ここから下で解説していきます。
  const list = document.createElement('li')
  list.textContent = "勉強する";
  todoList.appendChild(list);
})

ブラウザには追加ボタンがあるのみです。

🏃‍♀️一つずつ見て行きましょう🏃‍♀️

・createElement( )

HTML要素を生成できます

// <li></li>を作成。listとして使用できます。
const list = document.createElement('li');

// もちろん li 以外でも使用可能

・textContent( )

要素内のテキストを取得、編集できます。

// 先ほど作成したlistのテキストを編集
list.textContent = "勉強する";

// 確認してみよう
console.log(list)   //  <li>勉強する</li>

・appendChaild( )

指定した親要素の子要素の"最後"に追加される

// ulの要素取得
const todoList = document.querySelector('ul');

// 先ほどの"<li>勉強する</li>"をtodoListに追加
todoList.appendChild(list);

これらの処理によって追加ボタンをクリックすると

このようにリストが追加されます

②ボタンをクリックするとリストが削除

先ほどとは別で次のようにボタンとリストを用意!

<button>削除</button>
  <ul>
    <li>買い物に行く</li>
 </ul>

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

document.querySelector('button').addEventListener('click' ,() => {
  // ここから下を解説
  const message = confirm("削除してもいいですか？")
  if(message){
    list.remove();
  } else {
    return;
  }
})

ブラウザはこんな感じ

🏃‍♀️一つずつ見て行きましょう🏃‍♀️

・confirm( )

画面上にダイアログ表示("キャンセル"と"OK"で確認)

const message = confirm("削除してもいいですか？")
  if(message){
  // ここにOKの時の処理
  } else {
  // ここにキャンセルの時の処理
  }

・remove( )

対象のノードを削除できます。

// listを削除
list.remove()

これで"削除ボタン"をクリックすると"削除してもいいですか？"と確認
→OKならリスト削除 / キャンセルならそのままといった処理になります。

③その他のよく使うメソッド

・add( )

// (要素).classListに対して使用
list.classList.add('is-valid');

//listに対して'is-valid'クラスを付与

クラス削除の際は先ほど紹介したremove( )が使えます。

・toggle( )

クラスを付与したり削除したりできます。

// listに'red'クラスがついてたら削除。ついてないなら付与
list.classList.toggle('red');

終わりに

今回は初歩的なもののみご紹介させていただきました。
参考にしていただけたら幸いです。