npm 包 get-closest 使用教程

什么是 get-closest

get-closest 是一个基于 JavaScript 的 npm 包，专门用来查找元素的最近父级。它可以查询最近的已命名父级，也可以根据元素类型查询。

安装 get-closest

你可以通过 npm 来安装 get-closest：

npm install get-closest --save

如果你正在使用 yarn，则可以运行以下命令：

yarn add get-closest

如何使用 get-closest

使用 get-closest 很简单。首先，需要引入它：

import closest from 'get-closest';

或在 HTML 页面中引入：

<script src="./node_modules/get-closest/umd/get-closest.js"></script>

接着，你可以通过以下方式来使用 get-closest：

// 通过类名查询最近的部分
closest(element, '.my-class');

// 通过标签名查询最近的父元素
closest(element, 'a');

// 通过函数查询最近父元素
closest(element, parent => parent.hasAttribute('data-parent'));

参数 element 表示要查询的 DOM 元素，而第二个参数则为查询选择器/函数。

示例

假设我们有以下 HTML：

<div class="container" data-parent>
  <div>
    <h2 class="title">Hello World</h2>
  </div>
</div>

我们想要获取标题元素（h2）最近的具有 data-parent 属性的父级。首先，我们需要获取标题元素，然后通过 closest 函数查询最近的父级：

const element = document.querySelector('.title');
const parent = closest(element, '[data-parent]');

这会返回 <div class="container" data-parent> 元素。

总结

get-closest 包提供了一种方便的方法来查找元素的最近父级。通过查询选择器或函数，可以快速准确地获取我们需要的父级元素。使用上看，十分方便。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3a97eedbf7be33b2567022