在前端开发中，使用 jQuery 来操作 DOM 是非常方便的。但是如果你需要在没有 jQuery 的项目中进行 DOM 操作，该怎么办呢？这时，项目中很可能会用到 EPHOX 的 @ephox/wrap-sizzle 这个 npm 包。
什么是 @ephox/wrap-sizzle？
@ephox/wrap-sizzle 是一个纯 JavaScript 实现的 DOM 操作库，它提供了针对现代浏览器的选择器引擎，可以用来模拟 jQuery 的选择器功能。
@ephox/wrap-sizzle 的安装和使用
1. 安装
使用 npm 安装 @ephox/wrap-sizzle。
npm install @ephox/wrap-sizzle --save
2. 使用
要使用 @ephox/wrap-sizzle ，我们需要先导入库：
const { query } = require('@ephox/wrap-sizzle');然后就可以使用 query 方法来选择 DOM 元素了：
const element = query('div');这样，我们就可以成功地通过选择器选取到 DOM 元素了。
@ephox/wrap-sizzle 的 API 文档
query(selector, context = document, xml = false)
- 参数：
selector：要选择的元素的选择器字符串。context：要在其中搜索selector的元素，默认为document。xml：在 XML 文件中应用选择器，默认为false。
- 返回值：DOM 元素。
matchesSelector(element, selector)
- 参数：
element：要测试的元素。selector：要与element匹配的选择器。
- 返回值：如果
element与selector匹配，返回true；否则返回false。
relative(parent, relative)
- 参数：
parent：父元素。relative：相对父元素定位的字符串。
- 返回值：元素。
qsa(selector, context = document)
- 参数：
selector：要选择的元素的选择器字符串。context：要在其中搜索selector的元素，默认为document。
- 返回值：包含所有匹配元素的数组。
示例代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------- ------- ------ ----------- ------------ ------- -------------------------- ------- -------
const { query, qsa } = require('@ephox/wrap-sizzle');
const element = query('div');
console.log(element.textContent); // => "Hello, World!"
const elements = qsa('div');
console.log(elements.length); // => 1总结
通过这篇文章，你已经了解了什么是 @ephox/wrap-sizzle，以及如何安装和使用它来进行 DOM 操作。同时，我们也介绍了它的 API 文档和示例代码。希望这篇文章能对你的工作和学习有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedacddb5cbfe1ea0610b6c