@whitesev/domutils 1.3.3 → 1.3.5

package/dist/index.esm.js

@@ -593,11 +593,18 @@ class DOMUtilsEvent {
     click(element, handler, details, useDispatchToTriggerEvent) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.click($ele, handler, details, useDispatchToTriggerEvent);
+            });
+            return;
+        }
         if (handler == null) {
             DOMUtilsContext.trigger(element, "click", details, useDispatchToTriggerEvent);
         }
@@ -627,6 +634,13 @@ class DOMUtilsEvent {
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.focus($ele, handler, details, useDispatchToTriggerEvent);
+            });
+            return;
+        }
         if (handler === null) {
             DOMUtilsContext.trigger(element, "blur", details, useDispatchToTriggerEvent);
         }
@@ -651,11 +665,18 @@ class DOMUtilsEvent {
     focus(element, handler, details, useDispatchToTriggerEvent) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.focus($ele, handler, details, useDispatchToTriggerEvent);
+            });
+            return;
+        }
         if (handler == null) {
             DOMUtilsContext.trigger(element, "focus", details, useDispatchToTriggerEvent);
         }
@@ -680,18 +701,25 @@ class DOMUtilsEvent {
     hover(element, handler, option) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.hover($ele, handler, option);
+            });
+            return;
+        }
         DOMUtilsContext.on(element, "mouseenter", null, handler, option);
         DOMUtilsContext.on(element, "mouseleave", null, handler, option);
     }
     /**
      * 当按键松开时触发事件
      * keydown - > keypress - > keyup
-     * @param target 当前元素
+     * @param element 当前元素
      * @param handler 事件处理函数
      * @param option 配置
      * @example
@@ -703,20 +731,27 @@ class DOMUtilsEvent {
      *   console.log("按键松开");
      * })
      */
-    keyup(target, handler, option) {
+    keyup(element, handler, option) {
         let DOMUtilsContext = this;
-        if (target == null) {
+        if (element == null) {
             return;
         }
-        if (typeof target === "string") {
-            target = DOMUtilsContext.windowApi.document.querySelector(target);
+        if (typeof element === "string") {
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
+        }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.keyup($ele, handler, option);
+            });
+            return;
         }
-        DOMUtilsContext.on(target, "keyup", null, handler, option);
+        DOMUtilsContext.on(element, "keyup", null, handler, option);
     }
     /**
      * 当按键按下时触发事件
      * keydown - > keypress - > keyup
-     * @param target 目标
+     * @param element 目标
      * @param handler 事件处理函数
      * @param option 配置
      * @example
@@ -728,20 +763,27 @@ class DOMUtilsEvent {
      *   console.log("按键按下");
      * })
      */
-    keydown(target, handler, option) {
+    keydown(element, handler, option) {
         let DOMUtilsContext = this;
-        if (target == null) {
+        if (element == null) {
             return;
         }
-        if (typeof target === "string") {
-            target = DOMUtilsContext.windowApi.document.querySelector(target);
+        if (typeof element === "string") {
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
+        }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.keydown($ele, handler, option);
+            });
+            return;
         }
-        DOMUtilsContext.on(target, "keydown", null, handler, option);
+        DOMUtilsContext.on(element, "keydown", null, handler, option);
     }
     /**
      * 当按键按下时触发事件
      * keydown - > keypress - > keyup
-     * @param target 目标
+     * @param element 目标
      * @param handler 事件处理函数
      * @param option 配置
      * @example
@@ -753,20 +795,27 @@ class DOMUtilsEvent {
      *   console.log("按键按下");
      * })
      */
-    keypress(target, handler, option) {
+    keypress(element, handler, option) {
         let DOMUtilsContext = this;
-        if (target == null) {
+        if (element == null) {
             return;
         }
-        if (typeof target === "string") {
-            target = DOMUtilsContext.windowApi.document.querySelector(target);
+        if (typeof element === "string") {
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
+        }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.keypress($ele, handler, option);
+            });
+            return;
         }
-        DOMUtilsContext.on(target, "keypress", null, handler, option);
+        DOMUtilsContext.on(element, "keypress", null, handler, option);
     }
     /**
      * 监听某个元素键盘按键事件或window全局按键事件
      * 按下有值的键时触发，按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件，再触发keypress事件。
-     * @param target 需要监听的对象，可以是全局Window或者某个元素
+     * @param element 需要监听的对象，可以是全局Window或者某个元素
      * @param eventName 事件名，默认keypress
      * @param callback 自己定义的回调事件，参数1为当前的key，参数2为组合按键，数组类型，包含ctrl、shift、alt和meta（win键或mac的cmd键）
      * @param options 监听事件的配置
@@ -826,7 +875,11 @@ class DOMUtilsEvent {
       搜索		170
       收藏		171
      **/
-    listenKeyboard(target, eventName = "keypress", callback, options) {
+    listenKeyboard(element, eventName = "keypress", callback, options) {
+        let DOMUtilsContext = this;
+        if (typeof element === "string") {
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
+        }
         let keyboardEventCallBack = function (event) {
             /** 键名 */
             let keyName = event.key || event.code;
@@ -850,29 +903,49 @@ class DOMUtilsEvent {
                 callback(keyName, keyValue, otherCodeList, event);
             }
         };
-        this.on(target, eventName, keyboardEventCallBack, options);
+        DOMUtilsContext.on(element, eventName, keyboardEventCallBack, options);
         return {
             removeListen: () => {
-                this.off(target, eventName, keyboardEventCallBack, options);
+                DOMUtilsContext.off(element, eventName, keyboardEventCallBack, options);
             },
         };
     }
 }
 
+/**
+ * 判断是否是元素列表
+ * @param $ele
+ */
+const isNodeList = ($ele) => {
+    return Array.isArray($ele) || $ele instanceof NodeList;
+};
 class DOMUtils extends DOMUtilsEvent {
     constructor(option) {
         super(option);
     }
     /** 版本号 */
-    version = "2024.9.23";
+    version = "2024.10.22";
     attr(element, attrName, attrValue) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            if (attrValue == null) {
+                // 获取属性
+                return DOMUtilsContext.attr(element[0], attrName, attrValue);
+            }
+            else {
+                // 设置属性
+                element.forEach(($ele) => {
+                    DOMUtilsContext.attr($ele, attrName, attrValue);
+                });
+                return;
+            }
+        }
         if (attrValue == null) {
             return element.getAttribute(attrName);
         }
@@ -961,14 +1034,40 @@ class DOMUtils extends DOMUtilsEvent {
             return propertyValue;
         }
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            if (typeof property === "string") {
+                if (value == null) {
+                    // 获取属性
+                    return DOMUtilsContext.css(element[0], property);
+                }
+                else {
+                    // 设置属性
+                    element.forEach(($ele) => {
+                        DOMUtilsContext.css($ele, property);
+                    });
+                    return;
+                }
+            }
+            else if (typeof property === "object") {
+                // 设置属性
+                element.forEach(($ele) => {
+                    DOMUtilsContext.css($ele, property);
+                });
+                return;
+            }
+            else ;
+            return;
+        }
         if (typeof property === "string") {
             if (value == null) {
-                return getComputedStyle(element).getPropertyValue(property);
+                return DOMUtilsContext.windowApi.globalThis
+                    .getComputedStyle(element)
+                    .getPropertyValue(property);
             }
             else {
                 if (value === "string" && value.includes("!important")) {
@@ -992,15 +1091,29 @@ class DOMUtils extends DOMUtilsEvent {
                 }
             }
         }
+        else ;
     }
     text(element, text) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            if (text == null) {
+                // 获取
+                return DOMUtilsContext.text(element[0]);
+            }
+            else {
+                // 设置
+                element.forEach(($ele) => {
+                    DOMUtilsContext.text($ele, text);
+                });
+            }
+            return;
+        }
         if (text == null) {
             return element.textContent || element.innerText;
         }
@@ -1019,16 +1132,31 @@ class DOMUtils extends DOMUtilsEvent {
     html(element, html) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            if (html == null) {
+                // 获取
+                return DOMUtilsContext.html(element[0]);
+            }
+            else {
+                // 设置
+                element.forEach(($ele) => {
+                    DOMUtilsContext.html($ele, html);
+                });
+            }
+            return;
+        }
         if (html == null) {
+            // 获取
             return element.innerHTML;
         }
         else {
-            if (html instanceof Node) {
+            // 设置
+            if (html instanceof Element) {
                 html = html.innerHTML;
             }
             if ("innerHTML" in element) {
@@ -1050,7 +1178,7 @@ class DOMUtils extends DOMUtilsEvent {
             recovery();
             return transformInfo;
         }
-        let elementTransform = getComputedStyle(element).transform;
+        let elementTransform = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element).transform;
         if (elementTransform != null &&
             elementTransform !== "none" &&
             elementTransform !== "") {
@@ -1074,12 +1202,26 @@ class DOMUtils extends DOMUtilsEvent {
     val(element, value) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            if (value == null) {
+                // 获取
+                return DOMUtilsContext.val(element[0]);
+            }
+            else {
+                // 设置
+                element.forEach(($ele) => {
+                    DOMUtilsContext.val($ele, value);
+                });
+            }
+            return;
+        }
         if (value == null) {
+            // 获取
             if (element.localName === "input" &&
                 (element.type === "checkbox" || element.type === "radio")) {
                 return element.checked;
@@ -1089,6 +1231,7 @@ class DOMUtils extends DOMUtilsEvent {
             }
         }
         else {
+            // 设置
             if (element.localName === "input" &&
                 (element.type === "checkbox" || element.type === "radio")) {
                 element.checked = !!value;
@@ -1100,17 +1243,30 @@ class DOMUtils extends DOMUtilsEvent {
     }
     prop(element, propName, propValue) {
         let DOMUtilsContext = this;
+        if (typeof element === "string") {
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
+        }
         if (element == null) {
             return;
         }
-        if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+        if (isNodeList(element)) {
+            if (propValue == null) {
+                // 获取
+                return DOMUtilsContext.prop(element[0], propName);
+            }
+            else {
+                // 设置
+                element.forEach(($ele) => {
+                    DOMUtilsContext.prop($ele, propName, propValue);
+                });
+            }
+            return;
         }
         if (propValue == null) {
-            return element[propName];
+            return Reflect.get(element, propName);
         }
         else {
-            element[propName] = propValue;
+            Reflect.set(element, propName, propValue);
         }
     }
     /**
@@ -1125,11 +1281,18 @@ class DOMUtils extends DOMUtilsEvent {
     removeAttr(element, attrName) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.removeAttr($ele, attrName);
+            });
+            return;
+        }
         element.removeAttribute(attrName);
     }
     /**
@@ -1144,15 +1307,30 @@ class DOMUtils extends DOMUtilsEvent {
     removeClass(element, className) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
-        if (className == null) {
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.removeClass($ele, className);
+            });
             return;
         }
-        element.classList.remove(className);
+        if (className == null) {
+            // 清空全部className
+            element.className = "";
+        }
+        else {
+            if (!Array.isArray(className)) {
+                className = className.split(" ");
+            }
+            className.forEach((itemClassName) => {
+                element.classList.remove(itemClassName);
+            });
+        }
     }
     /**
      * 移除元素的属性
@@ -1166,11 +1344,18 @@ class DOMUtils extends DOMUtilsEvent {
     removeProp(element, propName) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.removeProp($ele, propName);
+            });
+            return;
+        }
         DOMUtilsCommonUtils.delete(element, propName);
     }
     /**
@@ -1185,22 +1370,22 @@ class DOMUtils extends DOMUtilsEvent {
     replaceWith(element, newElement) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
-        if (typeof newElement === "string") {
-            newElement = DOMUtilsContext.parseHTML(newElement, false, false);
-        }
-        if (element instanceof NodeList || element instanceof Array) {
-            element.forEach((item) => {
-                DOMUtilsContext.replaceWith(item, newElement);
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.replaceWith($ele, newElement);
             });
+            return;
         }
-        else {
-            element.parentElement.replaceChild(newElement, element);
+        if (typeof newElement === "string") {
+            newElement = DOMUtilsContext.parseHTML(newElement, false, false);
         }
+        element.parentElement.replaceChild(newElement, element);
     }
     /**
      * 给元素添加class
@@ -1214,12 +1399,27 @@ class DOMUtils extends DOMUtilsEvent {
     addClass(element, className) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
-        element.classList.add(className);
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.addClass($ele, className);
+            });
+            return;
+        }
+        if (!Array.isArray(className)) {
+            className = className.split(" ");
+        }
+        className.forEach((itemClassName) => {
+            if (itemClassName.trim() == "") {
+                return;
+            }
+            element.classList.add(itemClassName);
+        });
     }
     /**
      * 函数在元素内部末尾添加子元素或HTML字符串
@@ -1233,11 +1433,18 @@ class DOMUtils extends DOMUtilsEvent {
     append(element, content) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.append($ele, content);
+            });
+            return;
+        }
         function elementAppendChild(ele, text) {
             if (typeof content === "string") {
                 ele.insertAdjacentHTML("beforeend", text);
@@ -1251,7 +1458,7 @@ class DOMUtils extends DOMUtilsEvent {
             let fragment = DOMUtilsContext.windowApi.document.createDocumentFragment();
             content.forEach((ele) => {
                 if (typeof ele === "string") {
-                    ele = this.parseHTML(ele, true, false);
+                    ele = DOMUtilsContext.parseHTML(ele, true, false);
                 }
                 fragment.appendChild(ele);
             });
@@ -1273,11 +1480,18 @@ class DOMUtils extends DOMUtilsEvent {
     prepend(element, content) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.prepend($ele, content);
+            });
+            return;
+        }
         if (typeof content === "string") {
             element.insertAdjacentHTML("afterbegin", content);
         }
@@ -1303,11 +1517,18 @@ class DOMUtils extends DOMUtilsEvent {
     after(element, content) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.after($ele, content);
+            });
+            return;
+        }
         if (typeof content === "string") {
             element.insertAdjacentHTML("afterend", content);
         }
@@ -1335,11 +1556,18 @@ class DOMUtils extends DOMUtilsEvent {
     before(element, content) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.before($ele, content);
+            });
+            return;
+        }
         if (typeof content === "string") {
             element.insertAdjacentHTML("beforebegin", content);
         }
@@ -1355,30 +1583,28 @@ class DOMUtils extends DOMUtilsEvent {
     }
     /**
      * 移除元素
-     * @param target 目标元素
+     * @param element 目标元素
      * @example
      * // 元素a.xx前面添加一个元素
      * DOMUtils.remove(document.querySelector("a.xx"))
      * DOMUtils.remove(document.querySelectorAll("a.xx"))
      * DOMUtils.remove("a.xx")
      * */
-    remove(target) {
+    remove(element) {
         let DOMUtilsContext = this;
-        if (typeof target === "string") {
-            target = DOMUtilsContext.windowApi.document.querySelectorAll(target);
+        if (typeof element === "string") {
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
-        if (target == null) {
+        if (element == null) {
             return;
         }
-        if (target instanceof NodeList || target instanceof Array) {
-            target = target;
-            for (const element of target) {
-                DOMUtilsContext.remove(element);
-            }
-        }
-        else {
-            target.remove();
+        if (isNodeList(element)) {
+            element.forEach(($ele) => {
+                DOMUtilsContext.remove($ele);
+            });
+            return;
         }
+        element.remove();
     }
     /**
      * 移除元素的所有子元素
@@ -1391,11 +1617,18 @@ class DOMUtils extends DOMUtilsEvent {
     empty(element) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.empty($ele);
+            });
+            return;
+        }
         element.innerHTML = "";
     }
     /**
@@ -1426,7 +1659,8 @@ class DOMUtils extends DOMUtilsEvent {
     width(element, isShow = false) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element =
+                DOMUtilsContext.windowApi.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -1538,7 +1772,7 @@ class DOMUtils extends DOMUtilsEvent {
         }
         element = element;
         if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
-            let style = getComputedStyle(element, null);
+            let style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
             let marginLeft = DOMUtilsCommonUtils.getStyleValue(style, "marginLeft");
             let marginRight = DOMUtilsCommonUtils.getStyleValue(style, "marginRight");
             return element.offsetWidth + marginLeft + marginRight;
@@ -1564,7 +1798,7 @@ class DOMUtils extends DOMUtilsEvent {
         }
         element = element;
         if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
-            let style = getComputedStyle(element, null);
+            let style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
             let marginTop = DOMUtilsCommonUtils.getStyleValue(style, "marginTop");
             let marginBottom = DOMUtilsCommonUtils.getStyleValue(style, "marginBottom");
             return element.offsetHeight + marginTop + marginBottom;
@@ -1591,11 +1825,18 @@ class DOMUtils extends DOMUtilsEvent {
     animate(element, styles, duration = 1000, callback = null) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.animate($ele, styles, duration, callback);
+            });
+            return;
+        }
         if (typeof duration !== "number" || duration <= 0) {
             throw new TypeError("duration must be a positive number");
         }
@@ -1612,7 +1853,9 @@ class DOMUtils extends DOMUtilsEvent {
         let from = {};
         let to = {};
         for (let prop in styles) {
-            from[prop] = element.style[prop] || getComputedStyle(element)[prop];
+            from[prop] =
+                element.style[prop] ||
+                    DOMUtilsContext.windowApi.globalThis.getComputedStyle(element)[prop];
             to[prop] = styles[prop];
         }
         let timer = setInterval(function () {
@@ -1644,18 +1887,26 @@ class DOMUtils extends DOMUtilsEvent {
     wrap(element, wrapperHTML) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.wrap($ele, wrapperHTML);
+            });
+            return;
+        }
         element = element;
         // 创建一个新的div元素，并将wrapperHTML作为其innerHTML
         let wrapper = DOMUtilsContext.windowApi.document.createElement("div");
         wrapper.innerHTML = wrapperHTML;
         let wrapperFirstChild = wrapper.firstChild;
         // 将要包裹的元素插入目标元素前面
-        element.parentElement.insertBefore(wrapperFirstChild, element);
+        let parentElement = element.parentElement;
+        parentElement.insertBefore(wrapperFirstChild, element);
         // 将要包裹的元素移动到wrapper中
         wrapperFirstChild.appendChild(element);
     }
@@ -1735,6 +1986,8 @@ class DOMUtils extends DOMUtilsEvent {
     }
     parseHTML(html, useParser = false, isComplete = false) {
         let DOMUtilsContext = this;
+        // 去除html前后的空格
+        html = html.trim();
         function parseHTMLByDOMParser() {
             let parser = new DOMParser();
             if (isComplete) {
@@ -1761,16 +2014,61 @@ class DOMUtils extends DOMUtilsEvent {
             return parseHTMLByCreateDom();
         }
     }
+    /**
+     * 序列化表单元素
+     * @param $form 表单元素
+     * @example
+     * DOMUtils.serialize(document.querySelector("form"))
+     * > xxx=xxx&aaa=
+     */
+    serialize($form) {
+        const elements = $form.elements;
+        let serializedArray = [];
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            if (element.name &&
+                !element.disabled &&
+                (element.checked ||
+                    [
+                        "text",
+                        "hidden",
+                        "password",
+                        "textarea",
+                        "select-one",
+                        "select-multiple",
+                    ].includes(element.type))) {
+                if (element.type === "select-multiple") {
+                    for (let j = 0; j < element.options.length; j++) {
+                        if (element.options[j].selected) {
+                            serializedArray.push({
+                                name: element.name,
+                                value: element.options[j].value,
+                            });
+                        }
+                    }
+                }
+                else {
+                    serializedArray.push({ name: element.name, value: element.value });
+                }
+            }
+        }
+        return serializedArray
+            .map((item) => `${encodeURIComponent(item.name)}=${encodeURIComponent(item.value)}`)
+            .join("&");
+    }
     /**
      * 显示元素
      * @param target 当前元素
+     * @param checkVisiblie 是否检测元素是否显示
+     * + true （默认）如果检测到还未显示，则强制使用display: unset !important;
+     * + false 不检测，直接设置display属性为空
      * @example
      * // 显示a.xx元素
      * DOMUtils.show(document.querySelector("a.xx"))
      * DOMUtils.show(document.querySelectorAll("a.xx"))
      * DOMUtils.show("a.xx")
      */
-    show(target) {
+    show(target, checkVisiblie = true) {
         let DOMUtilsContext = this;
         if (target == null) {
             return;
@@ -1781,28 +2079,33 @@ class DOMUtils extends DOMUtilsEvent {
         if (target instanceof NodeList || target instanceof Array) {
             target = target;
             for (const element of target) {
-                DOMUtilsContext.show(element);
+                DOMUtilsContext.show(element, checkVisiblie);
             }
         }
         else {
             target = target;
             target.style.display = "";
-            if (!DOMUtilsCommonUtils.isShow(target)) {
-                /* 仍然是不显示，尝试使用强覆盖 */
-                target.style.setProperty("display", "unset", "important");
+            if (checkVisiblie) {
+                if (!DOMUtilsCommonUtils.isShow(target)) {
+                    /* 仍然是不显示，尝试使用强覆盖 */
+                    target.style.setProperty("display", "unset", "important");
+                }
             }
         }
     }
     /**
      * 隐藏元素
      * @param target 当前元素
+     * @param checkVisiblie 是否检测元素是否显示
+     * + true （默认）如果检测到显示，则强制使用display: none !important;
+     * + false 不检测，直接设置display属性为none
      * @example
      * // 隐藏a.xx元素
      * DOMUtils.hide(document.querySelector("a.xx"))
      * DOMUtils.hide(document.querySelectorAll("a.xx"))
      * DOMUtils.hide("a.xx")
      */
-    hide(target) {
+    hide(target, checkVisiblie = true) {
         let DOMUtilsContext = this;
         if (target == null) {
             return;
@@ -1813,15 +2116,17 @@ class DOMUtils extends DOMUtilsEvent {
         if (target instanceof NodeList || target instanceof Array) {
             target = target;
             for (const element of target) {
-                DOMUtilsContext.hide(element);
+                DOMUtilsContext.hide(element, checkVisiblie);
             }
         }
         else {
             target = target;
             target.style.display = "none";
-            if (DOMUtilsCommonUtils.isShow(target)) {
-                /* 仍然是显示，尝试使用强覆盖 */
-                target.style.setProperty("display", "none", "important");
+            if (checkVisiblie) {
+                if (DOMUtilsCommonUtils.isShow(target)) {
+                    /* 仍然是显示，尝试使用强覆盖 */
+                    target.style.setProperty("display", "none", "important");
+                }
             }
         }
     }
@@ -1845,9 +2150,15 @@ class DOMUtils extends DOMUtilsEvent {
         }
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
+        }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.fadeIn($ele, duration, callback);
+            });
+            return;
         }
-        element = element;
         element.style.opacity = "0";
         element.style.display = "";
         let start = null;
@@ -1890,9 +2201,15 @@ class DOMUtils extends DOMUtilsEvent {
             return;
         }
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
+        }
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.fadeOut($ele, duration, callback);
+            });
+            return;
         }
-        element = element;
         element.style.opacity = "1";
         let start = null;
         let timer = null;
@@ -1918,24 +2235,34 @@ class DOMUtils extends DOMUtilsEvent {
     /**
      * 切换元素的显示和隐藏状态
      * @param element 当前元素
+     * @param checkVisiblie 是否检测元素是否显示
      * @example
      * // 如果元素a.xx当前是隐藏，则显示，如果是显示，则隐藏
      * DOMUtils.toggle(document.querySelector("a.xx"))
      * DOMUtils.toggle("a.xx")
      */
-    toggle(element) {
+    toggle(element, checkVisiblie) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsContext.windowApi.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
         }
-        if (getComputedStyle(element).getPropertyValue("display") === "none") {
-            DOMUtilsContext.show(element);
+        if (isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                DOMUtilsContext.toggle($ele);
+            });
+            return;
+        }
+        if (DOMUtilsContext.windowApi.globalThis
+            .getComputedStyle(element)
+            .getPropertyValue("display") === "none") {
+            DOMUtilsContext.show(element, checkVisiblie);
         }
         else {
-            DOMUtilsContext.hide(element);
+            DOMUtilsContext.hide(element, checkVisiblie);
         }
     }
     /**