在开发前端应用过程中，我们经常需要通过 DOM 操作来实现各种功能。而就在最基础的 DOM 操作中，选择器的使用已经是非常普遍的了。
然而，一些情况下，标准的 DOM 选择器难以满足我们的需求。比如说，想要匹配某一元素的子元素。此时我们就可以使用 @mapbox/query-selector-contains-node 这个 npm 包来解决我们的问题。
什么是 @mapbox/query-selector-contains-node？
@mapbox/query-selector-contains-node 是一个可以扩展 DOM 选择器的 npm 包。它可以选择所有包含某个元素的所有元素，而不仅仅是该元素的后代元素。这个包基于 document.querySelectorAll() 函数作了改进，支持在选择器语句中使用 :contains() 伪类。
如何使用 @mapbox/query-selector-contains-node？
首先，需要安装该依赖：
npm install @mapbox/query-selector-contains-node
然后在项目中引用该包：
import 'mapbox-selector-contains-node';
接着就可以在你的 HTML 中使用类似于如下的选择器了：
div:contains(p)
上述选择器可以选中所有包含了 p 标记的 div 元素，而不仅仅是 p 元素的父元素。
值得注意的是，使用 @mapbox/query-selector-contains-node 功能的选择器可以使用于某些 CSS 预处理器中（如 Less、Sass），或者在 JS 库中用于构建 UI，但在 jQuery 中是无法使用的。
const el = document.querySelector('div:contains(p)');在上述 JavaScript 代码中，document.querySelector() 会返回第一个匹配到的元素，如果要匹配到所有的元素，则可以使用 document.querySelectorAll()。
示例代码
以下是一个示例代码，使用 @mapbox/query-selector-contains-node 扩展了 DOM 的选择器功能，选择器可以在网页中匹配到所有包含 span 元素的 div 元素：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-----------------
-------
------
---------------------------
--------------------------
------- --------------
------ --------------------------------
----- ------------ - ------------------------------------------------
--------------------------
---------
-------
-------总结
@mapbox/query-selector-contains-node 是一个非常方便的 DOM 选择器扩展包。它允许我们使用一个新的伪类 :contains()，来选择所有包含某个元素的元素。这种选择器可以很好地解决在标准 DOM 选择器无法准确匹配元素的情况下的问题。希望这篇文章可以帮助到你，快快去尝试一下吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2ac3983b0ab45f74a8bb0c