调用.closest()进行二次DOM遍历失败的原因咨询

核心原因：closest() 会优先匹配自身 #

Element.closest() 方法的逻辑是：从当前元素开始，向上遍历DOM树，返回第一个匹配选择器的元素（包括自身）。

你的代码执行流程：

1. 第一次调用 element.closest('div')，element 是按钮，向上找到的第一个div是<div id="child">，所以firstParentDiv指向这个元素。
2. 第二次调用 firstParentDiv.closest('div') 时，方法会先检查firstParentDiv自身——它本身就是div，直接返回自己，不会再向上遍历父元素，所以输出还是child。

正确写法 #

如果要获取当前元素的上层父级div，有两种常用方式：

方式1：先获取父元素再调用closest()

function testClosest(element) {
    let firstParentDiv = element.closest('div');
    console.log('First Parent Div ID:', firstParentDiv.id);

    // 先取父元素，再找匹配的div
    let secondParentDiv = firstParentDiv.parentElement.closest('div');
    console.log('Second Parent Div ID:', secondParentDiv ? secondParentDiv.id : 'None');
}

方式2：用:scope伪类限定查找范围（现代浏览器支持）

通过:scope伪类，限定从当前元素的父级开始查找匹配元素：

function testClosest(element) {
    let firstParentDiv = element.closest('div');
    console.log('First Parent Div ID:', firstParentDiv.id);

    // 从当前元素的父级开始找第一个div
    let secondParentDiv = firstParentDiv.closest(':scope > div');
    console.log('Second Parent Div ID:', secondParentDiv ? secondParentDiv.id : 'None');
}

修改后运行代码，第二次日志会输出parent，继续调用则会依次返回grandparent。

内容的提问来源于stack exchange，提问作者user44109