0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

前回は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);
})

スクリーンショット 2021-11-20 16.11.41.png
ブラウザには追加ボタンがあるのみです。

🏃‍♀️一つずつ見て行きましょう🏃‍♀️
##・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);

これらの処理によって追加ボタンをクリックすると
スクリーンショット 2021-11-20 16.11.54.png
このようにリストが追加されます

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

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

<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;
  }
})

ブラウザはこんな感じ
スクリーンショット 2021-11-20 16.11.54.png
🏃‍♀️一つずつ見て行きましょう🏃‍♀️
##・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');

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?