今回作成したドロップダウンメニューはこんな感じ。

See the Pen Untitled by adayuki (@adayuki) on CodePen.

学んだこと①querySelectorとquerySelectorAll

今まで、要素の取得といえば、IDを利用したgetElementByIdしか頭になかったが、今回初めてquerySelector、querySelectorAllを使用してみた。

まずquerySelectorについて。

Document の querySelector() メソッドは、指定されたセレクターまたはセレクター群に一致する、文書内の最初の Element を返します。一致するものが見つからない場合は null を返します。

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

querySelectorは上記の通り指定したセレクター（classでもidでも可）の最初の一つ目を返してくれるもののようだ。getElementByIdとの大きな違いはclass指定ができること。

続いてquerySelectorAllはquerySelectorが一つの要素しか取得しないのに対し、そのセレクターが割り当てられたすべての要素を取得してくれる。そしてその際、 NodeList という配列のような形になっている。しかしこれは配列風であり配列ではないので、配列にするためにはArray.prototype.slice.call(querySelectorAllで取得したオブジェクト)を実行する。

学んだこと②Array.prototype.forEach()

forEach()メソッドはprogateでも学んでいたが実際に使用してみたのは初めてだった。

forEach() メソッドは与えられた関数を、配列の各要素に対して一度ずつ実行します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

 menus.forEach(element => {
            element.addEventListener("mouseover", () => {
                element.querySelector(".under-menu").classList.add("active");
            });
            //この場合mouseleaveでもmouseoutでも良そう
            element.addEventListener("mouseleave", () => {
                element.querySelector(".under-menu").classList.remove("active");
            });
        });

今回は上記のように使用している。この形しっかり覚えておきたい。