前回は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');
##終わりに
今回は初歩的なもののみご紹介させていただきました。
参考にしていただけたら幸いです。