@whitesev/domutils 1.3.4 → 1.3.6

package/dist/index.umd.js

@@ -599,11 +599,18 @@
         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);
             }
@@ -633,6 +640,13 @@
             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);
             }
@@ -657,11 +671,18 @@
         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);
             }
@@ -686,18 +707,25 @@
         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
@@ -709,20 +737,27 @@
          *   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);
             }
-            DOMUtilsContext.on(target, "keyup", null, handler, option);
+            if (isNodeList(element)) {
+                // 设置
+                element.forEach(($ele) => {
+                    DOMUtilsContext.keyup($ele, handler, option);
+                });
+                return;
+            }
+            DOMUtilsContext.on(element, "keyup", null, handler, option);
         }
         /**
          * 当按键按下时触发事件
          * keydown - > keypress - > keyup
-         * @param target 目标
+         * @param element 目标
          * @param handler 事件处理函数
          * @param option 配置
          * @example
@@ -734,20 +769,27 @@
          *   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);
             }
-            DOMUtilsContext.on(target, "keydown", null, handler, option);
+            if (isNodeList(element)) {
+                // 设置
+                element.forEach(($ele) => {
+                    DOMUtilsContext.keydown($ele, handler, option);
+                });
+                return;
+            }
+            DOMUtilsContext.on(element, "keydown", null, handler, option);
         }
         /**
          * 当按键按下时触发事件
          * keydown - > keypress - > keyup
-         * @param target 目标
+         * @param element 目标
          * @param handler 事件处理函数
          * @param option 配置
          * @example
@@ -759,20 +801,27 @@
          *   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 监听事件的配置
@@ -832,7 +881,11 @@
           搜索		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;
@@ -856,29 +909,90 @@
                     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);
                 },
             };
         }
+        selector(selector) {
+            return this.selectorAll(selector)[0];
+        }
+        selectorAll(selector) {
+            const context = this;
+            selector = selector.trim();
+            if (selector.match(/[^\s]{1}:empty$/gi)) {
+                // empty 语法
+                selector = selector.replace(/:empty$/gi, "");
+                return Array.from(context.windowApi.document.querySelectorAll(selector)).filter(($ele) => {
+                    return $ele?.innerHTML?.trim() === "";
+                });
+            }
+            else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/gi) ||
+                selector.match(/[^\s]{1}:contains\('(.*)'\)$/gi)) {
+                // contains 语法
+                let textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
+                let text = textMatch[2];
+                selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
+                return Array.from(context.windowApi.document.querySelectorAll(selector)).filter(($ele) => {
+                    // @ts-ignore
+                    return ($ele?.textContent || $ele?.innerText)?.includes(text);
+                });
+            }
+            else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/gi) ||
+                selector.match(/[^\s]{1}:regexp\('(.*)'\)$/gi)) {
+                // regexp 语法
+                let textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
+                let text = textMatch[2];
+                let regexp = new RegExp(text);
+                selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
+                return Array.from(context.windowApi.document.querySelectorAll(selector)).filter(($ele) => {
+                    // @ts-ignore
+                    return Boolean(($ele?.textContent || $ele?.innerText)?.match(regexp));
+                });
+            }
+            else {
+                // 普通语法
+                return Array.from(context.windowApi.document.querySelectorAll(selector));
+            }
+        }
     }
 
+    /**
+     * 判断是否是元素列表
+     * @param $ele
+     */
+    const isNodeList = ($ele) => {
+        return Array.isArray($ele) || $ele instanceof NodeList;
+    };
     class DOMUtils extends DOMUtilsEvent {
         constructor(option) {
             super(option);
         }
         /** 版本号 */
-        version = "2024.10.19";
+        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);
             }
@@ -967,14 +1081,40 @@
                 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")) {
@@ -998,15 +1138,29 @@
                     }
                 }
             }
+            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;
             }
@@ -1025,15 +1179,30 @@
         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 Element) {
                     html = html.innerHTML;
                 }
@@ -1056,7 +1225,7 @@
                 recovery();
                 return transformInfo;
             }
-            let elementTransform = getComputedStyle(element).transform;
+            let elementTransform = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element).transform;
             if (elementTransform != null &&
                 elementTransform !== "none" &&
                 elementTransform !== "") {
@@ -1080,12 +1249,26 @@
         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;
@@ -1095,6 +1278,7 @@
                 }
             }
             else {
+                // 设置
                 if (element.localName === "input" &&
                     (element.type === "checkbox" || element.type === "radio")) {
                     element.checked = !!value;
@@ -1106,17 +1290,30 @@
         }
         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);
             }
         }
         /**
@@ -1131,11 +1328,18 @@
         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);
         }
         /**
@@ -1150,15 +1354,30 @@
         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);
+                });
+            }
         }
         /**
          * 移除元素的属性
@@ -1172,11 +1391,18 @@
         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);
         }
         /**
@@ -1191,22 +1417,22 @@
         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
@@ -1220,12 +1446,27 @@
         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字符串
@@ -1239,11 +1480,18 @@
         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);
@@ -1257,7 +1505,7 @@
                 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);
                 });
@@ -1279,11 +1527,18 @@
         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);
             }
@@ -1309,11 +1564,18 @@
         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);
             }
@@ -1341,11 +1603,18 @@
         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);
             }
@@ -1361,30 +1630,28 @@
         }
         /**
          * 移除元素
-         * @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();
         }
         /**
          * 移除元素的所有子元素
@@ -1397,11 +1664,18 @@
         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 = "";
         }
         /**
@@ -1432,7 +1706,8 @@
         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;
@@ -1544,7 +1819,7 @@
             }
             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;
@@ -1570,7 +1845,7 @@
             }
             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;
@@ -1597,11 +1872,18 @@
         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");
             }
@@ -1618,7 +1900,9 @@
             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 () {
@@ -1650,18 +1934,26 @@
         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);
         }
@@ -1741,6 +2033,8 @@
         }
         parseHTML(html, useParser = false, isComplete = false) {
             let DOMUtilsContext = this;
+            // 去除html前后的空格
+            html = html.trim();
             function parseHTMLByDOMParser() {
                 let parser = new DOMParser();
                 if (isComplete) {
@@ -1767,16 +2061,61 @@
                 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;
@@ -1787,28 +2126,33 @@
             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;
@@ -1819,15 +2163,17 @@
             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");
+                    }
                 }
             }
         }
@@ -1851,9 +2197,15 @@
             }
             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;
@@ -1896,9 +2248,15 @@
                 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;
@@ -1924,24 +2282,34 @@
         /**
          * 切换元素的显示和隐藏状态
          * @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);
             }
         }
         /**