JavaScriptでViewの中の表示を変えてみるなかで重要だと感じたメゾット（mouseover,mouseout編）

イベント

JavaScriptではみているViewの中の「何かが起きる」とそれに応じて動くというふうになっています。
この「何かが起きる」ということをイベントと言います！イベントが起きてjsの中で書いたコードが読み込まれて、色が変わったり、プルダウンが表示できたりします。

イベントが発火する超代表的な例

addEventListener

こちらを使うと、jsのファイルでイベントが発生した時どうするのかを定義することができます。ちなみに本当に簡単なイベントならhtmlに直接イベント属性を書いてあげることもできます。ただしデメリットとしては、
htmlに直接書いてあげると、同じ要素に一つしか要素を入れることができないです。
(クリックしたらプルダウンを表示して、mouseoverしたら色を変えるとかみたいに2つの動作は❌)

addEventListenerメソッドはこのように書きます。

要素.addEventListener('イベント名', 関数)//イベントが発火したら実行する関数を定義するためのメソッドになってます。//

ここからviewの表示を変える段階を簡単に記しながら覚えるべき語句を記していきたいと思います。
まずhtmlの欲しい要素にidを付与します。
そしてjs側で

const pullDownUp = document.getElementById("lists")

今回はlistsをhtmlから取得してきてpullDownUpに代入しています！
これだけだとコンソールには何も表示されないので

window.addEventListener('load', function(){
  const pullDownUp = document.getElementById("lists")
}

この記述で、ページ全体が読み込まれた後にJavaScriptの処理が実行されるようにできます。
その後はイベント発火の為のmouseoverやmouseoutをaddEventListenerの中に記述することで、イベントを設定することができます。
その時都度都度でconsole.logで確認しておくといいかと思います！

インラインスタイル

HTML要素の開始タグの中に直接CSSのソースコードを記述することでプロパティを指定できます！
追加と削除はそれぞれsetAttributeとremoveAttributeというメソッドで設定することができます。

setAttribute

setAttributeは追加や値を変更します。

要素.setAttribute(name, value)

書き方はこんな感じです。例でいうとmouseoverした時にリストの色を変更させることができるみたいな感じです。

removeAttribute

書き方としてはsetAttributeとたいして変わりません。
こちらは反対に値を削除します。上記と合わせた例で言うとmouseoutした時にリストの色を削除（元の色に戻す）ことができるみたいな感じです。

まとめ

ほかにもクリックした時など山ほど書きたいことはあるのですが、またそのこともかいてしまうととても長くなるので別の時にでもアウトプットさせていただきます。