DOM操作

DOM操作基礎編

DOM操作とは

DOM操作とはhtml要素(ノード)を取得して、jsで操作してビューに動きをつけたりすることです。

ノードの取得方法

1.　querySelector
　でcssで指定する時に使うセレクタで指定（同じセレクタが複数ある場合は一番最初に見つかったもののみ）
　querySelectorAllで同じセレクタ名のノード全てを取得
2.　getElementById
　でid名で取得
3.　getElementsByClassName
　で指定したクラス名の要素を全て取得

〇〇.addEventListener('アクション', 関数)

〇〇に対してアクションが起きたら、関数が実行される。

*例1
btn = document.getElementById('btn');
btn.addEventListener('click', 関数);
#btnがクリックされたら関数の処理がされる。

*例2 
btn = document.getElementById('btn');
btn.addEventListener('click', () => {
 console.log('hello world');
});

#{}の中の処理を行う

Classを変更する

classList.add('クラス名') またはremoveでクラスをつけたり外したりできる。

*add
btn = document.getElementById('btn');

btn = document.getElementById('btn');
btn.addEventListener('click', () => {
 btn.classList.add('red');
});　　　　　　 ※.remove('red')でredクラスを外す。
#redクラスがidがbtnの要素に加わる