在前端开发过程中，我们经常需要在 DOM 元素上执行一些操作。本文介绍一个能够帮助我们在 DOM 上执行任意操作的 npm 包 @hikaruna/exec-on-dom。
安装
在命令行中执行以下命令进行安装：
npm install @hikaruna/exec-on-dom
使用方法
引入模块
在需要使用该模块的文件中引入：
const execOnDOM = require('@hikaruna/exec-on-dom');
函数参数说明
该模块提供一个 execOnDOM 函数，该函数接收三个参数：
selector：DOM 元素选择器，必须参数。callback：要在 DOM 上执行的回调函数，必须参数。options：配置选项，可选参数。
回调函数参数说明
回调函数提供以下三个参数：
node：当前正在处理的 DOM 元素。index：当前正在处理的 DOM 元素在列表中的索引。list：所有符合选择器的 DOM 元素列表。
示例代码
下面我们来看一个例子，将所有 p 标签的文本替换为「Hello World」：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------- ---------- ------- ------ --------------- --------------- ------- -------------------------- ------- -------展开代码
const execOnDOM = require('@hikaruna/exec-on-dom'); execOnDOM('p', function(node) { node.textContent = 'Hello World'; });
在浏览器中运行该 HTML 文件，我们会发现所有 p 标签的文本都被替换成了「Hello World」。
配置选项
execOnDOM 函数还支持以下配置选项：
once
是否只执行一次，设为 true 后，只会对第一个符合选择器的 DOM 元素进行操作。
execOnDOM('p', function(node) { node.textContent = 'Hello World'; }, { once: true });
ignoreBeforeOnce
在 once 为 true 的情况下，是否忽略先前的选择器。
默认情况下，如果一个选择器之前已被调用过，即使 once 为 true，它也将被忽略。
execOnDOM('p', function(node) { node.textContent = 'Hello World'; }, { once: true, ignoreBeforeOnce: true });
结语
本文介绍了如何使用 npm 包 @hikaruna/exec-on-dom 在 DOM 上执行任意操作，希望对你理解 DOM 相关操作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/149053
