前言
在开发前端项目中，操作 DOM 元素是我们经常要做的事情。而在现代化的前端工程中，我们经常会使用 React、Vue 等框架，通过 virtual-dom 技术来更新视图。然而有时候我们仍需要直接操作 DOM 元素。而 simple-dom-helper 正是一个方便的 npm 包，可以帮助我们更便捷地操作 DOM 元素。
什么是 simple-dom-helper
simple-dom-helper 是一个轻量级的 DOM 操作库，它的 API 设计简单，易于使用。它提供了一系列 API，可以完成常见的 DOM 操作，例如创建 DOM 元素、添加/删除子元素、设置/获取元素属性、样式等等。
安装和使用
我们可以通过 npm 来安装 simple-dom-helper：
npm install simple-dom-helper
然后在代码中引入它：
import { createElement, appendChild, setStyle } from 'simple-dom-helper'API 介绍
simple-dom-helper 提供了一系列 API 来操作 DOM 元素。下面我们来一一介绍这些 API。
createElement
用于创建 DOM 元素。接受两个参数：类型和选项。返回一个 DOM 元素。
const el = createElement('div', {
class: 'container',
style: {
backgroundColor: '#fff',
padding: '16px'
},
text: 'hello world'
})appendChild
向一个父元素中添加一个子元素。接受两个参数：父元素和子元素。
const parent = document.querySelector('.container')
const child = document.createElement('div')
appendChild(parent, child)removeChild
从一个父元素中删除一个子元素。接受两个参数：父元素和子元素。
const parent = document.querySelector('.container')
const child = document.querySelector('.child')
removeChild(parent, child)setAttribute
设置一个元素的属性。接受三个参数：元素，属性名称和属性值。
const el = document.querySelector('.container')
setAttribute(el, 'data-id', '123')getAttribute
获取一个元素的属性。接受两个参数：元素和属性名称。
const el = document.querySelector('.container')
const id = getAttribute(el, 'data-id')removeAttribute
删除一个元素的属性。接受两个参数：元素和属性名称。
const el = document.querySelector('.container')
removeAttribute(el, 'data-id')setStyle
设置一个元素的样式。接受两个参数：元素和样式对象。
const el = document.querySelector('.container')
setStyle(el, {
backgroundColor: '#fff',
color: '#000',
padding: '16px'
})addClass
向一个元素中添加一个 class。接受两个参数：元素和 class 名称。
const el = document.querySelector('.container')
addClass(el, 'active')removeClass
从一个元素中删除一个 class。接受两个参数：元素和 class 名称。
const el = document.querySelector('.container')
removeClass(el, 'active')示例代码
下面是一个简单的使用示例，用 simple-dom-helper 创建一个带有子元素的 div：
-- -------------------- ---- ------- ------ - -------------- ------------ -------- - ---- ------------------- ----- --------- - -------------------- - ------ ----------- -- ----- ----- - ------------------- - ----- ------ ------ -- ----- ------- - -------------------- - ----- ----- -- - ------ -- ---------------------- ------ ---------------------- -------- ------------------- - ---------------- ------- -------- ------ -- ------------------------------------
总结
simple-dom-helper 是一个方便的小型 DOM 操作库，可以帮助我们更便捷地操作 DOM 元素。当我们有直接操作 DOM 的需求时，它可以为我们节省不少时间。同时，它的 API 设计简单易用，可以让我们更快地上手使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005611581e8991b448df318