什么是 discore-closest
discore-closest 是一个 npm 库，它提供了寻找父级或兄弟元素的方法，且可以指定一个判定函数来自定义元素的匹配条件。
安装方式
使用 npm 或 yarn 安装 discore-closest：
npm install discore-closest # or yarn add discore-closest
如何使用 discore-closest
使用 discore-closest 最常见的场景是在处理 DOM 事件时，在事件的 target 元素的父级或兄弟元素中查找指定的节点。下面是一个使用 discore-closest 的示例。
-- -------------------- ---- -------
--------- -----
------
------
------------ -----------------------
------- -------------------------------------------------
-------
------
---- ----------
---- ---------------
---- ------------- ------------------
---- ------------- ------------------
------
---- ---------------
---- ------------- ------------------
---- ------------- ------------------
------
------
--------
----- ---- - --------------------------------
------------------------------ ------- -- -
----- ------------ - -------------------------------
-- -------------- -
--------------------------------------------------
-
---
---------
-------
-------在上面的示例中，当点击页面上任意一个 .child 元素时，会输出该元素的 data-id 属性值。
在上述 event.target.closest 中，参数可以是任意合法的 css 选择器，discore-closest 会在触发事件的元素的祖先或兄弟中查找最近的匹配元素。
同时，如果想继续进行更高级的操作，比如匹配条件修改等，我们可以使用 discore-closest 的更高级用法。
如何使用自定义的匹配条件
除了传入一个标准的 css 选择器外，discore-closest 还支持传入一个判定函数，来自定义节点的匹配条件。
-- -------------------- ---- -------
----- ------- - ------------------------ -- -
-- ---------- ----- - --------------------
-- ----------------- -- --------------------------------------------------- -
------ ---
-
-- ---- ----------------
------ -----
---在上面的示例中，我们传入了一个判断函数，该函数会首先判定给定的节点 el 是否符合要求，如果符合则返回该节点，否则返回 null。
除了可以在 closest 中使用自定义的匹配条件外，我们还可以通过直接调用 discore-closest 的两个方法来实现类似的操作。
如何使用 discore-closest 的两个对外方法
除了 closest 方法外，discore-closest 还提供了两个对外方法：
closestSibling(selector: string | ((el: Element) => boolean), start: Element): Element | null: 在 start 元素的兄弟元素中寻找最近的匹配元素，可传入一个 css 选择器或匹配函数。closestParent(selector: string | ((el: Element) => boolean), start: Element): Element | null: 在 start 元素的祖先元素中寻找最近的匹配元素，可传入一个 css 选择器或匹配函数。
下面是一个使用 closestSibling 方法的示例：
const sibling = document.querySelector('.some-element').closestSibling('.some-class');在上面的示例中，我们调用了 closestSibling 方法，传入了一个 css 选择器作为匹配条件，该方法会在调用元素的兄弟元素中查找最近的匹配元素。
同样地，我们也可以使用匹配函数来自定义匹配条件：
-- -------------------- ---- -------
----- ------- - ----------------------------------------------------------- -- -
-- -------- -------- ------------- --------
-- ----------- --- ----- -- ------------------------------------- -
------ ---
-
-- ---- ----------------
------ -----
---最后，我们还可以使用 closestParent 方法来在元素的祖先元素中查找最近的匹配节点：
const parent = document.querySelector('.some-element').closestParent('.some-class');在上面的示例中，我们调用了 closestParent 方法，传入了一个 css 选择器作为匹配条件，该方法会在调用元素的祖先元素中查找最近的匹配元素。
同样地，我们也可以使用匹配函数来自定义匹配条件：
-- -------------------- ---- -------
----- ------ - ---------------------------------------------------------- -- -
-- -------- -------- ------------- --------
-- ----------- --- ----- -- ------------------------------------- -
------ ---
-
-- ---- ----------------
------ -----
---总结
使用 discore-closest 可以方便地在 DOM 树结构中查找最近的匹配节点，不仅支持标准的 css 选择器，还支持自定义匹配函数。同时，discore-closest 还提供了两个对外方法，分别是 closestSibling 和 closestParent。掌握了这些方法，我们就能更加方便地在前端项目中进行 DOM 操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/204127