npm 包 jedifocus.dom 使用教程

前端开发中，DOM 操作是非常常见的一种技术。在实际开发中，开发者需要频繁地对 DOM 进行操作，以实现页面的交互和元素的动态更新。而 jedifocus.dom 就是一款非常优秀的工具库，可以帮助开发者更便捷地进行 DOM 操作。

简介

jedifocus.dom 是一个基于原生 DOM API 封装的 npm 包，提供一系列便捷的 DOM 操作 API。这个库的特点在于，它的 API 返回的是一个类似数组的对象，可以更便捷地使用链式调用进行 DOM 操作。

安装

使用 jedifocus.dom，我们首先需要在项目中安装它。通过 npm 安装：

npm install jedifocus.dom

或者通过 CDN 加载：

<script src="https://cdn.jsdelivr.net/npm/jedifocus.dom/dist/jedifocus.dom.min.js"></script>

基本用法

使用 jedifocus.dom 进行 DOM 操作非常简单。我们只需要将需要操作的元素传入 jedifocus.dom 的选择器函数中即可，选择器函数支持多种参数类型：

字符串类型

可以传入一个 CSS 选择器字符串，来选中文档中的元素。

const elements = jd('.class-name');

DOM 元素

可以传入一个 DOM 元素对象，jedifocus.dom 将会将它封装成一个类数组对象。

const el = document.getElementById('div-id');
const elements = jd(el);

数组类型

可以传入一个 DOM 元素数组，jedifocus.dom 将会将它封装成一个类数组对象。

const els = document.querySelectorAll('.class-name');
const elements = jd(Array.from(els));

返回结果为一个类数组对象，我们可以使用链式调用来进行一系列操作。

比如，我们设置元素的样式、添加事件监听器、修改元素内容即可：

jd('.class-name')
  .css('color', 'red')
  .on('click', () => {
    console.log('clicked');
  })
  .text('hello world');

API 介绍

jedifocus.dom 包括了丰富的 API，这里介绍其中较为常用的一些 API。

css

设置元素的样式，同样支持链式调用。

jd('.class-name')
  .css('color', 'red')
  .css({
    'background-color': 'green',
    'font-size': '16px'
  });

on

添加事件监听器，同样支持链式调用。

jd('.class-name')
  .on('click', function(event) {
    console.log('clicked');
  })
  .on('mousemove', function(event) {
    console.log('mouse moved');
  });

off

移除事件监听器，同样支持链式调用。

jd('.class-name')
  .off('click')
  .off('mousemove');

text

设置或获取元素的文本内容。

jd('.class-name')
  .text('hello world')
  .text(); // 返回元素的文本内容

html

设置或获取元素的 HTML 内容。

jd('.class-name')
  .html('<h1>hello world</h1>')
  .html(); // 返回元素的 HTML 内容

attr

设置或获取元素的属性。

jd('.class-name')
  .attr('title', 'hello world')
  .attr({
    'data-x': 'foo',
    'data-y': 'bar'
  })
  .attr('title'); // 获取元素的 title 属性值

addClass

添加元素的 class。

jd('.class-name')
  .addClass('new-class')
  .addClass('class1 class2');

removeClass

移除元素的 class。

jd('.class-name')
  .removeClass('old-class')
  .removeClass('class1 class2');

总结

jedifocus.dom 是一个非常优秀的 DOM 操作库，它简单易用，同时还提供了丰富的 API 支持。我们可以使用它来更便捷地进行 DOM 操作，从而开发出更出色的前端应用程序。

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