在取得 Dom 時我們常常會用到 `document.querySelector()` 用來取得向下的子元件。有時候我們也會可能需要向上取得母系元件，這時候我們就需要用到 `closest()` 了。

### 用法

在使用 `closest()` 時我們需要由一個 Dom 出發，例如有以下這個 html :

```html

<div id='div1'>

	<div id='div2'>

		<div id='div3'></div>

		<div id='div4'></div>		
	</div>

	<div id='div5'></div>
</div>
```

我們先用 `querySelector()` 取得 `#div3` 這個 Element 先 :

```js
const div3 = document.querySelector('#div3');
```

如果需要由 `#div3` 出發，使用 `closest()` 取得 `#div1` 的話，可以這樣 : 

```js
const div3 = document.querySelector('#div3');

const div1 = div3.closest('#div1');
```

那麼問大家一個問題，如果使用以下的語法會取得那一個 `div` 呢?

```js
// 問題 1
div3.closest('div');

// 問題 2
div3.closest('div div');
```

答案時間，問題 1 的答案是 `#div3` 自已本身，而問題 2 的答案也是 `#div3` 自已本身 !

因為 `closest()` 在搜索時也會包含自己在內，這點一定要注意。

### 使用 `closest()` 但是排除自己

如果我們只想要向上取得 Element 就先需要排除自身 Element 在外，可以通過以下方法達成 : 

```js
// 取得 div3 
const div3 = document.querySelector('#div3');

// 通過使用 parentNode 來向上取得 parent，再在 parent 上使用 closest() 就可以了
const div2 = div3.parentNode.closest('div');
```