在 JavaScript 中正确使用 closest() 函数获取 DOM 元素

最近我在使用垂直导航组件的时候遇到了一个问题：点击菜单项的时候，对应的 JavaScript 代码并没有触发。我对这个问题进行了比较深入的了解之后，分享下解决这个问题的过程以及在这过程中发现的技巧。

这个问题的场景是这样的，所有的菜单项都有两个子元素：一个图标，以及一个作为标签的 <span> 元素。当点击菜单项时，我想触发一个 JavaScript 函数来处理这个点击事件。然而，当我使用 addEventListener() 方法来监听点击事件时，却发现这个函数并没有被触发。

经过一番排查之后，我发现问题出在使用 closest() 函数来获取 DOM 元素的方式上。在 JavaScript 中，closest() 函数可以用来获取元素最近的祖先元素。在我使用的代码中，我使用 closest() 函数来获取菜单项的 <li> 元素。但是，由于菜单项的父元素不是 <li> 元素，而是 <ul> 元素，所以 closest() 函数并没有返回正确的元素。

为了解决这个问题，我需要修改 closest() 函数的用法。我需要使用它来获取菜单项的 <ul> 元素。这样，当我点击菜单项时，closest() 函数就会返回正确的元素，并且 JavaScript 函数就会被触发。

// 错误的用法
const liElement = event.target.closest('li');

// 正确的用法
const ulElement = event.target.closest('ul');

在修改了 closest() 函数的用法之后，点击菜单项时，JavaScript 函数就可以被正确触发了。

除了解决这个问题之外，我还发现了一些使用 closest() 函数的技巧。这些技巧可以帮助我更好地使用 closest() 函数来获取 DOM 元素。

• 使用 closest() 函数来查找具有特定类名的元素 。例如，以下代码将查找具有 active 类名的最近祖先元素：

const activeElement = event.target.closest('.active');

• 使用 closest() 函数来查找具有特定属性值的元素 。例如，以下代码将查找具有 id 属性值为 "my-element" 的最近祖先元素：

const elementWithId = event.target.closest('[id="my-element"]');

• 使用 closest() 函数来查找具有特定标签名的元素 。例如，以下代码将查找具有 li 标签名的最近祖先元素：

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

希望这些技巧能够帮助您更好地使用 closest() 函数来获取 DOM 元素。