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