在前端的开发过程中，不可避免的要用到多种 DOM 操作，其中，查找元素是最为常见的一种。在查找元素的过程中，element.closest() 是一个常用的 API，该 API 可以帮助开发者查找一个元素的祖先元素中是否存在匹配指定选择器的元素。不过，该 API 在一些低版本的浏览器中并不支持，为了解决该问题，有了 npm 包 element-closest-polyfill。
下面我们来看一下如何使用 element-closest-polyfill。
安装
使用 npm 安装 element-closest-polyfill：
npm install element-closest-polyfill --save-dev
引入
在项目中引入 element-closest-polyfill：
import 'element-closest-polyfill';
使用方法
使用 element.closest() 查找最近的选择器匹配元素：
<div class="level1">
<div class="level2">
<div class="level3"></div>
</div>
</div>const level3 = document.querySelector('.level3');
const level1 = level3.closest('.level1');
console.log(level1); // <div class="level1">...</div>示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------------- ------------
-------
------
---- ---------------
---- ---------------
---- ---------------------
------
------
------- ----------------------------------------------------------------
--------
----- ------ - ----------------------------------
----- ------ - --------------------------
-------------------- -- ---- ------------------------
---------
-------
-------注意事项
- 如果使用了 webpack 等打包工具，可以通过配置 resolve.alias 来使用 element-closest-polyfill，如：
module.exports = {
resolve: {
alias: {
'element-closest-polyfill': 'element-closest-polyfill/index.js'
}
}
};- 使用 element-closest-polyfill 时，需要注意的是：尽量避免对 Shadow DOM 中的元素使用 element.closest()，否则会出现不可预期的行为。
- element-closest-polyfill 包括了对 Element.prototype.matches() 操作的 Polyfill，因此，无需额外使用其他 Polyfill 库。
总结
通过上述使用方法，我们可以轻松便捷的使用 element-closest-polyfill。该 Polyfill 的出现，为开发者在低版本浏览器中使用 element.closest() 提供了便利，同时，也为开发者提供了一种了解 Polyfill 的方法。因此，学会使用 Polyfill，对我们的开发工作也是非常有益的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad06b5cbfe1ea0610bb8