JS closest方法|极客笔记

JS closest方法

在JavaScript中，有一个非常常用且方便的方法叫做closest方法。这个方法用于查找一个元素的最近的祖先元素（包括自身）满足所提供的选择器。

语法

element.closest(selectors)

element 是要查找的元素。
selectors 是一个字符串，表示要匹配的选择器。

示例

假设我们有以下的HTML结构：

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <span class="target">这是目标元素</span>
        </div>
    </div>
</div>

现在，我们想要找到 span 元素的最近的 grandparent 元素。我们可以使用closest方法来实现：

const targetElement = document.querySelector('.target');
const closestGrandparent = targetElement.closest('.grandparent');

console.log(closestGrandparent); // 输出<div class="grandparent"></div>

在这个示例中，closestGrandparent 变量将包含 .target 元素的最近的祖先元素，即 .grandparent 元素。

使用场景

示例1：在事件处理程序中使用closest方法

<div id="wrapper">
    <button>点击</button>
</div>

document.getElementById('wrapper').addEventListener('click', function(event) {
    const closestButton = event.target.closest('button');

    if (closestButton) {
        console.log('点击了按钮');
    }
});

在这个示例中，我们给 #wrapper 元素绑定了一个click事件处理程序。当点击按钮时，通过closest方法找到了最近的 button 元素，并输出了信息。

示例2：与事件委托结合使用

<ul id="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

document.getElementById('list').addEventListener('click', function(event) {
    const closestLi = event.target.closest('li');

    if (closestLi) {
        closestLi.classList.toggle('active');
    }
});

在这个示例中，我们给 #list 元素绑定了一个click事件处理程序，并通过closest方法找到最近的 li 元素。当点击任意列表项时，切换其active类。