当我们需要针对网页中某个元素做出某些操作时，我们需要找到这个元素。但是在某些情况下，这个元素可能会是另一个元素的子元素或祖先元素。这时我们便需要找到离当前元素最近的父元素或祖先元素，这就是 dom-nearest-target 这个 npm 包所提供的功能。
安装
--- ------- ------------------ ------
使用方法
1. 导入
在需要使用 dom-nearest-target 的文件中导入：
------ ------- ---- ---------------------
2. API
nearest(current: HTMLElement, matcherFunc: Function, options: Object = {}): HTMLElement
该方法接收三个参数：
current: HTMLElement当前元素节点matcherFunc: Function匹配函数options: Object（可选）参数
返回值为离当前元素最近的父元素或祖先元素。
参数解释
current: HTMLElement
类型: HTMLElement
当前元素节点。
matcherFunc: Function
类型: Function
匹配函数。函数有两个参数：
node: HTMLElement待匹配的节点options: Object（可选）参数
函数返回一个布尔值，代表当前节点与目标是否匹配。
options: Object
类型: Object
设置参数。目前支持以下属性：
root: HTMLElement限制查找的根节点
3. 代码示例
以下为一个示例代码，当我们点击某个元素时，弹窗展示该元素离其最近的含有 .container 类名的元素：
--------- -----
------
------
----- ----------------
---------------------------------
-------
------
---- ------------------
-----
---
----------- ---------
----
------
------
---- ------------------
-----
----------------
------
------
---- ------------------
-----
---------- -------------
------
------
------- --------------
------ ------- ---- ---------------------
----- ----- - ----------------------------------
------------------- -- -
----------------------------- ------- -- -
----- ---------------- - --------------------- ------ -- --------------------------------------
---------- ------- --------- -- --------------------------------
---
---
---------
-------
-------总结
使用 dom-nearest-target 这个 npm 包，我们可以方便地找到离我们正在操作的当前元素最近的祖先元素。在实际的前端开发中，我们经常需要根据需求来访问某个元素的祖先元素，并对其进行相关的操作，使用该包可以大大简化我们的代码，提高我们的开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562dd81e8991b448e04fe