開始進入DOM的主題了，想介紹一些覺得好用的方法，在操作上可以更加方便。

一般來說如果想要找到某元素的父層，可能會使用Node.parentElement來對父層做事情，可是如果想要找到父層的父層不就要Node.parentElement.parentElement了嗎？這樣有點太麻煩了吧！

有個非常好用的elements.closest()可以運用！

來看一下MDN的介紹：

The closest() method of the Element interface traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector.

簡單來說就是他會找到元素所指定的父層元素。

直接來看範例：

<div class="container">
  <div class="broad">
    <div class="title">
      <h1>Sunny</h1>
      <h3>
        h<span class="a-tag">a</span>ve <span class="a-tag">a</span> nice
        d<span class="a-tag">a</span>y.
      </h3>
    </div>
  </div>
</div>

想要做滑鼠碰到a文字的時候可以改變.title的背景以及.broad的大小。

雖然.title就是上一層可以使用Node.parentElement來選到，但這是基於在html結構很少的關係，如果今天結構複雜，但就是想影響這一塊的最高父層的話還是建議使用elements.closest()，不需要知道有幾層，可以直接用class來選到。

const allA = document.querySelectorAll(".a-tag");
allA.forEach((a) => {
	a.addEventListener("mouseenter", function (e) {
	    a.closest(".title").classList.toggle("yellow");
        // 直接選到父父層
	    a.closest(".broad").classList.toggle("size");
         // 直接選到父父父層
	    a.closest("h3").classList.toggle("font-size");
         // 直接選到父層
	});
});

範例：https://codepen.io/Jadddxx/pen/zYjvzOj?editors=0110

簡單做一個hover效果，可以透過最裡面的.a-tag去選到任意他父層的element。

雖然是個非常簡單的例子，如果一次是好幾個相同的卡片，當我按到其中一個卡片的按鈕的時候就可以用elements.closest()來判斷是哪一個卡片要做出反應，這時候就非常好用。

好幾個一樣的卡片

假如現在有很多個一樣class名稱的卡片，同時裡面也有button，我們現在要來對按到button的卡片背景變色。

但每個卡片都一樣要怎麼知道要對哪一個卡片變色？

<div class="wrapper">
    <div class="card">
        <div class="card__title">Monday</div>
        <div class="card__body">
            <p>today is Monday</p>
            <button>check</button>
        </div>
    </div>
    <div class="card">
	<div class="card__title">Tuesday</div>
	<div class="card__body">
	    <p>today is Tuesday</p>
	    <button>check</button>
	 </div>
    </div>
    <div class="card">
	<div class="card__title">Wednesday</div>
	<div class="card__body">
	    <p>today is Wednesday</p>
	    <button>check</button>
	</div>
    </div>
    <div class="card">
	 <div class="card__title">Thursday</div>
	 <div class="card__body">
            <p>today is Thursday</p>
            <button>check</button>
	</div>
    </div>
</div>

所以一樣的，對所有button做事件監聽，只有被click之後就馬上找到被按下的按鈕父層的card是哪一個，超方便的！

const buttons = document.querySelectorAll("button");

buttons.forEach((button) => {
  button.addEventListener("click", function (e) {
    button.closest(".card").classList.toggle("pink");
  });
});

範例：https://codepen.io/Jadddxx/pen/WNJQXmM
可以去範例看一下成果喔！

利用elements.closest()可以準確查找到反應的父層元素是哪一個，雖然class名稱都一樣也沒關係囉！

但如果有兩個class名稱相同的父層的話，就像原型練一樣，會先找最近的那一個，應該很合理吧！

總結

• elements.closest()會選到element所指定的父層。

怎麼辦突然不知道要寫什麼，只好來介紹一些比較常用到的，可是總覺得好混喔！所以就做了兩個範例，但這兩個範例又其實沒幹嘛啊～還花比較多時間在CSS

讓我思考一下接下來要怎麼度過了～苦惱！

明天見拉see you~