前言
在前端开发中，我们经常需要对网页中的 DOM 元素进行操作，获取子元素、筛选元素等操作是不可避免的。而在实现这些功能的过程中，使用 Sizzle 能够帮我们减少很多代码的编写。本文将详细介绍如何使用 @gerhobbelt/sizzle 这个 npm 包来实现 Sizzle 功能。
安装
在命令行中输入以下命令即可安装该包：
npm install @gerhobbelt/sizzle
导入
在需要使用 Sizzle 的文件中，导入 sizzle.js 文件即可。以下是一个示例代码：
import Sizzle from '@gerhobbelt/sizzle';
基本使用
Sizzle 通过 CSS 选择器的方式来获取元素，使用起来非常便捷。以下是一些常见的用法：
id 选择器
获取 id 为 example 的元素：
var elem = Sizzle("#example");class 选择器
获取类名为 example 的元素：
var elems = Sizzle(".example");组合选择器
获取同时拥有 example 和 demo 类名的元素：
var elems = Sizzle(".example.demo");属性选择器
获取标签为 input，且 type 属性为 text 的元素：
var elems = Sizzle("input[type='text']");层级选择器
获取父元素为 div，子元素为 span 的元素：
var elems = Sizzle("div > span");兄弟选择器
获取紧接在某个元素后面的兄弟元素：
var elems = Sizzle("p + span");伪选择器
获取第一个子元素：
var elem = Sizzle(":first-child")[0];以上仅是一些常见的用法，更多的用法可以参考 Sizzle 官方文档。
高级用法
除了基本用法之外，Sizzle 还提供了很多高级用法，可以帮助我们更加灵活地使用。
自定义扩展选择器
使用 Sizzle.selectors.register 方法，可以自定义扩展选择器。
Sizzle.selectors.match.finder = function(match) {
return match[1] === 'fizz' && match[2] === 'buzz';
};
Sizzle.selectors.define('fizzbuzz', '\\w+:fizz-buzz', 1);
var elems = Sizzle("div:fizz-buzz");选择器引擎
Sizzle 中默认的选择器引擎为 qSA，而 qSA 仅适用于一小部分现代浏览器，为了兼容性更好，可以使用 Sizzle 自带的引擎 Sizzle.matchesSelector。
var elem = Sizzle("#foo")[0];
var isMatch = Sizzle.matchesSelector(elem, "#foo");多元素选择
使用 Sizzle.matches 方法，可以在一个选择器字符串中查找多个元素。
function getElems() {
return Sizzle.matches(".foo, .bar");
}
var elems = getElems();以上仅是一些高级用法，更多的高级用法可以参考 Sizzle 官方文档。
总结
@gerhobbelt/sizzle 可以帮助我们更加方便地处理 DOM 元素，使用起来非常简单，而且提供了很多高级用法，可以帮助我们更加灵活地使用。在实际开发中，我们可以根据需要，选择合适的用法来进行操作，从而提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f81238a385564ab6b65