在 JavaScript 的 DOM 操作中，closest方法是一個(gè)非常實(shí)用的工具，它能幫助開(kāi)發(fā)者高效地查找元素。本文將深入介紹closest方法，涵蓋其定義、語(yǔ)法、使用方式以及實(shí)際應(yīng)用場(chǎng)景。

一、closest 方法是什么？

closest方法屬于Element接口，作用是從當(dāng)前元素開(kāi)始，向上遍歷其自身及所有祖先元素，直到找到第一個(gè)匹配指定 CSS 選擇器的元素。如果遍歷完所有元素都沒(méi)有找到匹配的，該方法將返回null。簡(jiǎn)單來(lái)說(shuō)，closest方法就像是一個(gè) “查找器”，能快速定位到符合條件的最近祖先元素。

二、語(yǔ)法結(jié)構(gòu)

closest方法的語(yǔ)法非常簡(jiǎn)潔：

element.closest(selector);

• element：調(diào)用該方法的 DOM 元素。
• selector：一個(gè)字符串，表示用于匹配元素的 CSS 選擇器。它可以是標(biāo)簽選擇器（如div）、類選擇器（如.classname）、ID 選擇器（如#idname） ，也可以是更復(fù)雜的組合選擇器（如article > div）。

三、使用示例

基本用法

假設(shè)有如下 HTML 結(jié)構(gòu)：

<div class="parent">

 

    <div class="child" id="myElement">

 

        <button id="btn">點(diǎn)擊我</button>

 

    </div>

 

</div>

通過(guò) JavaScript 代碼來(lái)使用closest方法：

const btn = document.getElementById('btn');

 

// 查找最近的class為child的祖先元素

 

const closestDiv = btn.closest('.child');

 

console.log(closestDiv);

在這個(gè)例子中，按鈕元素通過(guò)closest('.child')找到了最近的class為child的父級(jí)元素，并將其打印出來(lái)。

查找自身元素

當(dāng)選擇器匹配當(dāng)前元素本身時(shí)，closest方法會(huì)返回當(dāng)前元素。例如：

<div class="parent">

 

    <div class="child" id="myElement">Hello World</div>

 

</div>

const myElement = document.getElementById('myElement');

 

// 查找自身元素（元素本身匹配selector）

 

const closestSelf = myElement.closest('.child');

 

console.log(closestSelf);

這里myElement.closest('.child')返回的就是myElement本身，因?yàn)樗?span style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; font-synthesis-style: auto; overflow-wrap: break-word; background-color: rgb(0, 255, 255);">.child選擇器。

沒(méi)有匹配元素的情況

若指定的選擇器在元素的祖先中不存在，closest方法會(huì)返回null。示例如下：

<div class="parent">

 

    <div class="child">

 

        <button id="btn">點(diǎn)擊我</button>

 

    </div>

 

</div>

const btn = document.getElementById('btn');

 

// 查找最近的祖先元素（匹配.nonexistent）

 

const closestNonexistent = btn.closest('.nonexistent');

 

console.log(closestNonexistent);

由于按鈕元素及其祖先都沒(méi)有.nonexistent類，所以closest()返回null。

四、應(yīng)用場(chǎng)景

事件委托

事件委托是一種常見(jiàn)的 DOM 事件處理技術(shù)，它將事件監(jiān)聽(tīng)器添加到父元素上，而不是每個(gè)子元素。這樣可以減少內(nèi)存占用，提高性能。closest方法在事件委托中發(fā)揮著重要作用。

例如，有一個(gè)包含多個(gè)li元素的列表：

<ul>

 

    <li>項(xiàng)目1</li>

 

    <li>項(xiàng)目2</li>

 

    <li>項(xiàng)目3</li>

 

</ul>

通過(guò)closest方法實(shí)現(xiàn)點(diǎn)擊li元素執(zhí)行操作：

document.querySelector('ul').addEventListener('click', function (event) {

 

    const listItem = event.target.closest('li');

 

    if (listItem) {

 

        console.log('你點(diǎn)擊了: ' + listItem.textContent);

 

    }

 

});

在這個(gè)示例中，無(wú)論點(diǎn)擊li元素內(nèi)的任何內(nèi)容，closest('li')都能找到對(duì)應(yīng)的li元素，并打印出其文本內(nèi)容。

動(dòng)態(tài)內(nèi)容處理

在處理動(dòng)態(tài)生成的內(nèi)容時(shí)，傳統(tǒng)的事件綁定方式可能會(huì)失效，因?yàn)樾绿砑拥脑貨](méi)有綁定事件。而使用closest方法結(jié)合事件委托，可以確保新元素也能正確響應(yīng)事件。

假設(shè)動(dòng)態(tài)添加一個(gè)按鈕，點(diǎn)擊按鈕時(shí)找到其父容器：

<div class="container">

 

    <div class="content">

 

        <button class="action">點(diǎn)擊我</button>

 

    </div>

 

</div>

const container = document.querySelector('.container');

 

container.addEventListener('click', function (event) {

 

    const button = event.target.closest('.action');

 

    if (button) {

 

        const parent = button.closest('.content');

 

        console.log('按鈕的父容器是: ' + parent);

 

    }

 

});

 

// 動(dòng)態(tài)添加按鈕

 

const newButton = document.createElement('button');

 

newButton.classList.add('action');

 

newButton.textContent = '新按鈕';

 

document.querySelector('.content').appendChild(newButton);

即使是新添加的按鈕，點(diǎn)擊時(shí)也能通過(guò)closest方法找到其對(duì)應(yīng)的父容器。

五、總結(jié)

closest方法為 JavaScript 開(kāi)發(fā)者在 DOM 操作中提供了極大的便利，無(wú)論是處理事件委托還是動(dòng)態(tài)內(nèi)容，都能輕松應(yīng)對(duì)。