npm 包 Sandwich-Expando 使用教程

简介

Sandwich-Expando 是一个适用于前端的轻量级 DOM 操作库，可以方便的使用在 HTML 上添加、移除、切换类名等基本 DOM 操作。该库支持在浏览器端以及 Node.js 端使用。

安装

可以使用 npm 来安装 Sandwich-Expando 库，使用以下命令进行安装：

npm install sandwich-expando

使用

引入

在需要使用该库的 js 文件中，使用以下语句引入 Sandwich-Expando 库：

const s = require('sandwich-expando')

基本操作

下面是该库提供的一些基本 DOM 操作功能：

添加类名

使用 addClass() 方法可以在指定元素上添加类名：

s.addClass(document.querySelector('.my-div'), 'active')

在上面的例子中，我们选中了一个类名为 my-div 的 div 元素，并为其添加了一个 active 的类名。

移除类名

使用 removeClass() 方法可以在指定元素上移除指定的类名：

s.removeClass(document.querySelector('.my-div'), 'active')

在上面的例子中，我们选中了一个类名为 my-div 的 div 元素，并从中移除了 active 类名。

切换类名

使用 toggleClass() 方法可以在指定元素上切换指定的类名：

s.toggleClass(document.querySelector('.my-div'), 'active')

在上面的例子中，我们选中了一个类名为 my-div 的 div 元素，并切换了其中的 active 类名。

组合操作

Sandwich-Expando 还提供了一些组合操作的方法，可以在多个元素上进行操作。

批量添加类名

使用 addClasses() 方法可以在一组指定元素上添加指定的类名：

s.addClasses(document.querySelectorAll('.my-div'), 'active')

在上面的例子中，我们选中了所有类名为 my-div 的 div 元素，并为其添加了一个 active 的类名。

批量移除类名

使用 removeClasses() 方法可以在一组指定元素上移除指定的类名：

s.removeClasses(document.querySelectorAll('.my-div'), 'active')

在上面的例子中，我们选中了所有类名为 my-div 的 div 元素，并从中移除了 active 类名。

批量切换类名

使用 toggleClasses() 方法可以在一组指定元素上切换指定的类名：

s.toggleClasses(document.querySelectorAll('.my-div'), 'active')

在上面的例子中，我们选中了所有类名为 my-div 的 div 元素，并切换了其中的 active 类名。

链式操作

Sandwich-Expando 还支持链式操作，可以简化代码，使其更易读。

下面是一个链式操作的示例：

s
  .addClass(document.querySelector('.my-div'), 'active')
  .removeClass(document.querySelector('.my-div'), 'hidden')
  .toggleClass(document.querySelector('.nav'), 'open')

在上面的例子中，我们选中了一个类名为 my-div 的 div 元素，并为其添加了 active 类名，移除了其中的 hidden 类名；同时我们还选中了一个类名为 nav 的元素，并切换了其中的 open 类名。

总结

以上是 Sandwich-Expando 的使用方法。Sandwich-Expando 是一个简单易用的 DOM 操作库，它提供了一些基本 DOM 操作以及一些组合操作，支持链式操作。希望能对您的前端开发工作有所帮助。如果您有任何疑问，请随时在评论区留言。完整的示例代码可以在以下代码库中找到：

https://github.com/sandwich-expando/sandwich-expando-examples

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/204275