@whitesev/domutils 1.8.8 → 1.8.9

package/dist/types/src/ElementAnimate.d.ts

@@ -1,6 +1,6 @@
+import { ElementWait } from "./ElementWait";
 import type { DOMUtilsTargetElementType } from "./types/global";
 import type { WindowApiOption } from "./types/WindowApi";
-import { ElementWait } from "./ElementWait";
 import { WindowApi } from "./WindowApi";
 declare class ElementAnimate extends ElementWait {
     windowApi: typeof WindowApi.prototype;

package/dist/types/src/index.d.ts

@@ -1,8 +1,8 @@
-import type { DOMUtilsCreateElementAttributesMap } from "./types/DOMUtilsEvent";
-import { type DOMUtilsCSSProperty, type DOMUtilsCSSPropertyType } from "./types/DOMUtilsCSSProperty";
-import type { WindowApiOption } from "./types/WindowApi";
 import { ElementHandler } from "./ElementHandler";
+import { type DOMUtilsCSSProperty, type DOMUtilsCSSPropertyType } from "./types/DOMUtilsCSSProperty";
+import type { DOMUtilsCreateElementAttributesMap } from "./types/DOMUtilsEvent";
 import type { DOMUtilsTargetElementType } from "./types/global";
+import type { WindowApiOption } from "./types/WindowApi";
 declare class DOMUtils extends ElementHandler {
     constructor(option?: WindowApiOption);
     /** 版本号 */
@@ -304,43 +304,52 @@ declare class DOMUtils extends ElementHandler {
     /**
      * 函数在元素内部末尾添加子元素或HTML字符串
      * @param $el 目标元素
-     * @param content 子元素或HTML字符串
+     * @param args 子元素或HTML字符串
      * @example
      * // 元素a.xx的内部末尾添加一个元素
-     * DOMUtils.append(document.querySelector("a.xx"),document.querySelector("b.xx"))
-     * DOMUtils.append("a.xx","'<b class="xx"></b>")
+     * DOMUtils.append(document.querySelector("a.xx"), document.querySelector("b.xx"))
+     * DOMUtils.append("a.xx", "<b class="xx"></b>")
+     * DOMUtils.append(document, [document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx")])
+     * DOMUtils.append(document, document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx"))
      * */
-    append($el: DOMUtilsTargetElementType | DocumentFragment, content: HTMLElement | string | (HTMLElement | string | Element)[] | NodeList): void;
+    append($el: DOMUtilsTargetElementType | DocumentFragment, ...args: (HTMLElement | string | (HTMLElement | string | Element)[] | NodeList)[]): void;
     /**
      * 函数 在元素内部开头添加子元素或HTML字符串
      * @param $el 目标元素
-     * @param content 子元素或HTML字符串
+     * @param args 子元素或HTML字符串
      * @example
      * // 元素a.xx内部开头添加一个元素
      * DOMUtils.prepend(document.querySelector("a.xx"),document.querySelector("b.xx"))
      * DOMUtils.prepend("a.xx","'<b class="xx"></b>")
+     * DOMUtils.prepend(document, [document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx")])
+     * DOMUtils.prepend(document, document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx"))
      * */
-    prepend($el: DOMUtilsTargetElementType | DocumentFragment, content: HTMLElement | string): void;
+    prepend($el: DOMUtilsTargetElementType | DocumentFragment, ...args: (HTMLElement | string | (HTMLElement | string | Element)[] | NodeList)[]): void;
     /**
      * 在元素后面添加兄弟元素或HTML字符串
      * @param $el 目标元素
-     * @param content 兄弟元素或HTML字符串
+     * @param args 兄弟元素或HTML字符串
      * @example
      * // 元素a.xx后面添加一个元素
      * DOMUtils.after(document.querySelector("a.xx"),document.querySelector("b.xx"))
      * DOMUtils.after("a.xx","'<b class="xx"></b>")
+     * DOMUtils.after(document, [document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx")])
+     * DOMUtils.after(document, document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx"))
      * */
-    after($el: DOMUtilsTargetElementType, content: HTMLElement | string): void;
+    after($el: DOMUtilsTargetElementType, ...args: (HTMLElement | string | (HTMLElement | string | Element)[] | NodeList)[]): void;
     /**
      * 在元素前面添加兄弟元素或HTML字符串
      * @param $el 目标元素
-     * @param content 兄弟元素或HTML字符串
+     * @param args 兄弟元素或HTML字符串
      * @example
      * // 元素a.xx前面添加一个元素
      * DOMUtils.before(document.querySelector("a.xx"),document.querySelector("b.xx"))
      * DOMUtils.before("a.xx","'<b class="xx"></b>")
+     * DOMUtils.before(document, [document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx")])
+     * DOMUtils.before(document, document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx"))
+     *
      * */
-    before($el: DOMUtilsTargetElementType, content: HTMLElement | string): void;
+    before($el: DOMUtilsTargetElementType, ...args: (HTMLElement | string | (HTMLElement | string | Element)[] | NodeList)[]): void;
     /**
      * 移除元素
      * @param $el 目标元素，可以是数组、单个元素、NodeList、元素选择器
@@ -352,7 +361,7 @@ declare class DOMUtils extends ElementHandler {
      * */
     remove($el: DOMUtilsTargetElementType | Element): void;
     /**
-     * 移除元素的所有子元素
+     * 移除元素内所有的子元素
      * @param $el 目标元素
      * @example
      * // 移除元素a.xx元素的所有子元素

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@whitesev/domutils",
-  "version": "1.8.8",
+  "version": "1.8.9",
   "type": "module",
   "description": "适合在浏览器中操作DOM的常用工具类",
   "main": "dist/index.cjs.js",
@@ -58,7 +58,7 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "format": "prettier . --write",
-    "dev": "pnpm run format && pnpm run lint && rollup -c -w",
+    "dev": "vue-tsc --noEmit && vite --force",
     "build": "pnpm run format && pnpm run lint && rollup -c"
   }
 }

package/src/CommonUtils.ts

@@ -1,10 +1,4 @@
 import { WindowApi } from "./WindowApi";
-import {
-  clearInterval as WorkerClearInterval,
-  clearTimeout as WorkerClearTimeout,
-  setInterval as WorkerSetInterval,
-  setTimeout as WorkerSetTimeout,
-} from "worker-timers";
 
 /** 通用工具类 */
 export const CommonUtils = {
@@ -151,54 +145,6 @@ export const CommonUtils = {
       delete target[propName];
     }
   },
-  /**
-   * 自动使用 Worker 执行 setTimeout
-   */
-  setTimeout(callback: (...args: any[]) => any, timeout: number = 0) {
-    try {
-      return WorkerSetTimeout(callback, timeout);
-    } catch {
-      return this.windowApi.setTimeout(callback, timeout);
-    }
-  },
-  /**
-   * 配合 .setTimeout 使用
-   */
-  clearTimeout(timeId: number | undefined) {
-    try {
-      if (timeId != null) {
-        WorkerClearTimeout(timeId);
-      }
-    } catch {
-      // TODO
-    } finally {
-      this.windowApi.clearTimeout(timeId);
-    }
-  },
-  /**
-   * 自动使用 Worker 执行 setInterval
-   */
-  setInterval(callback: (...args: any[]) => any, timeout: number = 0) {
-    try {
-      return WorkerSetInterval(callback, timeout);
-    } catch {
-      return this.windowApi.setInterval(callback, timeout);
-    }
-  },
-  /**
-   * 配合 .setInterval 使用
-   */
-  clearInterval(timeId: number | undefined) {
-    try {
-      if (timeId != null) {
-        WorkerClearInterval(timeId);
-      }
-    } catch {
-      // TODO
-    } finally {
-      this.windowApi.clearInterval(timeId);
-    }
-  },
   /**
    * 判断是否是元素列表
    * @param $ele

package/src/ElementAnimate.ts

@@ -1,8 +1,8 @@
 import { CommonUtils } from "./CommonUtils";
 import { elementSelector } from "./ElementSelector";
+import { ElementWait } from "./ElementWait";
 import type { DOMUtilsTargetElementType } from "./types/global";
 import type { WindowApiOption } from "./types/WindowApi";
-import { ElementWait } from "./ElementWait";
 import { WindowApi } from "./WindowApi";
 
 class ElementAnimate extends ElementWait {
@@ -66,7 +66,7 @@ class ElementAnimate extends ElementWait {
       from[prop] = element.style[prop] || context.windowApi.globalThis.getComputedStyle(element)[prop];
       to[prop] = styles[prop];
     }
-    const timer = CommonUtils.setInterval(function () {
+    const timer = setInterval(function () {
       const timePassed = performance.now() - start;
       let progress = timePassed / duration;
       if (progress > 1) {
@@ -76,7 +76,7 @@ class ElementAnimate extends ElementWait {
         element.style[prop] = from[prop] + (to[prop] - from[prop]) * progress + "px";
       }
       if (progress === 1) {
-        CommonUtils.clearInterval(timer);
+        clearInterval(timer);
         if (callback) {
           callback();
         }

package/src/ElementEvent.ts

@@ -743,7 +743,7 @@ class ElementEvent extends ElementAnimate {
     function check() {
       if (checkDOMReadyState()) {
         /* 检查document状态 */
-        CommonUtils.setTimeout(completed, 0);
+        setTimeout(completed, 0);
       } else {
         /* 添加监听 */
         addDomReadyListener();
@@ -1440,7 +1440,7 @@ class ElementEvent extends ElementAnimate {
         if (evt.pointerType === "touch") {
           isMobileTouch = true;
         }
-        CommonUtils.clearTimeout(timer);
+        clearTimeout(timer);
         timer = void 0;
         if (isDoubleClick && $click === selectorTarget) {
           isDoubleClick = false;
@@ -1450,7 +1450,7 @@ class ElementEvent extends ElementAnimate {
             isDoubleClick: true,
           });
         } else {
-          timer = CommonUtils.setTimeout(() => {
+          timer = setTimeout(() => {
             isDoubleClick = false;
             // 判断为单击
             dblclick_handler(evt, {

package/src/ElementWait.ts

@@ -1,4 +1,3 @@
-import { CommonUtils } from "./CommonUtils";
 import { ElementSelector, elementSelector } from "./ElementSelector";
 import type { WindowApiOption } from "./types/WindowApi";
 import { utils } from "./Utils";
@@ -90,7 +89,7 @@ class ElementWait extends ElementSelector {
         },
       });
       if (__timeout__ > 0) {
-        CommonUtils.setTimeout(() => {
+        setTimeout(() => {
           // 取消观察器
           if (typeof observer?.disconnect === "function") {
             observer.disconnect();

package/src/index.ts

@@ -1,10 +1,10 @@
-import { CommonUtils } from "./CommonUtils";
-import type { DOMUtilsCreateElementAttributesMap } from "./types/DOMUtilsEvent";
-import { type DOMUtilsCSSProperty, type DOMUtilsCSSPropertyType } from "./types/DOMUtilsCSSProperty";
-import type { WindowApiOption } from "./types/WindowApi";
 import { version } from "../package.json";
+import { CommonUtils } from "./CommonUtils";
 import { ElementHandler } from "./ElementHandler";
+import { type DOMUtilsCSSProperty, type DOMUtilsCSSPropertyType } from "./types/DOMUtilsCSSProperty";
+import type { DOMUtilsCreateElementAttributesMap } from "./types/DOMUtilsEvent";
 import type { DOMUtilsTargetElementType } from "./types/global";
+import type { WindowApiOption } from "./types/WindowApi";
 
 class DOMUtils extends ElementHandler {
   constructor(option?: WindowApiOption) {
@@ -784,20 +784,22 @@ class DOMUtils extends ElementHandler {
   /**
    * 函数在元素内部末尾添加子元素或HTML字符串
    * @param $el 目标元素
-   * @param content 子元素或HTML字符串
+   * @param args 子元素或HTML字符串
    * @example
    * // 元素a.xx的内部末尾添加一个元素
-   * DOMUtils.append(document.querySelector("a.xx"),document.querySelector("b.xx"))
-   * DOMUtils.append("a.xx","'<b class="xx"></b>")
+   * DOMUtils.append(document.querySelector("a.xx"), document.querySelector("b.xx"))
+   * DOMUtils.append("a.xx", "<b class="xx"></b>")
+   * DOMUtils.append(document, [document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx")])
+   * DOMUtils.append(document, document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx"))
    * */
   append(
     $el: DOMUtilsTargetElementType | DocumentFragment,
-    content: HTMLElement | string | (HTMLElement | string | Element)[] | NodeList
+    ...args: (HTMLElement | string | (HTMLElement | string | Element)[] | NodeList)[]
   ) {
-    const that = this;
     if (typeof $el === "string") {
-      $el = that.selectorAll($el);
+      $el = this.selectorAll($el);
     }
+
     if ($el == null) {
       return;
     }
@@ -805,150 +807,228 @@ class DOMUtils extends ElementHandler {
     if (CommonUtils.isNodeList($el)) {
       // 设置
       $el.forEach(($elItem) => {
-        that.append($elItem as HTMLElement, content);
+        this.append($elItem as HTMLElement, ...args);
       });
       return;
     }
-    function elementAppendChild(ele: HTMLElement | DocumentFragment, text: HTMLElement | string) {
-      if (typeof content === "string") {
-        if (ele instanceof DocumentFragment) {
-          if (typeof text === "string") {
-            text = that.toElement(text, true, false);
-          }
-          ele.appendChild(text);
+    const handler = ($ele: HTMLElement | DocumentFragment, $target: HTMLElement | string | Node) => {
+      if ($ele instanceof DocumentFragment) {
+        if (typeof $target === "string") {
+          // 字符串转元素
+          $target = this.toElement($target, true, false);
+        }
+        $ele.appendChild($target);
+      } else {
+        if (typeof $target === "string") {
+          $ele.insertAdjacentHTML("beforeend", CommonUtils.createSafeHTML($target));
         } else {
-          ele.insertAdjacentHTML("beforeend", CommonUtils.createSafeHTML(text as string));
+          $ele.appendChild($target);
         }
+      }
+    };
+    const $fragment = this.windowApi.document.createDocumentFragment();
+    args.forEach((argItem) => {
+      if (CommonUtils.isNodeList(argItem)) {
+        // 数组
+        argItem.forEach((it) => {
+          handler($fragment, it);
+        });
       } else {
-        ele.appendChild(text as HTMLElement);
+        handler($fragment, argItem);
       }
-    }
-    if (Array.isArray(content) || content instanceof NodeList) {
-      /* 数组 */
-      const fragment = that.windowApi.document.createDocumentFragment();
-      content.forEach((ele) => {
-        if (typeof ele === "string") {
-          // 转为元素
-          ele = that.toElement(ele, true, false);
-        }
-        fragment.appendChild(ele);
-      });
-      $el.appendChild(fragment);
-    } else {
-      elementAppendChild($el, content);
-    }
+    });
+    handler($el, $fragment);
   }
   /**
    * 函数 在元素内部开头添加子元素或HTML字符串
    * @param $el 目标元素
-   * @param content 子元素或HTML字符串
+   * @param args 子元素或HTML字符串
    * @example
    * // 元素a.xx内部开头添加一个元素
    * DOMUtils.prepend(document.querySelector("a.xx"),document.querySelector("b.xx"))
    * DOMUtils.prepend("a.xx","'<b class="xx"></b>")
+   * DOMUtils.prepend(document, [document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx")])
+   * DOMUtils.prepend(document, document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx"))
    * */
-  prepend($el: DOMUtilsTargetElementType | DocumentFragment, content: HTMLElement | string) {
-    const that = this;
+  prepend(
+    $el: DOMUtilsTargetElementType | DocumentFragment,
+    ...args: (HTMLElement | string | (HTMLElement | string | Element)[] | NodeList)[]
+  ) {
     if (typeof $el === "string") {
-      $el = that.selectorAll($el);
+      $el = this.selectorAll($el);
     }
+
     if ($el == null) {
       return;
     }
+
     if (CommonUtils.isNodeList($el)) {
       // 设置
       $el.forEach(($elItem) => {
-        that.prepend($elItem as HTMLElement, content);
+        this.prepend($elItem as HTMLElement, ...args);
       });
       return;
     }
-    if (typeof content === "string") {
-      if ($el instanceof DocumentFragment) {
-        content = that.toElement(content, true, false);
-        $el.prepend(content);
+    const handler = ($ele: HTMLElement | DocumentFragment, $target: HTMLElement | string | Node) => {
+      if ($ele instanceof DocumentFragment) {
+        if (typeof $target === "string") {
+          // 字符串转元素
+          $target = this.toElement($target, true, false);
+        }
+        $ele.appendChild($target);
       } else {
-        $el.insertAdjacentHTML("afterbegin", CommonUtils.createSafeHTML(content));
+        if (typeof $target === "string") {
+          $ele.insertAdjacentHTML("afterbegin", CommonUtils.createSafeHTML($target));
+        } else {
+          const $firstChild = $ele.firstChild;
+          if ($firstChild) {
+            $ele.insertBefore($target, $firstChild);
+          } else {
+            $ele.prepend($target);
+          }
+        }
       }
-    } else {
-      const $firstChild = $el.firstChild;
-      if ($firstChild == null) {
-        $el.prepend(content);
+    };
+    const $fragment = this.windowApi.document.createDocumentFragment();
+    args.forEach((argItem) => {
+      if (CommonUtils.isNodeList(argItem)) {
+        // 数组
+        argItem.forEach((it) => {
+          handler($fragment, it);
+        });
       } else {
-        $el.insertBefore(content, $firstChild);
+        handler($fragment, argItem);
       }
-    }
+    });
+    handler($el, $fragment);
   }
   /**
    * 在元素后面添加兄弟元素或HTML字符串
    * @param $el 目标元素
-   * @param content 兄弟元素或HTML字符串
+   * @param args 兄弟元素或HTML字符串
    * @example
    * // 元素a.xx后面添加一个元素
    * DOMUtils.after(document.querySelector("a.xx"),document.querySelector("b.xx"))
    * DOMUtils.after("a.xx","'<b class="xx"></b>")
+   * DOMUtils.after(document, [document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx")])
+   * DOMUtils.after(document, document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx"))
    * */
-  after($el: DOMUtilsTargetElementType, content: HTMLElement | string) {
-    const that = this;
+  after(
+    $el: DOMUtilsTargetElementType,
+    ...args: (HTMLElement | string | (HTMLElement | string | Element)[] | NodeList)[]
+  ) {
     if (typeof $el === "string") {
-      $el = that.selectorAll($el);
+      $el = this.selectorAll($el);
     }
+
     if ($el == null) {
       return;
     }
+
     if (CommonUtils.isNodeList($el)) {
       // 设置
       $el.forEach(($elItem) => {
-        that.after($elItem as HTMLElement, content);
+        this.after($elItem as HTMLElement, ...args);
       });
       return;
     }
-    if (typeof content === "string") {
-      $el.insertAdjacentHTML("afterend", CommonUtils.createSafeHTML(content));
-    } else {
-      const $parent = $el.parentElement;
-      const $nextSlibling = $el.nextSibling;
-      if (!$parent || $nextSlibling) {
-        // 任意一个不行
-        $el.after(content);
+    const handler = ($ele: HTMLElement | DocumentFragment, $target: HTMLElement | string | Node) => {
+      if ($ele instanceof DocumentFragment) {
+        if (typeof $target === "string") {
+          // 字符串转元素
+          $target = this.toElement($target, true, false);
+        }
+        $ele.appendChild($target);
       } else {
-        $parent.insertBefore(content, $nextSlibling);
+        if (typeof $target === "string") {
+          $ele.insertAdjacentHTML("afterend", CommonUtils.createSafeHTML($target));
+        } else {
+          const $parent = $el.parentElement;
+          const $nextSlibling = $el.nextSibling;
+          if ($parent && $nextSlibling) {
+            $parent.insertBefore($target, $nextSlibling);
+          } else {
+            $el.after($target);
+          }
+        }
       }
-    }
+    };
+    const $fragment = this.windowApi.document.createDocumentFragment();
+    args.forEach((argItem) => {
+      if (CommonUtils.isNodeList(argItem)) {
+        // 数组
+        argItem.forEach((it) => {
+          handler($fragment, it);
+        });
+      } else {
+        handler($fragment, argItem);
+      }
+    });
+    handler($el, $fragment);
   }
   /**
    * 在元素前面添加兄弟元素或HTML字符串
    * @param $el 目标元素
-   * @param content 兄弟元素或HTML字符串
+   * @param args 兄弟元素或HTML字符串
    * @example
    * // 元素a.xx前面添加一个元素
    * DOMUtils.before(document.querySelector("a.xx"),document.querySelector("b.xx"))
    * DOMUtils.before("a.xx","'<b class="xx"></b>")
+   * DOMUtils.before(document, [document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx")])
+   * DOMUtils.before(document, document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx"))
+   *
    * */
-  before($el: DOMUtilsTargetElementType, content: HTMLElement | string) {
-    const that = this;
+  before(
+    $el: DOMUtilsTargetElementType,
+    ...args: (HTMLElement | string | (HTMLElement | string | Element)[] | NodeList)[]
+  ) {
     if (typeof $el === "string") {
-      $el = that.selectorAll($el);
+      $el = this.selectorAll($el);
     }
+
     if ($el == null) {
       return;
     }
+
     if (CommonUtils.isNodeList($el)) {
       // 设置
       $el.forEach(($elItem) => {
-        that.before($elItem as HTMLElement, content);
+        this.before($elItem as HTMLElement, ...args);
       });
       return;
     }
-    if (typeof content === "string") {
-      $el.insertAdjacentHTML("beforebegin", CommonUtils.createSafeHTML(content));
-    } else {
-      const $parent = $el.parentElement;
-      if (!$parent) {
-        $el.before(content);
+    const handler = ($ele: HTMLElement | DocumentFragment, $target: HTMLElement | string | Node) => {
+      if ($ele instanceof DocumentFragment) {
+        if (typeof $target === "string") {
+          // 字符串转元素
+          $target = this.toElement($target, true, false);
+        }
+        $ele.appendChild($target);
       } else {
-        $parent.insertBefore(content, $el);
+        if (typeof $target === "string") {
+          $el.insertAdjacentHTML("beforebegin", CommonUtils.createSafeHTML($target));
+        } else {
+          const $parent = $el.parentElement;
+          if ($parent) {
+            $parent.insertBefore($target, $el);
+          } else {
+            $el.before($target);
+          }
+        }
       }
-    }
+    };
+    const $fragment = this.windowApi.document.createDocumentFragment();
+    args.forEach((argItem) => {
+      if (CommonUtils.isNodeList(argItem)) {
+        // 数组
+        argItem.forEach((it) => {
+          handler($fragment, it);
+        });
+      } else {
+        handler($fragment, argItem);
+      }
+    });
+    handler($el, $fragment);
   }
   /**
    * 移除元素
@@ -982,7 +1062,7 @@ class DOMUtils extends ElementHandler {
     }
   }
   /**
-   * 移除元素的所有子元素
+   * 移除元素内所有的子元素
    * @param $el 目标元素
    * @example
    * // 移除元素a.xx元素的所有子元素