@whitesev/domutils 1.6.8 → 1.7.0

package/dist/index.umd.js

@@ -308,7 +308,7 @@
     const setTimeout$1 = (...args) => loadOrReturnBroker().setTimeout(...args);
 
     /** 通用工具类 */
-    const DOMUtilsCommonUtils = {
+    const CommonUtils = {
         windowApi: new WindowApi({
             document: document,
             window: window,
@@ -320,15 +320,16 @@
         }),
         /**
          * 判断元素是否已显示或已连接
-         * @param element
+         * @param $el
          */
-        isShow(element) {
-            return Boolean(element.getClientRects().length);
+        isShow($el) {
+            return Boolean($el.getClientRects().length);
         },
         /**
-         * 获取安全的html
+         * 创建安全的html
+         * @param text 字符串
          */
-        getSafeHTML(text) {
+        createSafeHTML(text) {
             if (window.trustedTypes) {
                 const policy = window.trustedTypes.createPolicy("safe-innerHTML", {
                     createHTML: (html) => html,
@@ -346,14 +347,14 @@
          */
         setSafeHTML($el, text) {
             // 创建 TrustedHTML 策略（需 CSP 允许）
-            $el.innerHTML = this.getSafeHTML(text);
+            $el.innerHTML = this.createSafeHTML(text);
         },
         /**
-         * 用于显示元素并获取它的高度宽度等其它属性
-         * @param element
+         * 用于强制显示元素并获取它的高度宽度等其它属性
+         * @param $el
          */
-        showElement(element) {
-            const dupNode = element.cloneNode(true);
+        forceShow($el) {
+            const dupNode = $el.cloneNode(true);
             dupNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
             this.windowApi.document.documentElement.appendChild(dupNode);
             return {
@@ -429,6 +430,19 @@
             }
             return true;
         },
+        /**
+         * 判断对象是否是元素
+         * @param $el
+         * @returns
+         * + true 是元素
+         * + false 不是元素
+         * @example
+         * DOMUtilsCommonUtils.isDOM(document.querySelector("a"))
+         * > true
+         */
+        isDOM($el) {
+            return $el instanceof Node;
+        },
         /**
          * 删除对象上的属性
          * @param target
@@ -452,72 +466,1159 @@
             catch {
                 return this.windowApi.setTimeout(callback, timeout);
             }
-        },
+        },
+        /**
+         * 配合 .setTimeout 使用
+         */
+        clearTimeout(timeId) {
+            try {
+                if (timeId != null) {
+                    clearTimeout$1(timeId);
+                }
+            }
+            catch {
+                // TODO
+            }
+            finally {
+                this.windowApi.clearTimeout(timeId);
+            }
+        },
+        /**
+         * 自动使用 Worker 执行 setInterval
+         */
+        setInterval(callback, timeout = 0) {
+            try {
+                return setInterval$1(callback, timeout);
+            }
+            catch {
+                return this.windowApi.setInterval(callback, timeout);
+            }
+        },
+        /**
+         * 配合 .setInterval 使用
+         */
+        clearInterval(timeId) {
+            try {
+                if (timeId != null) {
+                    clearInterval$1(timeId);
+                }
+            }
+            catch {
+                // TODO
+            }
+            finally {
+                this.windowApi.clearInterval(timeId);
+            }
+        },
+        /**
+         * 判断是否是元素列表
+         * @param $ele
+         */
+        isNodeList($ele) {
+            return Array.isArray($ele) || $ele instanceof NodeList;
+        },
+        /** 获取 animationend 在各个浏览器的兼容名 */
+        getAnimationEndNameList() {
+            return ["webkitAnimationEnd", "mozAnimationEnd", "MSAnimationEnd", "oanimationend", "animationend"];
+        },
+        /** 获取 transitionend 在各个浏览器的兼容名 */
+        getTransitionEndNameList() {
+            return ["webkitTransitionEnd", "mozTransitionEnd", "MSTransitionEnd", "otransitionend", "transitionend"];
+        },
+    };
+
+    const version = "1.7.0";
+
+    /* 数据 */
+    const GlobalData = {
+        /** .on添加在元素存储的事件 */
+        domEventSymbol: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
+    };
+
+    class ElementSelector {
+        windowApi;
+        constructor(windowApiOption) {
+            this.windowApi = new WindowApi(windowApiOption);
+        }
+        selector(selector, parent) {
+            return this.selectorAll(selector, parent)[0];
+        }
+        selectorAll(selector, parent) {
+            const context = this;
+            parent = parent || context.windowApi.document;
+            selector = selector.trim();
+            if (selector.match(/[^\s]{1}:empty$/gi)) {
+                // empty 语法
+                selector = selector.replace(/:empty$/gi, "");
+                return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
+                    return $ele?.innerHTML?.trim() === "";
+                });
+            }
+            else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
+                // contains 语法
+                const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
+                const text = textMatch[2];
+                selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
+                return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
+                    // @ts-ignore
+                    return ($ele?.textContent || $ele?.innerText)?.includes(text);
+                });
+            }
+            else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
+                // regexp 语法
+                const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
+                let pattern = textMatch[2];
+                const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
+                let flags = "";
+                if (flagMatch) {
+                    pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
+                    flags = flagMatch[3];
+                }
+                const regexp = new RegExp(pattern, flags);
+                selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
+                return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
+                    // @ts-ignore
+                    return Boolean(($ele?.textContent || $ele?.innerText)?.match(regexp));
+                });
+            }
+            else {
+                // 普通语法
+                return Array.from(parent.querySelectorAll(selector));
+            }
+        }
+        /**
+         * 匹配元素，可使用以下的额外语法
+         *
+         * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
+         * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
+         * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
+         * @param $el 元素
+         * @param selector 选择器
+         * @example
+         * DOMUtils.matches("div:contains('测试')")
+         * > true
+         * @example
+         * DOMUtils.matches("div:empty")
+         * > true
+         * @example
+         * DOMUtils.matches("div:regexp('^xxxx$')")
+         * > true
+         * @example
+         * DOMUtils.matches("div:regexp(/^xxx/ig)")
+         * > false
+         */
+        matches($el, selector) {
+            selector = selector.trim();
+            if ($el == null) {
+                return false;
+            }
+            if (selector.match(/[^\s]{1}:empty$/gi)) {
+                // empty 语法
+                selector = selector.replace(/:empty$/gi, "");
+                return $el.matches(selector) && $el?.innerHTML?.trim() === "";
+            }
+            else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
+                // contains 语法
+                const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
+                const text = textMatch[2];
+                selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
+                // @ts-ignore
+                let content = $el?.textContent || $el?.innerText;
+                if (typeof content !== "string") {
+                    content = "";
+                }
+                return $el.matches(selector) && content?.includes(text);
+            }
+            else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
+                // regexp 语法
+                const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
+                let pattern = textMatch[2];
+                const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
+                let flags = "";
+                if (flagMatch) {
+                    pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
+                    flags = flagMatch[3];
+                }
+                const regexp = new RegExp(pattern, flags);
+                selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
+                // @ts-ignore
+                let content = $el?.textContent || $el?.innerText;
+                if (typeof content !== "string") {
+                    content = "";
+                }
+                return $el.matches(selector) && Boolean(content?.match(regexp));
+            }
+            else {
+                // 普通语法
+                return $el.matches(selector);
+            }
+        }
+        closest($el, selector) {
+            selector = selector.trim();
+            if (selector.match(/[^\s]{1}:empty$/gi)) {
+                // empty 语法
+                selector = selector.replace(/:empty$/gi, "");
+                const $closest = $el?.closest(selector);
+                if ($closest && $closest?.innerHTML?.trim() === "") {
+                    return $closest;
+                }
+                return null;
+            }
+            else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
+                // contains 语法
+                const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
+                const text = textMatch[2];
+                selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
+                const $closest = $el?.closest(selector);
+                if ($closest) {
+                    // @ts-ignore
+                    const content = $el?.textContent || $el?.innerText;
+                    if (typeof content === "string" && content.includes(text)) {
+                        return $closest;
+                    }
+                }
+                return null;
+            }
+            else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
+                // regexp 语法
+                const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
+                let pattern = textMatch[2];
+                const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
+                let flags = "";
+                if (flagMatch) {
+                    pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
+                    flags = flagMatch[3];
+                }
+                const regexp = new RegExp(pattern, flags);
+                selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
+                const $closest = $el?.closest(selector);
+                if ($closest) {
+                    // @ts-ignore
+                    const content = $el?.textContent || $el?.innerText;
+                    if (typeof content === "string" && content.match(regexp)) {
+                        return $closest;
+                    }
+                }
+                return null;
+            }
+            else {
+                // 普通语法
+                const $closest = $el?.closest(selector);
+                return $closest;
+            }
+        }
+    }
+    const elementSelector = new ElementSelector();
+
+    /**
+     * 判断对象是否是元素
+     * @param $el
+     * @returns
+     * + true 是元素
+     * + false 不是元素
+     * @example
+     * DOMUtilsCommonUtils.isDOM(document.querySelector("a"))
+     * > true
+     */
+    const isDOM = function ($el) {
+        return $el instanceof Node;
+    };
+    class Utils {
+        windowApi;
+        constructor(option) {
+            this.windowApi = new WindowApi(option);
+        }
+        /**
+         * 判断对象是否是jQuery对象
+         * @param target
+         * @returns
+         * + true 是jQuery对象
+         * + false 不是jQuery对象
+         * @example
+         * Utils.isJQuery($("a"))
+         * > true
+         */
+        isJQuery(target) {
+            let result = false;
+            if (typeof jQuery === "object" && target instanceof jQuery) {
+                result = true;
+            }
+            if (target == null) {
+                return false;
+            }
+            if (typeof target === "object") {
+                /* 也有种可能，这个jQuery对象是1.8.3版本的，页面中的jQuery是3.4.1版本的 */
+                const jQueryProps = [
+                    "add",
+                    "addBack",
+                    "addClass",
+                    "after",
+                    "ajaxComplete",
+                    "ajaxError",
+                    "ajaxSend",
+                    "ajaxStart",
+                    "ajaxStop",
+                    "ajaxSuccess",
+                    "animate",
+                    "append",
+                    "appendTo",
+                    "attr",
+                    "before",
+                    "bind",
+                    "blur",
+                    "change",
+                    "children",
+                    "clearQueue",
+                    "click",
+                    "clone",
+                    "closest",
+                    "constructor",
+                    "contents",
+                    "contextmenu",
+                    "css",
+                    "data",
+                    "dblclick",
+                    "delay",
+                    "delegate",
+                    "dequeue",
+                    "each",
+                    "empty",
+                    "end",
+                    "eq",
+                    "extend",
+                    "fadeIn",
+                    "fadeOut",
+                    "fadeTo",
+                    "fadeToggle",
+                    "filter",
+                    "find",
+                    "first",
+                    "focus",
+                    "focusin",
+                    "focusout",
+                    "get",
+                    "has",
+                    "hasClass",
+                    "height",
+                    "hide",
+                    "hover",
+                    "html",
+                    "index",
+                    "init",
+                    "innerHeight",
+                    "innerWidth",
+                    "insertAfter",
+                    "insertBefore",
+                    "is",
+                    "jquery",
+                    "keydown",
+                    "keypress",
+                    "keyup",
+                    "last",
+                    "load",
+                    "map",
+                    "mousedown",
+                    "mouseenter",
+                    "mouseleave",
+                    "mousemove",
+                    "mouseout",
+                    "mouseover",
+                    "mouseup",
+                    "next",
+                    "nextAll",
+                    "not",
+                    "off",
+                    "offset",
+                    "offsetParent",
+                    "on",
+                    "one",
+                    "outerHeight",
+                    "outerWidth",
+                    "parent",
+                    "parents",
+                    "position",
+                    "prepend",
+                    "prependTo",
+                    "prev",
+                    "prevAll",
+                    "prevUntil",
+                    "promise",
+                    "prop",
+                    "pushStack",
+                    "queue",
+                    "ready",
+                    "remove",
+                    "removeAttr",
+                    "removeClass",
+                    "removeData",
+                    "removeProp",
+                    "replaceAll",
+                    "replaceWith",
+                    "resize",
+                    "scroll",
+                    "scrollLeft",
+                    "scrollTop",
+                    "select",
+                    "show",
+                    "siblings",
+                    "slice",
+                    "slideDown",
+                    "slideToggle",
+                    "slideUp",
+                    "sort",
+                    "splice",
+                    "text",
+                    "toArray",
+                    "toggle",
+                    "toggleClass",
+                    "trigger",
+                    "triggerHandler",
+                    "unbind",
+                    "width",
+                    "wrap",
+                ];
+                for (const jQueryPropsName of jQueryProps) {
+                    if (!(jQueryPropsName in target)) {
+                        result = false;
+                        break;
+                    }
+                    else {
+                        result = true;
+                    }
+                }
+            }
+            return result;
+        }
+        assign(target = {}, source = {}, isAdd = false) {
+            const UtilsContext = this;
+            if (Array.isArray(source)) {
+                const canTraverse = source.filter((item) => {
+                    return typeof item === "object";
+                });
+                if (!canTraverse.length) {
+                    return source;
+                }
+            }
+            if (source == null) {
+                return target;
+            }
+            if (target == null) {
+                target = {};
+            }
+            if (isAdd) {
+                for (const sourceKeyName in source) {
+                    const targetKeyName = sourceKeyName;
+                    const targetValue = Reflect.get(target, targetKeyName);
+                    const sourceValue = Reflect.get(source, sourceKeyName);
+                    if (typeof sourceValue === "object" && sourceValue != null && sourceKeyName in target && !isDOM(sourceValue)) {
+                        /* 源端的值是object类型，且不是元素节点 */
+                        Reflect.set(target, sourceKeyName, UtilsContext.assign(targetValue, sourceValue, isAdd));
+                        continue;
+                    }
+                    Reflect.set(target, sourceKeyName, sourceValue);
+                }
+            }
+            else {
+                for (const targetKeyName in target) {
+                    if (targetKeyName in source) {
+                        const targetValue = Reflect.get(target, targetKeyName);
+                        const sourceValue = Reflect.get(source, targetKeyName);
+                        if (typeof sourceValue === "object" &&
+                            sourceValue != null &&
+                            !isDOM(sourceValue) &&
+                            Object.keys(sourceValue).length) {
+                            /* 源端的值是object类型，且不是元素节点 */
+                            Reflect.set(target, targetKeyName, UtilsContext.assign(targetValue, sourceValue, isAdd));
+                            continue;
+                        }
+                        /* 直接赋值 */
+                        Reflect.set(target, targetKeyName, sourceValue);
+                    }
+                }
+            }
+            return target;
+        }
+        mutationObserver(target, observer_config) {
+            const that = this;
+            const default_obverser_config = {
+                /* 监听到元素有反馈，需执行的函数 */
+                callback: () => { },
+                config: {
+                    /**
+                     * + true 监听以 target 为根节点的整个子树。包括子树中所有节点的属性，而不仅仅是针对 target
+                     * + false (默认) 不生效
+                     */
+                    subtree: void 0,
+                    /**
+                     * + true 监听 target 节点中发生的节点的新增与删除（同时，如果 subtree 为 true，会针对整个子树生效）
+                     * + false (默认) 不生效
+                     */
+                    childList: void 0,
+                    /**
+                     * + true 观察所有监听的节点属性值的变化。默认值为 true，当声明了 attributeFilter 或 attributeOldValue
+                     * + false (默认) 不生效
+                     */
+                    attributes: void 0,
+                    /**
+                     * 一个用于声明哪些属性名会被监听的数组。如果不声明该属性，所有属性的变化都将触发通知
+                     */
+                    attributeFilter: void 0,
+                    /**
+                     * + true 记录上一次被监听的节点的属性变化；可查阅 MutationObserver 中的 Monitoring attribute values 了解关于观察属性变化和属性值记录的详情
+                     * + false (默认) 不生效
+                     */
+                    attributeOldValue: void 0,
+                    /**
+                     * + true 监听声明的 target 节点上所有字符的变化。默认值为 true，如果声明了 characterDataOldValue
+                     * + false (默认) 不生效
+                     */
+                    characterData: void 0,
+                    /**
+                     * + true 记录前一个被监听的节点中发生的文本变化
+                     * + false (默认) 不生效
+                     */
+                    characterDataOldValue: void 0,
+                },
+                immediate: false,
+            };
+            observer_config = that.assign(default_obverser_config, observer_config);
+            const windowMutationObserver = this.windowApi.window.MutationObserver ||
+                this.windowApi.window.webkitMutationObserver ||
+                this.windowApi.window.MozMutationObserver;
+            // 观察者对象
+            const mutationObserver = new windowMutationObserver(function (mutations, observer) {
+                if (typeof observer_config.callback === "function") {
+                    observer_config.callback(mutations, observer);
+                }
+            });
+            if (Array.isArray(target) || target instanceof NodeList) {
+                // 传入的是数组或者元素数组
+                target.forEach((item) => {
+                    mutationObserver.observe(item, observer_config.config);
+                });
+            }
+            else if (that.isJQuery(target)) {
+                /* 传入的参数是jQuery对象 */
+                target.each((_, item) => {
+                    mutationObserver.observe(item, observer_config.config);
+                });
+            }
+            else {
+                mutationObserver.observe(target, observer_config.config);
+            }
+            if (observer_config.immediate) {
+                /* 主动触发一次 */
+                if (typeof observer_config.callback === "function") {
+                    observer_config.callback([], mutationObserver);
+                }
+            }
+            return mutationObserver;
+        }
+    }
+    const utils = new Utils();
+
+    class ElementWait extends ElementSelector {
+        windowApi;
+        constructor(windowApiOption) {
+            super(windowApiOption);
+            this.windowApi = new WindowApi(windowApiOption);
+        }
+        wait(checkFn, timeout, parent) {
+            const UtilsContext = this;
+            const __timeout__ = typeof timeout === "number" ? timeout : 0;
+            return new Promise((resolve) => {
+                const observer = utils.mutationObserver(parent || UtilsContext.windowApi.document, {
+                    config: {
+                        subtree: true,
+                        childList: true,
+                        attributes: true,
+                    },
+                    immediate: true,
+                    callback(_, __observer__) {
+                        const result = checkFn();
+                        if (result.success) {
+                            // 取消观察器
+                            if (typeof __observer__?.disconnect === "function") {
+                                __observer__.disconnect();
+                            }
+                            resolve(result.data);
+                        }
+                    },
+                });
+                if (__timeout__ > 0) {
+                    CommonUtils.setTimeout(() => {
+                        // 取消观察器
+                        if (typeof observer?.disconnect === "function") {
+                            observer.disconnect();
+                        }
+                        resolve(null);
+                    }, __timeout__);
+                }
+            });
+        }
+        waitNode(...args) {
+            // 过滤掉undefined
+            args = args.filter((arg) => arg !== void 0);
+            const UtilsContext = this;
+            // 选择器
+            const selector = args[0];
+            // 父元素（监听的元素）
+            let parent = UtilsContext.windowApi.document;
+            // 超时时间
+            let timeout = 0;
+            if (typeof args[0] !== "string" && !Array.isArray(args[0]) && typeof args[0] !== "function") {
+                throw new TypeError("Utils.waitNode 第一个参数必须是string|string[]|Function");
+            }
+            if (args.length === 1) ;
+            else if (args.length === 2) {
+                const secondParam = args[1];
+                if (typeof secondParam === "number") {
+                    // "div",10000
+                    timeout = secondParam;
+                }
+                else if (typeof secondParam === "object" && secondParam instanceof Node) {
+                    // "div",document
+                    parent = secondParam;
+                }
+                else {
+                    throw new TypeError("Utils.waitNode 第二个参数必须是number|Node");
+                }
+            }
+            else if (args.length === 3) {
+                // "div",document,10000
+                // 第二个参数，parent
+                const secondParam = args[1];
+                // 第三个参数，timeout
+                const thirdParam = args[2];
+                if (typeof secondParam === "object" && secondParam instanceof Node) {
+                    parent = secondParam;
+                    if (typeof thirdParam === "number") {
+                        timeout = thirdParam;
+                    }
+                    else {
+                        throw new TypeError("Utils.waitNode 第三个参数必须是number");
+                    }
+                }
+                else {
+                    throw new TypeError("Utils.waitNode 第二个参数必须是Node");
+                }
+            }
+            else {
+                throw new TypeError("Utils.waitNode 参数个数错误");
+            }
+            function getNode() {
+                if (Array.isArray(selector)) {
+                    const result = [];
+                    for (let index = 0; index < selector.length; index++) {
+                        const node = elementSelector.selector(selector[index]);
+                        if (node) {
+                            result.push(node);
+                        }
+                    }
+                    if (result.length === selector.length) {
+                        return result;
+                    }
+                }
+                else if (typeof selector === "function") {
+                    return selector();
+                }
+                else {
+                    return elementSelector.selector(selector, parent);
+                }
+            }
+            return UtilsContext.wait(() => {
+                const node = getNode();
+                if (node) {
+                    return {
+                        success: true,
+                        data: node,
+                    };
+                }
+                else {
+                    return {
+                        success: false,
+                        data: node,
+                    };
+                }
+            }, timeout, parent);
+        }
+        waitAnyNode(...args) {
+            // 过滤掉undefined
+            args = args.filter((arg) => arg !== void 0);
+            const UtilsContext = this;
+            // 选择器
+            const selectorList = args[0];
+            // 父元素（监听的元素）
+            let parent = UtilsContext.windowApi.document;
+            // 超时时间
+            let timeout = 0;
+            if (typeof args[0] !== "object" && !Array.isArray(args[0])) {
+                throw new TypeError("Utils.waitAnyNode 第一个参数必须是string[]");
+            }
+            if (args.length === 1) ;
+            else if (args.length === 2) {
+                const secondParam = args[1];
+                if (typeof secondParam === "number") {
+                    // "div",10000
+                    timeout = secondParam;
+                }
+                else if (typeof secondParam === "object" && secondParam instanceof Node) {
+                    // "div",document
+                    parent = secondParam;
+                }
+                else {
+                    throw new TypeError("Utils.waitAnyNode 第二个参数必须是number|Node");
+                }
+            }
+            else if (args.length === 3) {
+                // "div",document,10000
+                // 第二个参数，parent
+                const secondParam = args[1];
+                // 第三个参数，timeout
+                const thirdParam = args[2];
+                if (typeof secondParam === "object" && secondParam instanceof Node) {
+                    parent = secondParam;
+                    if (typeof thirdParam === "number") {
+                        timeout = thirdParam;
+                    }
+                    else {
+                        throw new TypeError("Utils.waitAnyNode 第三个参数必须是number");
+                    }
+                }
+                else {
+                    throw new TypeError("Utils.waitAnyNode 第二个参数必须是Node");
+                }
+            }
+            else {
+                throw new TypeError("Utils.waitAnyNode 参数个数错误");
+            }
+            const promiseList = selectorList.map((selector) => {
+                return UtilsContext.waitNode(selector, parent, timeout);
+            });
+            return Promise.any(promiseList);
+        }
+        waitNodeList(...args) {
+            // 过滤掉undefined
+            args = args.filter((arg) => arg !== void 0);
+            const UtilsContext = this;
+            // 选择器数组
+            const selector = args[0];
+            // 父元素（监听的元素）
+            let parent = UtilsContext.windowApi.document;
+            // 超时时间
+            let timeout = 0;
+            if (typeof args[0] !== "string" && !Array.isArray(args[0])) {
+                throw new TypeError("Utils.waitNodeList 第一个参数必须是string|string[]");
+            }
+            if (args.length === 1) ;
+            else if (args.length === 2) {
+                const secondParam = args[1];
+                if (typeof secondParam === "number") {
+                    // "div",10000
+                    timeout = secondParam;
+                }
+                else if (typeof secondParam === "object" && secondParam instanceof Node) {
+                    // "div",document
+                    parent = secondParam;
+                }
+                else {
+                    throw new TypeError("Utils.waitNodeList 第二个参数必须是number|Node");
+                }
+            }
+            else if (args.length === 3) {
+                // "div",document,10000
+                // 第二个参数，parent
+                const secondParam = args[1];
+                // 第三个参数，timeout
+                const thirdParam = args[2];
+                if (typeof secondParam === "object" && secondParam instanceof Node) {
+                    parent = secondParam;
+                    if (typeof thirdParam === "number") {
+                        timeout = thirdParam;
+                    }
+                    else {
+                        throw new TypeError("Utils.waitNodeList 第三个参数必须是number");
+                    }
+                }
+                else {
+                    throw new TypeError("Utils.waitNodeList 第二个参数必须是Node");
+                }
+            }
+            else {
+                throw new TypeError("Utils.waitNodeList 参数个数错误");
+            }
+            function getNodeList() {
+                if (Array.isArray(selector)) {
+                    const result = [];
+                    for (let index = 0; index < selector.length; index++) {
+                        const nodeList = elementSelector.selectorAll(selector[index], parent);
+                        if (nodeList.length) {
+                            result.push(nodeList);
+                        }
+                    }
+                    if (result.length === selector.length) {
+                        return result;
+                    }
+                }
+                else {
+                    const nodeList = elementSelector.selectorAll(selector, parent);
+                    if (nodeList.length) {
+                        return nodeList;
+                    }
+                }
+            }
+            return UtilsContext.wait(() => {
+                const node = getNodeList();
+                if (node) {
+                    return {
+                        success: true,
+                        data: node,
+                    };
+                }
+                else {
+                    return {
+                        success: false,
+                        data: node,
+                    };
+                }
+            }, timeout, parent);
+        }
+        waitAnyNodeList(...args) {
+            // 过滤掉undefined
+            args = args.filter((arg) => arg !== void 0);
+            const UtilsContext = this;
+            // 选择器数组
+            const selectorList = args[0];
+            // 父元素（监听的元素）
+            let parent = UtilsContext.windowApi.document;
+            // 超时时间
+            let timeout = 0;
+            if (!Array.isArray(args[0])) {
+                throw new TypeError("Utils.waitAnyNodeList 第一个参数必须是string[]");
+            }
+            if (args.length === 1) ;
+            else if (args.length === 2) {
+                const secondParam = args[1];
+                if (typeof secondParam === "number") {
+                    // "div",10000
+                    timeout = secondParam;
+                }
+                else if (typeof secondParam === "object" && secondParam instanceof Node) {
+                    // "div",document
+                    parent = secondParam;
+                }
+                else {
+                    throw new TypeError("Utils.waitAnyNodeList 第二个参数必须是number|Node");
+                }
+            }
+            else if (args.length === 3) {
+                // "div",document,10000
+                // 第二个参数，parent
+                const secondParam = args[1];
+                // 第三个参数，timeout
+                const thirdParam = args[2];
+                if (typeof secondParam === "object" && secondParam instanceof Node) {
+                    parent = secondParam;
+                    if (typeof thirdParam === "number") {
+                        timeout = thirdParam;
+                    }
+                    else {
+                        throw new TypeError("Utils.waitAnyNodeList 第三个参数必须是number");
+                    }
+                }
+                else {
+                    throw new TypeError("Utils.waitAnyNodeList 第二个参数必须是Node");
+                }
+            }
+            else {
+                throw new TypeError("Utils.waitAnyNodeList 参数个数错误");
+            }
+            const promiseList = selectorList.map((selector) => {
+                return UtilsContext.waitNodeList(selector, parent, timeout);
+            });
+            return Promise.any(promiseList);
+        }
+    }
+    new ElementWait();
+
+    class ElementAnimate extends ElementWait {
+        windowApi;
+        constructor(windowApiOption) {
+            super(windowApiOption);
+            this.windowApi = new WindowApi(windowApiOption);
+        }
+        /**
+         * 在一定时间内改变元素的样式属性，实现动画效果
+         * @param element 需要进行动画的元素
+         * @param styles 动画结束时元素的样式属性
+         * @param duration 动画持续时间，单位为毫秒
+         * @param callback 动画结束后执行的函数
+         * @example
+         * // 监听元素a.xx的从显示变为隐藏
+         * DOMUtils.animate(document.querySelector("a.xx"),{ top:100},1000,function(){
+         *   console.log("已往上位移100px")
+         * })
+         */
+        animate(element, styles, duration = 1000, callback = null) {
+            const context = this;
+            if (typeof element === "string") {
+                element = elementSelector.selectorAll(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (CommonUtils.isNodeList(element)) {
+                // 设置
+                element.forEach(($ele) => {
+                    context.animate($ele, styles, duration, callback);
+                });
+                return;
+            }
+            if (typeof duration !== "number" || duration <= 0) {
+                throw new TypeError("duration must be a positive number");
+            }
+            if (typeof callback !== "function" && callback !== void 0) {
+                throw new TypeError("callback must be a function or null");
+            }
+            if (typeof styles !== "object" || styles === void 0) {
+                throw new TypeError("styles must be an object");
+            }
+            if (Object.keys(styles).length === 0) {
+                throw new Error("styles must contain at least one property");
+            }
+            const start = performance.now();
+            const from = {};
+            const to = {};
+            for (const prop in styles) {
+                from[prop] = element.style[prop] || context.windowApi.globalThis.getComputedStyle(element)[prop];
+                to[prop] = styles[prop];
+            }
+            const timer = CommonUtils.setInterval(function () {
+                const timePassed = performance.now() - start;
+                let progress = timePassed / duration;
+                if (progress > 1) {
+                    progress = 1;
+                }
+                for (const prop in styles) {
+                    element.style[prop] = from[prop] + (to[prop] - from[prop]) * progress + "px";
+                }
+                if (progress === 1) {
+                    CommonUtils.clearInterval(timer);
+                    if (callback) {
+                        callback();
+                    }
+                }
+            }, 10);
+        }
+        /**
+         * 显示元素
+         * @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, checkVisiblie = true) {
+            const context = this;
+            if (target == null) {
+                return;
+            }
+            if (typeof target === "string") {
+                target = elementSelector.selectorAll(target);
+            }
+            if (target instanceof NodeList || target instanceof Array) {
+                target = target;
+                for (const element of target) {
+                    context.show(element, checkVisiblie);
+                }
+            }
+            else {
+                target = target;
+                target.style.display = "";
+                if (checkVisiblie) {
+                    if (!CommonUtils.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, checkVisiblie = true) {
+            const context = this;
+            if (target == null) {
+                return;
+            }
+            if (typeof target === "string") {
+                target = elementSelector.selectorAll(target);
+            }
+            if (target instanceof NodeList || target instanceof Array) {
+                target = target;
+                for (const element of target) {
+                    context.hide(element, checkVisiblie);
+                }
+            }
+            else {
+                target = target;
+                target.style.display = "none";
+                if (checkVisiblie) {
+                    if (CommonUtils.isShow(target)) {
+                        /* 仍然是显示，尝试使用强覆盖 */
+                        target.style.setProperty("display", "none", "important");
+                    }
+                }
+            }
+        }
+        /**
+         * 淡入元素
+         * @param element 当前元素
+         * @param duration 动画持续时间（毫秒），默认400毫秒
+         * @param callback 动画结束的回调
+         * @example
+         * // 元素a.xx淡入
+         * DOMUtils.fadeIn(document.querySelector("a.xx"),2500,()=>{
+         *   console.log("淡入完毕");
+         * })
+         * DOMUtils.fadeIn("a.xx",undefined,()=>{
+         *   console.log("淡入完毕");
+         * })
+         */
+        fadeIn(element, duration = 400, callback) {
+            if (element == null) {
+                return;
+            }
+            const context = this;
+            if (typeof element === "string") {
+                element = elementSelector.selectorAll(element);
+            }
+            if (CommonUtils.isNodeList(element)) {
+                // 设置
+                element.forEach(($ele) => {
+                    context.fadeIn($ele, duration, callback);
+                });
+                return;
+            }
+            element.style.opacity = "0";
+            element.style.display = "";
+            let start = null;
+            let timer = null;
+            function step(timestamp) {
+                if (!start)
+                    start = timestamp;
+                const progress = timestamp - start;
+                element = element;
+                element.style.opacity = Math.min(progress / duration, 1).toString();
+                if (progress < duration) {
+                    context.windowApi.window.requestAnimationFrame(step);
+                }
+                else {
+                    if (callback && typeof callback === "function") {
+                        callback();
+                    }
+                    context.windowApi.window.cancelAnimationFrame(timer);
+                }
+            }
+            timer = context.windowApi.window.requestAnimationFrame(step);
+        }
         /**
-         * 配合 .setTimeout 使用
+         * 淡出元素
+         * @param element 当前元素
+         * @param duration 动画持续时间（毫秒），默认400毫秒
+         * @param callback 动画结束的回调
+         * @example
+         * // 元素a.xx淡出
+         * DOMUtils.fadeOut(document.querySelector("a.xx"),2500,()=>{
+         *   console.log("淡出完毕");
+         * })
+         * DOMUtils.fadeOut("a.xx",undefined,()=>{
+         *   console.log("淡出完毕");
+         * })
          */
-        clearTimeout(timeId) {
-            try {
-                if (timeId != null) {
-                    clearTimeout$1(timeId);
-                }
+        fadeOut(element, duration = 400, callback) {
+            const context = this;
+            if (element == null) {
+                return;
             }
-            catch {
-                // TODO
+            if (typeof element === "string") {
+                element = elementSelector.selectorAll(element);
             }
-            finally {
-                this.windowApi.clearTimeout(timeId);
+            if (CommonUtils.isNodeList(element)) {
+                // 设置
+                element.forEach(($ele) => {
+                    context.fadeOut($ele, duration, callback);
+                });
+                return;
             }
-        },
+            element.style.opacity = "1";
+            let start = null;
+            let timer = null;
+            function step(timestamp) {
+                if (!start)
+                    start = timestamp;
+                const progress = timestamp - start;
+                element = element;
+                element.style.opacity = Math.max(1 - progress / duration, 0).toString();
+                if (progress < duration) {
+                    context.windowApi.window.requestAnimationFrame(step);
+                }
+                else {
+                    element.style.display = "none";
+                    if (typeof callback === "function") {
+                        callback();
+                    }
+                    context.windowApi.window.cancelAnimationFrame(timer);
+                }
+            }
+            timer = context.windowApi.window.requestAnimationFrame(step);
+        }
         /**
-         * 自动使用 Worker 执行 setInterval
+         * 切换元素的显示和隐藏状态
+         * @param element 当前元素
+         * @param checkVisiblie 是否检测元素是否显示
+         * @example
+         * // 如果元素a.xx当前是隐藏，则显示，如果是显示，则隐藏
+         * DOMUtils.toggle(document.querySelector("a.xx"))
+         * DOMUtils.toggle("a.xx")
          */
-        setInterval(callback, timeout = 0) {
-            try {
-                return setInterval$1(callback, timeout);
+        toggle(element, checkVisiblie) {
+            const context = this;
+            if (typeof element === "string") {
+                element = elementSelector.selectorAll(element);
             }
-            catch {
-                return this.windowApi.setInterval(callback, timeout);
+            if (element == null) {
+                return;
             }
-        },
-        /**
-         * 配合 .setInterval 使用
-         */
-        clearInterval(timeId) {
-            try {
-                if (timeId != null) {
-                    clearInterval$1(timeId);
-                }
+            if (CommonUtils.isNodeList(element)) {
+                // 设置
+                element.forEach(($ele) => {
+                    context.toggle($ele);
+                });
+                return;
             }
-            catch {
-                // TODO
+            if (context.windowApi.globalThis.getComputedStyle(element).getPropertyValue("display") === "none") {
+                context.show(element, checkVisiblie);
             }
-            finally {
-                this.windowApi.clearInterval(timeId);
+            else {
+                context.hide(element, checkVisiblie);
             }
-        },
-        /**
-         * 判断是否是元素列表
-         * @param $ele
-         */
-        isNodeList($ele) {
-            return Array.isArray($ele) || $ele instanceof NodeList;
-        },
-        /** 获取 animationend 在各个浏览器的兼容名 */
-        getAnimationEndNameList() {
-            return ["webkitAnimationEnd", "mozAnimationEnd", "MSAnimationEnd", "oanimationend", "animationend"];
-        },
-        /** 获取 transitionend 在各个浏览器的兼容名 */
-        getTransitionEndNameList() {
-            return ["webkitTransitionEnd", "mozTransitionEnd", "MSTransitionEnd", "otransitionend", "transitionend"];
-        },
-    };
-
-    /* 数据 */
-    const DOMUtilsData = {
-        /** .on添加在元素存储的事件 */
-        SymbolEvents: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
-    };
+        }
+    }
+    new ElementAnimate();
 
     const OriginPrototype = {
         Object: {
@@ -525,11 +1626,20 @@
         },
     };
 
-    class DOMUtilsEvent {
+    class ElementEvent extends ElementAnimate {
         windowApi;
         constructor(windowApiOption) {
+            super(windowApiOption);
             this.windowApi = new WindowApi(windowApiOption);
         }
+        /** 获取 animationend 在各个浏览器的兼容名 */
+        getAnimationEndNameList() {
+            return CommonUtils.getAnimationEndNameList();
+        }
+        /** 获取 transitionend 在各个浏览器的兼容名 */
+        getTransitionEndNameList() {
+            return CommonUtils.getTransitionEndNameList();
+        }
         on(element, eventType, selector, callback, option) {
             /**
              * 获取option配置
@@ -560,11 +1670,11 @@
                 }
                 return option;
             }
-            const DOMUtilsContext = this;
+            const that = this;
             // eslint-disable-next-line prefer-rest-params
             const args = arguments;
             if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+                element = that.selectorAll(element);
             }
             if (element == null) {
                 return;
@@ -617,7 +1727,7 @@
              */
             function checkOptionOnceToRemoveEventListener() {
                 if (listenerOption.once) {
-                    DOMUtilsContext.off(element, eventType, selector, callback, option);
+                    that.off(element, eventType, selector, callback, option);
                 }
             }
             elementList.forEach((elementItem) => {
@@ -633,19 +1743,19 @@
                             ? event.composedPath()[0]
                             : event.target;
                         let totalParent = elementItem;
-                        if (DOMUtilsCommonUtils.isWin(totalParent)) {
-                            if (totalParent === DOMUtilsContext.windowApi.document) {
-                                totalParent = DOMUtilsContext.windowApi.document.documentElement;
+                        if (CommonUtils.isWin(totalParent)) {
+                            if (totalParent === that.windowApi.document) {
+                                totalParent = that.windowApi.document.documentElement;
                             }
                         }
                         const findValue = selectorList.find((selectorItem) => {
                             // 判断目标元素是否匹配选择器
-                            if (DOMUtilsContext.matches(eventTarget, selectorItem)) {
+                            if (that.matches(eventTarget, selectorItem)) {
                                 /* 当前目标可以被selector所匹配到 */
                                 return true;
                             }
                             /* 在上层与主元素之间寻找可以被selector所匹配到的 */
-                            const $closestMatches = DOMUtilsContext.closest(eventTarget, selectorItem);
+                            const $closestMatches = that.closest(eventTarget, selectorItem);
                             if ($closestMatches && totalParent?.contains($closestMatches)) {
                                 eventTarget = $closestMatches;
                                 return true;
@@ -678,7 +1788,7 @@
                 eventTypeList.forEach((eventName) => {
                     elementItem.addEventListener(eventName, domUtilsEventCallBack, listenerOption);
                     /* 获取对象上的事件 */
-                    const elementEvents = Reflect.get(elementItem, DOMUtilsData.SymbolEvents) || {};
+                    const elementEvents = Reflect.get(elementItem, GlobalData.domEventSymbol) || {};
                     /* 初始化对象上的xx事件 */
                     elementEvents[eventName] = elementEvents[eventName] || [];
                     elementEvents[eventName].push({
@@ -688,7 +1798,7 @@
                         originCallBack: listenerCallBack,
                     });
                     /* 覆盖事件 */
-                    Reflect.set(elementItem, DOMUtilsData.SymbolEvents, elementEvents);
+                    Reflect.set(elementItem, GlobalData.domEventSymbol, elementEvents);
                 });
             });
         }
@@ -709,22 +1819,22 @@
                 }
                 return option;
             }
-            const DOMUtilsContext = this;
+            const that = this;
             // eslint-disable-next-line prefer-rest-params
             const args = arguments;
             if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+                element = that.selectorAll(element);
             }
             if (element == null) {
                 return;
             }
-            let elementList = [];
+            let $elList = [];
             if (element instanceof NodeList || Array.isArray(element)) {
                 element = element;
-                elementList = [...element];
+                $elList = [...element];
             }
             else {
-                elementList.push(element);
+                $elList.push(element);
             }
             let eventTypeList = [];
             if (Array.isArray(eventType)) {
@@ -775,9 +1885,9 @@
                 // 目标函数、事件名、回调函数、事件配置、过滤函数
                 filter = option;
             }
-            elementList.forEach((elementItem) => {
+            $elList.forEach(($elItem) => {
                 /* 获取对象上的事件 */
-                const elementEvents = Reflect.get(elementItem, DOMUtilsData.SymbolEvents) || {};
+                const elementEvents = Reflect.get($elItem, GlobalData.domEventSymbol) || {};
                 eventTypeList.forEach((eventName) => {
                     const handlers = elementEvents[eventName] || [];
                     const filterHandler = typeof filter === "function" ? handlers.filter(filter) : handlers;
@@ -801,7 +1911,7 @@
                             flag = false;
                         }
                         if (flag || isRemoveAll) {
-                            elementItem.removeEventListener(eventName, handler.callback, handler.option);
+                            $elItem.removeEventListener(eventName, handler.callback, handler.option);
                             const findIndex = handlers.findIndex((item) => item === handler);
                             if (findIndex !== -1) {
                                 handlers.splice(findIndex, 1);
@@ -810,10 +1920,10 @@
                     }
                     if (handlers.length === 0) {
                         /* 如果没有任意的handler，那么删除该属性 */
-                        DOMUtilsCommonUtils.delete(elementEvents, eventType);
+                        CommonUtils.delete(elementEvents, eventType);
                     }
                 });
-                Reflect.set(elementItem, DOMUtilsData.SymbolEvents, elementEvents);
+                Reflect.set($elItem, GlobalData.domEventSymbol, elementEvents);
             });
         }
         /**
@@ -822,19 +1932,19 @@
          * @param eventType （可选）需要取消监听的事件
          */
         offAll(element, eventType) {
-            const DOMUtilsContext = this;
+            const that = this;
             if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+                element = that.selectorAll(element);
             }
             if (element == null) {
                 return;
             }
-            let elementList = [];
+            let $elList = [];
             if (element instanceof NodeList || Array.isArray(element)) {
-                elementList = [...element];
+                $elList = [...element];
             }
             else {
-                elementList.push(element);
+                $elList.push(element);
             }
             let eventTypeList = [];
             if (Array.isArray(eventType)) {
@@ -843,12 +1953,13 @@
             else if (typeof eventType === "string") {
                 eventTypeList = eventTypeList.concat(eventType.split(" "));
             }
-            elementList.forEach((elementItem) => {
-                Object.getOwnPropertySymbols(elementItem).forEach((symbolEvents) => {
-                    if (!symbolEvents.toString().startsWith("Symbol(events_")) {
+            $elList.forEach(($elItem) => {
+                const symbolList = [...new Set([...Object.getOwnPropertySymbols($elItem), GlobalData.domEventSymbol])];
+                symbolList.forEach((symbolItem) => {
+                    if (!symbolItem.toString().startsWith("Symbol(events_")) {
                         return;
                     }
-                    const elementEvents = elementItem[symbolEvents] || {};
+                    const elementEvents = Reflect.get($elItem, symbolItem) || {};
                     const iterEventNameList = eventTypeList.length ? eventTypeList : Object.keys(elementEvents);
                     iterEventNameList.forEach((eventName) => {
                         const handlers = elementEvents[eventName];
@@ -856,12 +1967,12 @@
                             return;
                         }
                         for (const handler of handlers) {
-                            elementItem.removeEventListener(eventName, handler.callback, {
+                            $elItem.removeEventListener(eventName, handler.callback, {
                                 capture: handler["option"]["capture"],
                             });
                         }
-                        const events = Reflect.get(elementItem, symbolEvents);
-                        DOMUtilsCommonUtils.delete(events, eventName);
+                        const events = Reflect.get($elItem, symbolItem);
+                        CommonUtils.delete(events, eventName);
                     });
                 });
             });
@@ -878,15 +1989,15 @@
             if (typeof callback !== "function") {
                 return;
             }
-            const DOMUtilsContext = this;
+            const that = this;
             /**
              * 检测文档是否加载完毕
              */
             function checkDOMReadyState() {
                 try {
-                    if (DOMUtilsContext.windowApi.document.readyState === "complete" ||
-                        (DOMUtilsContext.windowApi.document.readyState !== "loading" &&
-                            !DOMUtilsContext.windowApi.document.documentElement.doScroll)) {
+                    if (that.windowApi.document.readyState === "complete" ||
+                        (that.windowApi.document.readyState !== "loading" &&
+                            !that.windowApi.document.documentElement.doScroll)) {
                         return true;
                     }
                     else {
@@ -906,12 +2017,12 @@
             }
             const targetList = [
                 {
-                    target: DOMUtilsContext.windowApi.document,
+                    target: that.windowApi.document,
                     eventType: "DOMContentLoaded",
                     callback: completed,
                 },
                 {
-                    target: DOMUtilsContext.windowApi.window,
+                    target: that.windowApi.window,
                     eventType: "load",
                     callback: completed,
                 },
@@ -936,7 +2047,7 @@
             }
             if (checkDOMReadyState()) {
                 /* 检查document状态 */
-                DOMUtilsCommonUtils.setTimeout(callback);
+                CommonUtils.setTimeout(callback);
             }
             else {
                 /* 添加监听 */
@@ -948,7 +2059,7 @@
          * @param element 需要触发的元素|元素数组|window
          * @param eventType 需要触发的事件
          * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
-         * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true
+         * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件，默认true
          * @example
          * // 触发元素a.xx的click事件
          * DOMUtils.trigger(document.querySelector("a.xx"),"click")
@@ -958,20 +2069,20 @@
          * DOMUtils.trigger("a.xx",["click","tap","hover"])
          */
         trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
-            const DOMUtilsContext = this;
+            const that = this;
             if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+                element = that.selectorAll(element);
             }
             if (element == null) {
                 return;
             }
-            let elementList = [];
+            let $elList = [];
             if (element instanceof NodeList || Array.isArray(element)) {
                 element = element;
-                elementList = [...element];
+                $elList = [...element];
             }
             else {
-                elementList = [element];
+                $elList = [element];
             }
             let eventTypeList = [];
             if (Array.isArray(eventType)) {
@@ -980,29 +2091,33 @@
             else if (typeof eventType === "string") {
                 eventTypeList = eventType.split(" ");
             }
-            elementList.forEach((elementItem) => {
+            $elList.forEach(($elItem) => {
                 /* 获取对象上的事件 */
-                const events = elementItem[DOMUtilsData.SymbolEvents] || {};
-                eventTypeList.forEach((_eventType_) => {
+                const elementEvents = Reflect.get($elItem, GlobalData.domEventSymbol) || {};
+                eventTypeList.forEach((__eventType) => {
                     let event = null;
                     if (details && details instanceof Event) {
                         event = details;
                     }
                     else {
-                        event = new Event(_eventType_);
+                        // 构造事件
+                        event = new Event(__eventType);
                         if (details) {
                             Object.keys(details).forEach((keyName) => {
-                                event[keyName] = details[keyName];
+                                const value = Reflect.get(details, keyName);
+                                // 在event上添加属性
+                                Reflect.set(event, keyName, value);
                             });
                         }
                     }
-                    if (useDispatchToTriggerEvent == false && _eventType_ in events) {
-                        events[_eventType_].forEach((eventsItem) => {
+                    if (useDispatchToTriggerEvent == false && __eventType in elementEvents) {
+                        // 直接调用监听的事件
+                        elementEvents[__eventType].forEach((eventsItem) => {
                             eventsItem.callback(event);
                         });
                     }
                     else {
-                        elementItem.dispatchEvent(event);
+                        $elItem.dispatchEvent(event);
                     }
                 });
             });
@@ -1022,25 +2137,25 @@
          * })
          * */
         click(element, handler, details, useDispatchToTriggerEvent) {
-            const DOMUtilsContext = this;
+            const that = this;
             if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+                element = that.selectorAll(element);
             }
             if (element == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList(element)) {
                 // 设置
                 element.forEach(($ele) => {
-                    DOMUtilsContext.click($ele, handler, details, useDispatchToTriggerEvent);
+                    that.click($ele, handler, details, useDispatchToTriggerEvent);
                 });
                 return;
             }
             if (handler == null) {
-                DOMUtilsContext.trigger(element, "click", details, useDispatchToTriggerEvent);
+                that.trigger(element, "click", details, useDispatchToTriggerEvent);
             }
             else {
-                DOMUtilsContext.on(element, "click", null, handler);
+                that.on(element, "click", null, handler);
             }
         }
         /**
@@ -1058,25 +2173,25 @@
          * })
          * */
         blur(element, handler, details, useDispatchToTriggerEvent) {
-            const DOMUtilsContext = this;
+            const that = this;
             if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+                element = that.selectorAll(element);
             }
             if (element == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList(element)) {
                 // 设置
                 element.forEach(($ele) => {
-                    DOMUtilsContext.focus($ele, handler, details, useDispatchToTriggerEvent);
+                    that.focus($ele, handler, details, useDispatchToTriggerEvent);
                 });
                 return;
             }
             if (handler === null) {
-                DOMUtilsContext.trigger(element, "blur", details, useDispatchToTriggerEvent);
+                that.trigger(element, "blur", details, useDispatchToTriggerEvent);
             }
             else {
-                DOMUtilsContext.on(element, "blur", null, handler);
+                that.on(element, "blur", null, handler);
             }
         }
         /**
@@ -1094,25 +2209,25 @@
          * })
          * */
         focus(element, handler, details, useDispatchToTriggerEvent) {
-            const DOMUtilsContext = this;
+            const that = this;
             if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+                element = that.selectorAll(element);
             }
             if (element == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList(element)) {
                 // 设置
                 element.forEach(($ele) => {
-                    DOMUtilsContext.focus($ele, handler, details, useDispatchToTriggerEvent);
+                    that.focus($ele, handler, details, useDispatchToTriggerEvent);
                 });
                 return;
             }
             if (handler == null) {
-                DOMUtilsContext.trigger(element, "focus", details, useDispatchToTriggerEvent);
+                that.trigger(element, "focus", details, useDispatchToTriggerEvent);
             }
             else {
-                DOMUtilsContext.on(element, "focus", null, handler);
+                that.on(element, "focus", null, handler);
             }
         }
         /**
@@ -1130,22 +2245,22 @@
          * })
          */
         hover(element, handler, option) {
-            const DOMUtilsContext = this;
+            const that = this;
             if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+                element = that.selectorAll(element);
             }
             if (element == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList(element)) {
                 // 设置
                 element.forEach(($ele) => {
-                    DOMUtilsContext.hover($ele, handler, option);
+                    that.hover($ele, handler, option);
                 });
                 return;
             }
-            DOMUtilsContext.on(element, "mouseenter", null, handler, option);
-            DOMUtilsContext.on(element, "mouseleave", null, handler, option);
+            that.on(element, "mouseenter", null, handler, option);
+            that.on(element, "mouseleave", null, handler, option);
         }
         /**
          * 当动画结束时触发事件
@@ -1154,30 +2269,23 @@
          * @param option 配置项，这里默认配置once为true
          */
         animationend(element, handler, option) {
-            const DOMUtilsContext = this;
+            const that = this;
             if (typeof element === "string") {
-                element = DOMUtilsContext.selector(element);
+                element = that.selector(element);
             }
             if (element == null) {
                 return;
             }
-            // if (DOMUtilsCommonUtils.isNodeList(element)) {
-            // 	// 设置
-            // 	element.forEach(($ele) => {
-            // 		DOMUtilsContext.animationend($ele as HTMLElement, handler, option);
-            // 	});
-            // 	return;
-            // }
             const defaultOption = {
                 once: true,
             };
             Object.assign(defaultOption, option || {});
-            const eventNameList = DOMUtilsCommonUtils.getAnimationEndNameList();
-            DOMUtilsContext.on(element, eventNameList, null, handler, defaultOption);
+            const eventNameList = CommonUtils.getAnimationEndNameList();
+            that.on(element, eventNameList, null, handler, defaultOption);
             if (!defaultOption.once) {
                 return {
                     off() {
-                        DOMUtilsContext.off(element, eventNameList, null, handler, defaultOption);
+                        that.off(element, eventNameList, null, handler, defaultOption);
                     },
                 };
             }
@@ -1189,30 +2297,23 @@
          * @param option 配置项，这里默认配置once为true
          */
         transitionend(element, handler, option) {
-            const DOMUtilsContext = this;
+            const that = this;
             if (typeof element === "string") {
-                element = DOMUtilsContext.selector(element);
+                element = that.selector(element);
             }
             if (element == null) {
                 return;
             }
-            // if (DOMUtilsCommonUtils.isNodeList(element)) {
-            // 	// 设置
-            // 	element.forEach(($ele) => {
-            // 		DOMUtilsContext.transitionend($ele as HTMLElement, handler, option);
-            // 	});
-            // 	return;
-            // }
             const defaultOption = {
                 once: true,
             };
             Object.assign(defaultOption, option || {});
-            const eventNameList = DOMUtilsCommonUtils.getTransitionEndNameList();
-            DOMUtilsContext.on(element, eventNameList, null, handler, defaultOption);
+            const eventNameList = CommonUtils.getTransitionEndNameList();
+            that.on(element, eventNameList, null, handler, defaultOption);
             if (!defaultOption.once) {
                 return {
                     off() {
-                        DOMUtilsContext.off(element, eventNameList, null, handler, defaultOption);
+                        that.off(element, eventNameList, null, handler, defaultOption);
                     },
                 };
             }
@@ -1233,21 +2334,21 @@
          * })
          */
         keyup(element, handler, option) {
-            const DOMUtilsContext = this;
+            const that = this;
             if (element == null) {
                 return;
             }
             if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+                element = that.selectorAll(element);
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList(element)) {
                 // 设置
                 element.forEach(($ele) => {
-                    DOMUtilsContext.keyup($ele, handler, option);
+                    that.keyup($ele, handler, option);
                 });
                 return;
             }
-            DOMUtilsContext.on(element, "keyup", null, handler, option);
+            that.on(element, "keyup", null, handler, option);
         }
         /**
          * 当按键按下时触发事件
@@ -1265,21 +2366,21 @@
          * })
          */
         keydown(element, handler, option) {
-            const DOMUtilsContext = this;
+            const that = this;
             if (element == null) {
                 return;
             }
             if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+                element = that.selectorAll(element);
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList(element)) {
                 // 设置
                 element.forEach(($ele) => {
-                    DOMUtilsContext.keydown($ele, handler, option);
+                    that.keydown($ele, handler, option);
                 });
                 return;
             }
-            DOMUtilsContext.on(element, "keydown", null, handler, option);
+            that.on(element, "keydown", null, handler, option);
         }
         /**
          * 当按键按下时触发事件
@@ -1297,21 +2398,21 @@
          * })
          */
         keypress(element, handler, option) {
-            const DOMUtilsContext = this;
+            const that = this;
             if (element == null) {
                 return;
             }
             if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+                element = that.selectorAll(element);
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList(element)) {
                 // 设置
                 element.forEach(($ele) => {
-                    DOMUtilsContext.keypress($ele, handler, option);
+                    that.keypress($ele, handler, option);
                 });
                 return;
             }
-            DOMUtilsContext.on(element, "keypress", null, handler, option);
+            that.on(element, "keypress", null, handler, option);
         }
         /**
            * 监听某个元素键盘按键事件或window全局按键事件
@@ -1377,9 +2478,9 @@
             收藏		171
            **/
         listenKeyboard(element, eventName = "keypress", callback, options) {
-            const DOMUtilsContext = this;
+            const that = this;
             if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+                element = that.selectorAll(element);
             }
             const keyboardEventCallBack = function (event) {
                 /** 键名 */
@@ -1387,233 +2488,146 @@
                 /** 键值 */
                 const keyValue = event.charCode || event.keyCode || event.which;
                 /** 组合键列表 */
-                const otherCodeList = [];
-                if (event.ctrlKey) {
-                    otherCodeList.push("ctrl");
-                }
-                if (event.altKey) {
-                    otherCodeList.push("alt");
-                }
-                if (event.metaKey) {
-                    otherCodeList.push("meta");
-                }
-                if (event.shiftKey) {
-                    otherCodeList.push("shift");
-                }
-                if (typeof callback === "function") {
-                    callback(keyName, keyValue, otherCodeList, event);
-                }
-            };
-            DOMUtilsContext.on(element, eventName, keyboardEventCallBack, options);
-            return {
-                removeListen: () => {
-                    DOMUtilsContext.off(element, eventName, keyboardEventCallBack, options);
-                },
-            };
-        }
-        selector(selector, parent) {
-            return this.selectorAll(selector, parent)[0];
-        }
-        selectorAll(selector, parent) {
-            const context = this;
-            parent = parent || context.windowApi.document;
-            selector = selector.trim();
-            if (selector.match(/[^\s]{1}:empty$/gi)) {
-                // empty 语法
-                selector = selector.replace(/:empty$/gi, "");
-                return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
-                    return $ele?.innerHTML?.trim() === "";
-                });
-            }
-            else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
-                // contains 语法
-                const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
-                const text = textMatch[2];
-                selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
-                return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
-                    // @ts-ignore
-                    return ($ele?.textContent || $ele?.innerText)?.includes(text);
-                });
-            }
-            else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
-                // regexp 语法
-                const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
-                let pattern = textMatch[2];
-                const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
-                let flags = "";
-                if (flagMatch) {
-                    pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
-                    flags = flagMatch[3];
-                }
-                const regexp = new RegExp(pattern, flags);
-                selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
-                return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
-                    // @ts-ignore
-                    return Boolean(($ele?.textContent || $ele?.innerText)?.match(regexp));
-                });
-            }
-            else {
-                // 普通语法
-                return Array.from(parent.querySelectorAll(selector));
-            }
-        }
-        /**
-         * 匹配元素，可使用以下的额外语法
-         *
-         * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
-         * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
-         * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
-         * @param $el 元素
-         * @param selector 选择器
-         * @example
-         * DOMUtils.matches("div:contains('测试')")
-         * > true
-         * @example
-         * DOMUtils.matches("div:empty")
-         * > true
-         * @example
-         * DOMUtils.matches("div:regexp('^xxxx$')")
-         * > true
-         * @example
-         * DOMUtils.matches("div:regexp(/^xxx/ig)")
-         * > false
-         */
-        matches($el, selector) {
-            selector = selector.trim();
-            if ($el == null) {
-                return false;
-            }
-            if (selector.match(/[^\s]{1}:empty$/gi)) {
-                // empty 语法
-                selector = selector.replace(/:empty$/gi, "");
-                return $el.matches(selector) && $el?.innerHTML?.trim() === "";
-            }
-            else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
-                // contains 语法
-                const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
-                const text = textMatch[2];
-                selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
-                // @ts-ignore
-                let content = $el?.textContent || $el?.innerText;
-                if (typeof content !== "string") {
-                    content = "";
-                }
-                return $el.matches(selector) && content?.includes(text);
-            }
-            else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
-                // regexp 语法
-                const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
-                let pattern = textMatch[2];
-                const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
-                let flags = "";
-                if (flagMatch) {
-                    pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
-                    flags = flagMatch[3];
-                }
-                const regexp = new RegExp(pattern, flags);
-                selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
-                // @ts-ignore
-                let content = $el?.textContent || $el?.innerText;
-                if (typeof content !== "string") {
-                    content = "";
+                const otherCodeList = [];
+                if (event.ctrlKey) {
+                    otherCodeList.push("ctrl");
                 }
-                return $el.matches(selector) && Boolean(content?.match(regexp));
-            }
-            else {
-                // 普通语法
-                return $el.matches(selector);
-            }
-        }
-        closest($el, selector) {
-            selector = selector.trim();
-            if (selector.match(/[^\s]{1}:empty$/gi)) {
-                // empty 语法
-                selector = selector.replace(/:empty$/gi, "");
-                const $closest = $el?.closest(selector);
-                if ($closest && $closest?.innerHTML?.trim() === "") {
-                    return $closest;
+                if (event.altKey) {
+                    otherCodeList.push("alt");
                 }
-                return null;
-            }
-            else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
-                // contains 语法
-                const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
-                const text = textMatch[2];
-                selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
-                const $closest = $el?.closest(selector);
-                if ($closest) {
-                    // @ts-ignore
-                    const content = $el?.textContent || $el?.innerText;
-                    if (typeof content === "string" && content.includes(text)) {
-                        return $closest;
-                    }
+                if (event.metaKey) {
+                    otherCodeList.push("meta");
                 }
-                return null;
-            }
-            else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
-                // regexp 语法
-                const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
-                let pattern = textMatch[2];
-                const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
-                let flags = "";
-                if (flagMatch) {
-                    pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
-                    flags = flagMatch[3];
+                if (event.shiftKey) {
+                    otherCodeList.push("shift");
                 }
-                const regexp = new RegExp(pattern, flags);
-                selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
-                const $closest = $el?.closest(selector);
-                if ($closest) {
-                    // @ts-ignore
-                    const content = $el?.textContent || $el?.innerText;
-                    if (typeof content === "string" && content.match(regexp)) {
-                        return $closest;
-                    }
+                if (typeof callback === "function") {
+                    callback(keyName, keyValue, otherCodeList, event);
                 }
-                return null;
+            };
+            that.on(element, eventName, keyboardEventCallBack, options);
+            return {
+                removeListen: () => {
+                    that.off(element, eventName, keyboardEventCallBack, options);
+                },
+            };
+        }
+        preventEvent(...args) {
+            /**
+             * 阻止事件的默认行为发生，并阻止事件传播
+             */
+            const stopEvent = (event) => {
+                /* 阻止事件的默认行为发生。例如，当点击一个链接时，浏览器会默认打开链接的URL */
+                event?.preventDefault();
+                /* 停止事件的传播，阻止它继续向更上层的元素冒泡，事件将不会再传播给其他的元素 */
+                event?.stopPropagation();
+                /* 阻止事件传播，并且还能阻止元素上的其他事件处理程序被触发 */
+                event?.stopImmediatePropagation();
+                return false;
+            };
+            if (args.length === 1) {
+                /* 直接阻止事件 */
+                return stopEvent(args[0]);
             }
             else {
-                // 普通语法
-                const $closest = $el?.closest(selector);
-                return $closest;
+                const $el = args[0];
+                let eventNameList = args[1];
+                const capture = args[2];
+                /* 添加对应的事件来阻止触发 */
+                if (typeof eventNameList === "string") {
+                    eventNameList = [eventNameList];
+                }
+                this.on($el, eventNameList, stopEvent, { capture: Boolean(capture) });
             }
         }
     }
+    new ElementEvent();
 
-    const version = "1.6.8";
+    class ElementHandler extends ElementEvent {
+        windowApi;
+        constructor(windowApiOption) {
+            super(windowApiOption);
+            this.windowApi = new WindowApi(windowApiOption);
+        }
+        /**
+         * 获取元素的选择器字符串
+         * @param $el
+         * @example
+         * DOMUtils.getElementSelector(document.querySelector("a"))
+         * > '.....'
+         */
+        getElementSelector($el) {
+            const that = this;
+            if (!$el)
+                return void 0;
+            if (!$el.parentElement)
+                return void 0;
+            /* 如果元素有id属性，则直接返回id选择器 */
+            if ($el.id)
+                return `#${$el.id}`;
+            /* 递归地获取父元素的选择器 */
+            let selector = that.getElementSelector($el.parentElement);
+            if (!selector) {
+                return $el.tagName.toLowerCase();
+            }
+            /* 如果有多个相同类型的兄弟元素，则需要添加索引 */
+            if ($el.parentElement.querySelectorAll($el.tagName).length > 1) {
+                const index = Array.prototype.indexOf.call($el.parentElement.children, $el) + 1;
+                selector += ` > ${$el.tagName.toLowerCase()}:nth-child(${index})`;
+            }
+            else {
+                selector += ` > ${$el.tagName.toLowerCase()}`;
+            }
+            return selector;
+        }
+    }
+    new ElementHandler();
 
-    class DOMUtils extends DOMUtilsEvent {
+    class DOMUtils extends ElementHandler {
         constructor(option) {
             super(option);
         }
         /** 版本号 */
         version = version;
-        attr(element, attrName, attrValue) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        /**
+         * 取消挂载在window下的DOMUtils并返回DOMUtils
+         * @example
+         * let DOMUtils = window.DOMUtils.noConflict()
+         */
+        noConflict() {
+            const that = this;
+            if (that.windowApi.window.DOMUtils) {
+                CommonUtils.delete(window, "DOMUtils");
             }
-            if (element == null) {
+            that.windowApi.window.DOMUtils = this;
+            return this;
+        }
+        attr($el, attrName, attrValue) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
+            }
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 if (attrValue == null) {
                     // 获取属性
-                    return DOMUtilsContext.attr(element[0], attrName, attrValue);
+                    return that.attr($el[0], attrName, attrValue);
                 }
                 else {
                     // 设置属性
-                    element.forEach(($ele) => {
-                        DOMUtilsContext.attr($ele, attrName, attrValue);
+                    $el.forEach(($elItem) => {
+                        that.attr($elItem, attrName, attrValue);
                     });
                     return;
                 }
             }
             if (attrValue == null) {
-                return element.getAttribute(attrName);
+                return $el.getAttribute(attrName);
             }
             else {
-                element.setAttribute(attrName, attrValue);
+                $el.setAttribute(attrName, attrValue);
             }
         }
         createElement(
@@ -1623,11 +2637,11 @@
         property, 
         /** 自定义属性 */
         attributes) {
-            const DOMUtilsContext = this;
-            const tempElement = DOMUtilsContext.windowApi.document.createElement(tagName);
+            const that = this;
+            const $el = that.windowApi.document.createElement(tagName);
             if (typeof property === "string") {
-                DOMUtilsContext.html(tempElement, property);
-                return tempElement;
+                that.html($el, property);
+                return $el;
             }
             if (property == null) {
                 property = {};
@@ -1638,10 +2652,10 @@
             Object.keys(property).forEach((key) => {
                 const value = property[key];
                 if (key === "innerHTML") {
-                    DOMUtilsContext.html(tempElement, value);
+                    that.html($el, value);
                     return;
                 }
-                tempElement[key] = value;
+                $el[key] = value;
             });
             Object.keys(attributes).forEach((key) => {
                 let value = attributes[key];
@@ -1653,12 +2667,12 @@
                     /* function转字符串 */
                     value = value.toString();
                 }
-                tempElement.setAttribute(key, value);
+                $el.setAttribute(key, value);
             });
-            return tempElement;
+            return $el;
         }
-        css(element, property, value) {
-            const DOMUtilsContext = this;
+        css($el, property, value) {
+            const that = this;
             /**
              * 把纯数字没有px的加上
              */
@@ -1672,30 +2686,30 @@
                 }
                 return propertyValue;
             }
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 if (typeof property === "string") {
                     if (value == null) {
                         // 获取属性
-                        return DOMUtilsContext.css(element[0], property);
+                        return that.css($el[0], property);
                     }
                     else {
                         // 设置属性
-                        element.forEach(($ele) => {
-                            DOMUtilsContext.css($ele, property);
+                        $el.forEach(($elItem) => {
+                            that.css($elItem, property);
                         });
                         return;
                     }
                 }
                 else if (typeof property === "object") {
                     // 设置属性
-                    element.forEach(($ele) => {
-                        DOMUtilsContext.css($ele, property);
+                    $el.forEach(($elItem) => {
+                        that.css($elItem, property);
                     });
                     return;
                 }
@@ -1707,16 +2721,16 @@
                         .trim()
                         .replace(/!important$/gi, "")
                         .trim();
-                    element.style.setProperty(propertyName, propertyValue, "important");
+                    $el.style.setProperty(propertyName, propertyValue, "important");
                 }
                 else {
                     propertyValue = handlePixe(propertyName, propertyValue);
-                    element.style.setProperty(propertyName, propertyValue);
+                    $el.style.setProperty(propertyName, propertyValue);
                 }
             };
             if (typeof property === "string") {
                 if (value == null) {
-                    return DOMUtilsContext.windowApi.globalThis.getComputedStyle(element).getPropertyValue(property);
+                    return that.windowApi.globalThis.getComputedStyle($el).getPropertyValue(property);
                 }
                 else {
                     setStyleProperty(property, value);
@@ -1733,92 +2747,92 @@
                 throw new TypeError("property must be string or object");
             }
         }
-        text(element, text) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        text($el, text) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 if (text == null) {
                     // 获取
-                    return DOMUtilsContext.text(element[0]);
+                    return that.text($el[0]);
                 }
                 else {
                     // 设置
-                    element.forEach(($ele) => {
-                        DOMUtilsContext.text($ele, text);
+                    $el.forEach(($elItem) => {
+                        that.text($elItem, text);
                     });
                 }
                 return;
             }
             if (text == null) {
-                return element.textContent || element.innerText;
+                return $el.textContent || $el.innerText;
             }
             else {
                 if (text instanceof Node) {
                     text = text.textContent || text.innerText;
                 }
-                if ("textContent" in element) {
-                    element.textContent = text;
+                if ("textContent" in $el) {
+                    $el.textContent = text;
                 }
-                else if ("innerText" in element) {
-                    element.innerText = text;
+                else if ("innerText" in $el) {
+                    $el.innerText = text;
                 }
             }
         }
-        html(element, html) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        html($el, html) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 if (html == null) {
                     // 获取
-                    return DOMUtilsContext.html(element[0]);
+                    return that.html($el[0]);
                 }
                 else {
                     // 设置
-                    element.forEach(($ele) => {
-                        DOMUtilsContext.html($ele, html);
+                    $el.forEach(($elItem) => {
+                        that.html($elItem, html);
                     });
                 }
                 return;
             }
             if (html == null) {
                 // 获取
-                return element.innerHTML;
+                return $el.innerHTML;
             }
             else {
                 // 设置
                 if (html instanceof Element) {
                     html = html.innerHTML;
                 }
-                if ("innerHTML" in element) {
-                    DOMUtilsCommonUtils.setSafeHTML(element, html);
+                if ("innerHTML" in $el) {
+                    CommonUtils.setSafeHTML($el, html);
                 }
             }
         }
         /**
          * 获取移动元素的transform偏移
          */
-        getTransform(element, isShow = false) {
-            const DOMUtilsContext = this;
+        getTransform($el, isShow = false) {
+            const that = this;
             let transform_left = 0;
             let transform_top = 0;
-            if (!(isShow || (!isShow && DOMUtilsCommonUtils.isShow(element)))) {
+            if (!(isShow || (!isShow && CommonUtils.isShow($el)))) {
                 /* 未显示 */
-                const { recovery } = DOMUtilsCommonUtils.showElement(element);
-                const transformInfo = DOMUtilsContext.getTransform(element, true);
+                const { recovery } = CommonUtils.forceShow($el);
+                const transformInfo = that.getTransform($el, true);
                 recovery();
                 return transformInfo;
             }
-            const elementTransform = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element).transform;
+            const elementTransform = that.windowApi.globalThis.getComputedStyle($el).transform;
             if (elementTransform != null && elementTransform !== "none" && elementTransform !== "") {
                 const elementTransformSplit = elementTransform.match(/\((.+)\)/)?.[1].split(",");
                 if (elementTransformSplit) {
@@ -1835,225 +2849,189 @@
                 transformTop: transform_top,
             };
         }
-        val(element, value) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        val($el, value) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 if (value == null) {
                     // 获取
-                    return DOMUtilsContext.val(element[0]);
+                    return that.val($el[0]);
                 }
                 else {
                     // 设置
-                    element.forEach(($ele) => {
-                        DOMUtilsContext.val($ele, value);
+                    $el.forEach(($elItem) => {
+                        that.val($elItem, value);
                     });
                 }
                 return;
             }
             if (value == null) {
                 // 获取
-                if (element.localName === "input" && (element.type === "checkbox" || element.type === "radio")) {
-                    return element.checked;
+                if ($el.localName === "input" && ($el.type === "checkbox" || $el.type === "radio")) {
+                    return $el.checked;
                 }
                 else {
-                    return element.value;
+                    return $el.value;
                 }
             }
             else {
                 // 设置
-                if (element.localName === "input" && (element.type === "checkbox" || element.type === "radio")) {
-                    element.checked = !!value;
+                if ($el.localName === "input" && ($el.type === "checkbox" || $el.type === "radio")) {
+                    $el.checked = !!value;
                 }
                 else {
-                    element.value = value;
+                    $el.value = value;
                 }
             }
         }
-        prop(element, propName, propValue) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        prop($el, propName, propValue) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 if (propValue == null) {
                     // 获取
-                    return DOMUtilsContext.prop(element[0], propName);
+                    return that.prop($el[0], propName);
                 }
                 else {
                     // 设置
-                    element.forEach(($ele) => {
-                        DOMUtilsContext.prop($ele, propName, propValue);
+                    $el.forEach(($elItem) => {
+                        that.prop($elItem, propName, propValue);
                     });
                 }
                 return;
             }
             if (propValue == null) {
-                return Reflect.get(element, propName);
+                return Reflect.get($el, propName);
             }
             else {
-                if (element instanceof Element && propName === "innerHTML") {
-                    DOMUtilsContext.html(element, propValue);
+                if ($el instanceof Element && propName === "innerHTML") {
+                    that.html($el, propValue);
                 }
                 else {
-                    Reflect.set(element, propName, propValue);
+                    Reflect.set($el, propName, propValue);
                 }
             }
         }
         /**
          * 移除元素的属性
-         * @param element 目标元素
+         * @param $el 目标元素
          * @param attrName 属性名
          * @example
          * // 移除元素a.xx的属性data-value
          * DOMUtils.removeAttr(document.querySelector("a.xx"),"data-value")
          * DOMUtils.removeAttr("a.xx","data-value")
          * */
-        removeAttr(element, attrName) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        removeAttr($el, attrName) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 // 设置
-                element.forEach(($ele) => {
-                    DOMUtilsContext.removeAttr($ele, attrName);
+                $el.forEach(($elItem) => {
+                    that.removeAttr($elItem, attrName);
                 });
                 return;
             }
-            element.removeAttribute(attrName);
+            $el.removeAttribute(attrName);
         }
         /**
          * 移除元素class名
-         * @param element 目标元素
+         * @param $el 目标元素
          * @param className 类名
          * @example
          * // 移除元素a.xx的className为xx
          * DOMUtils.removeClass(document.querySelector("a.xx"),"xx")
          * DOMUtils.removeClass("a.xx","xx")
          */
-        removeClass(element, className) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        removeClass($el, className) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 // 设置
-                element.forEach(($ele) => {
-                    DOMUtilsContext.removeClass($ele, className);
+                $el.forEach(($elItem) => {
+                    that.removeClass($elItem, className);
                 });
                 return;
             }
             if (className == null) {
                 // 清空全部className
-                element.className = "";
+                $el.className = "";
             }
             else {
                 if (!Array.isArray(className)) {
                     className = className.trim().split(" ");
                 }
                 className.forEach((itemClassName) => {
-                    element.classList.remove(itemClassName);
+                    $el.classList.remove(itemClassName);
                 });
             }
         }
         /**
          * 移除元素的属性
-         * @param element 目标元素
+         * @param $el 目标元素
          * @param propName 属性名
          * @example
          * // 移除元素a.xx的href属性
          * DOMUtils.removeProp(document.querySelector("a.xx"),"href")
          * DOMUtils.removeProp("a.xx","href")
          * */
-        removeProp(element, propName) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
-            }
-            if (element == null) {
-                return;
-            }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
-                // 设置
-                element.forEach(($ele) => {
-                    DOMUtilsContext.removeProp($ele, propName);
-                });
-                return;
-            }
-            DOMUtilsCommonUtils.delete(element, propName);
-        }
-        /**
-         * 将一个元素替换为另一个元素
-         * @param element 目标元素
-         * @param newElement 新元素
-         * @example
-         * // 替换元素a.xx为b.xx
-         * DOMUtils.replaceWith(document.querySelector("a.xx"),document.querySelector("b.xx"))
-         * DOMUtils.replaceWith("a.xx",'<b class="xx"></b>')
-         */
-        replaceWith(element, newElement) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        removeProp($el, propName) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 // 设置
-                element.forEach(($ele) => {
-                    DOMUtilsContext.replaceWith($ele, newElement);
+                $el.forEach(($elItem) => {
+                    that.removeProp($elItem, propName);
                 });
                 return;
             }
-            if (typeof newElement === "string") {
-                newElement = DOMUtilsContext.parseHTML(newElement, false, false);
-            }
-            const $parent = element.parentElement;
-            if ($parent) {
-                $parent.replaceChild(newElement, element);
-            }
-            else {
-                DOMUtilsContext.after(element, newElement);
-                element.remove();
-            }
+            CommonUtils.delete($el, propName);
         }
         /**
          * 给元素添加class
-         * @param element 目标元素
+         * @param $el 目标元素
          * @param className class名
          * @example
          * // 元素a.xx的className添加_vue_
          * DOMUtils.addClass(document.querySelector("a.xx"),"_vue_")
          * DOMUtils.addClass("a.xx","_vue_")
          * */
-        addClass(element, className) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        addClass($el, className) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 // 设置
-                element.forEach(($ele) => {
-                    DOMUtilsContext.addClass($ele, className);
+                $el.forEach(($elItem) => {
+                    that.addClass($elItem, className);
                 });
                 return;
             }
@@ -2064,31 +3042,31 @@
                 if (itemClassName.trim() == "") {
                     return;
                 }
-                element.classList.add(itemClassName);
+                $el.classList.add(itemClassName);
             });
         }
         /**
          * 判断元素是否存在className
-         * @param element
+         * @param $el
          * @param className
          */
-        hasClass(element, className) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        hasClass($el, className) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return false;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 let flag = true;
-                for (let index = 0; index < element.length; index++) {
-                    const $ele = element[index];
-                    flag = flag && DOMUtilsContext.hasClass($ele, className);
+                for (let index = 0; index < $el.length; index++) {
+                    const $elItem = $el[index];
+                    flag = flag && that.hasClass($elItem, className);
                 }
                 return flag;
             }
-            if (!element?.classList) {
+            if (!$el?.classList) {
                 return false;
             }
             if (!Array.isArray(className)) {
@@ -2096,7 +3074,7 @@
             }
             for (let index = 0; index < className.length; index++) {
                 const item = className[index].trim();
-                if (!element.classList.contains(item)) {
+                if (!$el.classList.contains(item)) {
                     return false;
                 }
             }
@@ -2104,25 +3082,25 @@
         }
         /**
          * 函数在元素内部末尾添加子元素或HTML字符串
-         * @param element 目标元素
+         * @param $el 目标元素
          * @param content 子元素或HTML字符串
          * @example
          * // 元素a.xx的内部末尾添加一个元素
          * DOMUtils.append(document.querySelector("a.xx"),document.querySelector("b.xx"))
          * DOMUtils.append("a.xx","'<b class="xx"></b>")
          * */
-        append(element, content) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        append($el, content) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 // 设置
-                element.forEach(($ele) => {
-                    DOMUtilsContext.append($ele, content);
+                $el.forEach(($elItem) => {
+                    that.append($elItem, content);
                 });
                 return;
             }
@@ -2130,12 +3108,12 @@
                 if (typeof content === "string") {
                     if (ele instanceof DocumentFragment) {
                         if (typeof text === "string") {
-                            text = DOMUtilsContext.parseHTML(text, true, false);
+                            text = that.toElement(text, true, false);
                         }
                         ele.appendChild(text);
                     }
                     else {
-                        ele.insertAdjacentHTML("beforeend", DOMUtilsCommonUtils.getSafeHTML(text));
+                        ele.insertAdjacentHTML("beforeend", CommonUtils.createSafeHTML(text));
                     }
                 }
                 else {
@@ -2144,96 +3122,96 @@
             }
             if (Array.isArray(content) || content instanceof NodeList) {
                 /* 数组 */
-                const fragment = DOMUtilsContext.windowApi.document.createDocumentFragment();
+                const fragment = that.windowApi.document.createDocumentFragment();
                 content.forEach((ele) => {
                     if (typeof ele === "string") {
                         // 转为元素
-                        ele = DOMUtilsContext.parseHTML(ele, true, false);
+                        ele = that.toElement(ele, true, false);
                     }
                     fragment.appendChild(ele);
                 });
-                element.appendChild(fragment);
+                $el.appendChild(fragment);
             }
             else {
-                elementAppendChild(element, content);
+                elementAppendChild($el, content);
             }
         }
         /**
          * 函数 在元素内部开头添加子元素或HTML字符串
-         * @param element 目标元素
+         * @param $el 目标元素
          * @param content 子元素或HTML字符串
          * @example
          * // 元素a.xx内部开头添加一个元素
          * DOMUtils.prepend(document.querySelector("a.xx"),document.querySelector("b.xx"))
          * DOMUtils.prepend("a.xx","'<b class="xx"></b>")
          * */
-        prepend(element, content) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        prepend($el, content) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 // 设置
-                element.forEach(($ele) => {
-                    DOMUtilsContext.prepend($ele, content);
+                $el.forEach(($elItem) => {
+                    that.prepend($elItem, content);
                 });
                 return;
             }
             if (typeof content === "string") {
-                if (element instanceof DocumentFragment) {
-                    content = DOMUtilsContext.parseHTML(content, true, false);
-                    element.prepend(content);
+                if ($el instanceof DocumentFragment) {
+                    content = that.toElement(content, true, false);
+                    $el.prepend(content);
                 }
                 else {
-                    element.insertAdjacentHTML("afterbegin", DOMUtilsCommonUtils.getSafeHTML(content));
+                    $el.insertAdjacentHTML("afterbegin", CommonUtils.createSafeHTML(content));
                 }
             }
             else {
-                const $firstChild = element.firstChild;
+                const $firstChild = $el.firstChild;
                 if ($firstChild == null) {
-                    element.prepend(content);
+                    $el.prepend(content);
                 }
                 else {
-                    element.insertBefore(content, $firstChild);
+                    $el.insertBefore(content, $firstChild);
                 }
             }
         }
         /**
          * 在元素后面添加兄弟元素或HTML字符串
-         * @param element 目标元素
+         * @param $el 目标元素
          * @param content 兄弟元素或HTML字符串
          * @example
          * // 元素a.xx后面添加一个元素
          * DOMUtils.after(document.querySelector("a.xx"),document.querySelector("b.xx"))
          * DOMUtils.after("a.xx","'<b class="xx"></b>")
          * */
-        after(element, content) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        after($el, content) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 // 设置
-                element.forEach(($ele) => {
-                    DOMUtilsContext.after($ele, content);
+                $el.forEach(($elItem) => {
+                    that.after($elItem, content);
                 });
                 return;
             }
             if (typeof content === "string") {
-                element.insertAdjacentHTML("afterend", DOMUtilsCommonUtils.getSafeHTML(content));
+                $el.insertAdjacentHTML("afterend", CommonUtils.createSafeHTML(content));
             }
             else {
-                const $parent = element.parentElement;
-                const $nextSlibling = element.nextSibling;
+                const $parent = $el.parentElement;
+                const $nextSlibling = $el.nextSibling;
                 if (!$parent || $nextSlibling) {
                     // 任意一个不行
-                    element.after(content);
+                    $el.after(content);
                 }
                 else {
                     $parent.insertBefore(content, $nextSlibling);
@@ -2242,157 +3220,157 @@
         }
         /**
          * 在元素前面添加兄弟元素或HTML字符串
-         * @param element 目标元素
+         * @param $el 目标元素
          * @param content 兄弟元素或HTML字符串
          * @example
          * // 元素a.xx前面添加一个元素
          * DOMUtils.before(document.querySelector("a.xx"),document.querySelector("b.xx"))
          * DOMUtils.before("a.xx","'<b class="xx"></b>")
          * */
-        before(element, content) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        before($el, content) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 // 设置
-                element.forEach(($ele) => {
-                    DOMUtilsContext.before($ele, content);
+                $el.forEach(($elItem) => {
+                    that.before($elItem, content);
                 });
                 return;
             }
             if (typeof content === "string") {
-                element.insertAdjacentHTML("beforebegin", DOMUtilsCommonUtils.getSafeHTML(content));
+                $el.insertAdjacentHTML("beforebegin", CommonUtils.createSafeHTML(content));
             }
             else {
-                const $parent = element.parentElement;
+                const $parent = $el.parentElement;
                 if (!$parent) {
-                    element.before(content);
+                    $el.before(content);
                 }
                 else {
-                    $parent.insertBefore(content, element);
+                    $parent.insertBefore(content, $el);
                 }
             }
         }
         /**
          * 移除元素
-         * @param element 目标元素
+         * @param $el 目标元素
          * @example
          * // 元素a.xx前面添加一个元素
          * DOMUtils.remove(document.querySelector("a.xx"))
          * DOMUtils.remove(document.querySelectorAll("a.xx"))
          * DOMUtils.remove("a.xx")
          * */
-        remove(element) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        remove($el) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
-                element.forEach(($ele) => {
-                    DOMUtilsContext.remove($ele);
+            if (CommonUtils.isNodeList($el)) {
+                $el.forEach(($elItem) => {
+                    that.remove($elItem);
                 });
                 return;
             }
-            if (typeof element.remove === "function") {
-                element.remove();
+            if (typeof $el.remove === "function") {
+                $el.remove();
             }
-            else if (element.parentElement) {
-                element.parentElement.removeChild(element);
+            else if ($el.parentElement) {
+                $el.parentElement.removeChild($el);
             }
-            else if (element.parentNode) {
-                element.parentNode.removeChild(element);
+            else if ($el.parentNode) {
+                $el.parentNode.removeChild($el);
             }
         }
         /**
          * 移除元素的所有子元素
-         * @param element 目标元素
+         * @param $el 目标元素
          * @example
          * // 移除元素a.xx元素的所有子元素
          * DOMUtils.empty(document.querySelector("a.xx"))
          * DOMUtils.empty("a.xx")
          * */
-        empty(element) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        empty($el) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 // 设置
-                element.forEach(($ele) => {
-                    DOMUtilsContext.empty($ele);
+                $el.forEach(($elItem) => {
+                    that.empty($elItem);
                 });
                 return;
             }
-            if (element.innerHTML) {
-                element.innerHTML = "";
+            if ($el.innerHTML) {
+                $el.innerHTML = "";
             }
-            else if (element.textContent) {
-                element.textContent = "";
+            else if ($el.textContent) {
+                $el.textContent = "";
             }
         }
         /**
          * 获取元素相对于文档的偏移坐标（加上文档的滚动条）
-         * @param element 目标元素
+         * @param $el 目标元素
          * @example
          * // 获取元素a.xx的对于文档的偏移坐标
          * DOMUtils.offset(document.querySelector("a.xx"))
          * DOMUtils.offset("a.xx")
          * > 0
          */
-        offset(element) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selector(element);
+        offset($el) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selector($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            const rect = element.getBoundingClientRect();
+            const rect = $el.getBoundingClientRect();
             return {
                 /** y轴偏移 */
-                top: rect.top + DOMUtilsContext.windowApi.globalThis.scrollY,
+                top: rect.top + that.windowApi.globalThis.scrollY,
                 /** x轴偏移 */
-                left: rect.left + DOMUtilsContext.windowApi.globalThis.scrollX,
+                left: rect.left + that.windowApi.globalThis.scrollX,
             };
         }
-        width(element, isShow = false) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selector(element);
+        width($el, isShow = false) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selector($el);
             }
-            if (DOMUtilsCommonUtils.isWin(element)) {
-                return DOMUtilsContext.windowApi.window.document.documentElement.clientWidth;
+            if (CommonUtils.isWin($el)) {
+                return that.windowApi.window.document.documentElement.clientWidth;
             }
-            if (element.nodeType === 9) {
+            if ($el.nodeType === 9) {
                 /* Document文档节点 */
-                element = element;
-                return Math.max(element.body.scrollWidth, element.documentElement.scrollWidth, element.body.offsetWidth, element.documentElement.offsetWidth, element.documentElement.clientWidth);
+                $el = $el;
+                return Math.max($el.body.scrollWidth, $el.documentElement.scrollWidth, $el.body.offsetWidth, $el.documentElement.offsetWidth, $el.documentElement.clientWidth);
             }
-            if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
+            if (isShow || (!isShow && CommonUtils.isShow($el))) {
                 /* 已显示 */
                 /* 不从style中获取对应的宽度，因为可能使用了class定义了width !important */
-                element = element;
+                $el = $el;
                 /* 如果element.style.width为空  则从css里面获取是否定义了width信息如果定义了 则读取css里面定义的宽度width */
-                if (parseFloat(DOMUtilsCommonUtils.getStyleValue(element, "width").toString()) > 0) {
-                    return parseFloat(DOMUtilsCommonUtils.getStyleValue(element, "width").toString());
+                if (parseFloat(CommonUtils.getStyleValue($el, "width").toString()) > 0) {
+                    return parseFloat(CommonUtils.getStyleValue($el, "width").toString());
                 }
                 /* 如果从css里获取到的值不是大于0  可能是auto 则通过offsetWidth来进行计算 */
-                if (element.offsetWidth > 0) {
-                    const borderLeftWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderLeftWidth");
-                    const borderRightWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderRightWidth");
-                    const paddingLeft = DOMUtilsCommonUtils.getStyleValue(element, "paddingLeft");
-                    const paddingRight = DOMUtilsCommonUtils.getStyleValue(element, "paddingRight");
-                    const backHeight = parseFloat(element.offsetWidth.toString()) -
+                if ($el.offsetWidth > 0) {
+                    const borderLeftWidth = CommonUtils.getStyleValue($el, "borderLeftWidth");
+                    const borderRightWidth = CommonUtils.getStyleValue($el, "borderRightWidth");
+                    const paddingLeft = CommonUtils.getStyleValue($el, "paddingLeft");
+                    const paddingRight = CommonUtils.getStyleValue($el, "paddingRight");
+                    const backHeight = parseFloat($el.offsetWidth.toString()) -
                         parseFloat(borderLeftWidth.toString()) -
                         parseFloat(borderRightWidth.toString()) -
                         parseFloat(paddingLeft.toString()) -
@@ -2403,41 +3381,41 @@
             }
             else {
                 /* 未显示 */
-                element = element;
-                const { recovery } = DOMUtilsCommonUtils.showElement(element);
-                const width = DOMUtilsContext.width(element, true);
+                $el = $el;
+                const { recovery } = CommonUtils.forceShow($el);
+                const width = that.width($el, true);
                 recovery();
                 return width;
             }
         }
-        height(element, isShow = false) {
-            const DOMUtilsContext = this;
-            if (DOMUtilsCommonUtils.isWin(element)) {
-                return DOMUtilsContext.windowApi.window.document.documentElement.clientHeight;
+        height($el, isShow = false) {
+            const that = this;
+            if (CommonUtils.isWin($el)) {
+                return that.windowApi.window.document.documentElement.clientHeight;
             }
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selector(element);
+            if (typeof $el === "string") {
+                $el = that.selector($el);
             }
-            if (element.nodeType === 9) {
-                element = element;
+            if ($el.nodeType === 9) {
+                $el = $el;
                 /* Document文档节点 */
-                return Math.max(element.body.scrollHeight, element.documentElement.scrollHeight, element.body.offsetHeight, element.documentElement.offsetHeight, element.documentElement.clientHeight);
+                return Math.max($el.body.scrollHeight, $el.documentElement.scrollHeight, $el.body.offsetHeight, $el.documentElement.offsetHeight, $el.documentElement.clientHeight);
             }
-            if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
-                element = element;
+            if (isShow || (!isShow && CommonUtils.isShow($el))) {
+                $el = $el;
                 /* 已显示 */
                 /* 从style中获取对应的高度，因为可能使用了class定义了width !important */
                 /* 如果element.style.height为空  则从css里面获取是否定义了height信息如果定义了 则读取css里面定义的高度height */
-                if (parseFloat(DOMUtilsCommonUtils.getStyleValue(element, "height").toString()) > 0) {
-                    return parseFloat(DOMUtilsCommonUtils.getStyleValue(element, "height").toString());
+                if (parseFloat(CommonUtils.getStyleValue($el, "height").toString()) > 0) {
+                    return parseFloat(CommonUtils.getStyleValue($el, "height").toString());
                 }
                 /* 如果从css里获取到的值不是大于0  可能是auto 则通过offsetHeight来进行计算 */
-                if (element.offsetHeight > 0) {
-                    const borderTopWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderTopWidth");
-                    const borderBottomWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderBottomWidth");
-                    const paddingTop = DOMUtilsCommonUtils.getStyleValue(element, "paddingTop");
-                    const paddingBottom = DOMUtilsCommonUtils.getStyleValue(element, "paddingBottom");
-                    const backHeight = parseFloat(element.offsetHeight.toString()) -
+                if ($el.offsetHeight > 0) {
+                    const borderTopWidth = CommonUtils.getStyleValue($el, "borderTopWidth");
+                    const borderBottomWidth = CommonUtils.getStyleValue($el, "borderBottomWidth");
+                    const paddingTop = CommonUtils.getStyleValue($el, "paddingTop");
+                    const paddingBottom = CommonUtils.getStyleValue($el, "paddingBottom");
+                    const backHeight = parseFloat($el.offsetHeight.toString()) -
                         parseFloat(borderTopWidth.toString()) -
                         parseFloat(borderBottomWidth.toString()) -
                         parseFloat(paddingTop.toString()) -
@@ -2448,200 +3426,160 @@
             }
             else {
                 /* 未显示 */
-                element = element;
-                const { recovery } = DOMUtilsCommonUtils.showElement(element);
-                const height = DOMUtilsContext.height(element, true);
+                $el = $el;
+                const { recovery } = CommonUtils.forceShow($el);
+                const height = that.height($el, true);
                 recovery();
                 return height;
             }
         }
-        outerWidth(element, isShow = false) {
-            const DOMUtilsContext = this;
-            if (DOMUtilsCommonUtils.isWin(element)) {
-                return DOMUtilsContext.windowApi.window.innerWidth;
+        outerWidth($el, isShow = false) {
+            const that = this;
+            if (CommonUtils.isWin($el)) {
+                return that.windowApi.window.innerWidth;
             }
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selector(element);
+            if (typeof $el === "string") {
+                $el = that.selector($el);
             }
-            element = element;
-            if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
-                const style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
-                const marginLeft = DOMUtilsCommonUtils.getStyleValue(style, "marginLeft");
-                const marginRight = DOMUtilsCommonUtils.getStyleValue(style, "marginRight");
-                return element.offsetWidth + marginLeft + marginRight;
+            $el = $el;
+            if (isShow || (!isShow && CommonUtils.isShow($el))) {
+                const style = that.windowApi.globalThis.getComputedStyle($el, null);
+                const marginLeft = CommonUtils.getStyleValue(style, "marginLeft");
+                const marginRight = CommonUtils.getStyleValue(style, "marginRight");
+                return $el.offsetWidth + marginLeft + marginRight;
             }
             else {
-                const { recovery } = DOMUtilsCommonUtils.showElement(element);
-                const outerWidth = DOMUtilsContext.outerWidth(element, true);
+                const { recovery } = CommonUtils.forceShow($el);
+                const outerWidth = that.outerWidth($el, true);
                 recovery();
                 return outerWidth;
             }
         }
-        outerHeight(element, isShow = false) {
-            const DOMUtilsContext = this;
-            if (DOMUtilsCommonUtils.isWin(element)) {
-                return DOMUtilsContext.windowApi.window.innerHeight;
+        outerHeight($el, isShow = false) {
+            const that = this;
+            if (CommonUtils.isWin($el)) {
+                return that.windowApi.window.innerHeight;
             }
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selector(element);
+            if (typeof $el === "string") {
+                $el = that.selector($el);
             }
-            element = element;
-            if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
-                const style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
-                const marginTop = DOMUtilsCommonUtils.getStyleValue(style, "marginTop");
-                const marginBottom = DOMUtilsCommonUtils.getStyleValue(style, "marginBottom");
-                return element.offsetHeight + marginTop + marginBottom;
+            $el = $el;
+            if (isShow || (!isShow && CommonUtils.isShow($el))) {
+                const style = that.windowApi.globalThis.getComputedStyle($el, null);
+                const marginTop = CommonUtils.getStyleValue(style, "marginTop");
+                const marginBottom = CommonUtils.getStyleValue(style, "marginBottom");
+                return $el.offsetHeight + marginTop + marginBottom;
             }
             else {
-                const { recovery } = DOMUtilsCommonUtils.showElement(element);
-                const outerHeight = DOMUtilsContext.outerHeight(element, true);
+                const { recovery } = CommonUtils.forceShow($el);
+                const outerHeight = that.outerHeight($el, true);
                 recovery();
                 return outerHeight;
             }
         }
         /**
-         * 在一定时间内改变元素的样式属性，实现动画效果
-         * @param element 需要进行动画的元素
-         * @param styles 动画结束时元素的样式属性
-         * @param duration 动画持续时间，单位为毫秒
-         * @param callback 动画结束后执行的函数
+         * 将一个元素替换为另一个元素
+         * @param $el 目标元素
+         * @param $newEl 新元素
          * @example
-         * // 监听元素a.xx的从显示变为隐藏
-         * DOMUtils.animate(document.querySelector("a.xx"),{ top:100},1000,function(){
-         *   console.log("已往上位移100px")
-         * })
+         * // 替换元素a.xx为b.xx
+         * DOMUtils.replaceWith(document.querySelector("a.xx"),document.querySelector("b.xx"))
+         * DOMUtils.replaceWith("a.xx",'<b class="xx"></b>')
          */
-        animate(element, styles, duration = 1000, callback = null) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        replaceWith($el, $newEl) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 // 设置
-                element.forEach(($ele) => {
-                    DOMUtilsContext.animate($ele, styles, duration, callback);
+                $el.forEach(($elItem) => {
+                    that.replaceWith($elItem, $newEl);
                 });
                 return;
             }
-            if (typeof duration !== "number" || duration <= 0) {
-                throw new TypeError("duration must be a positive number");
-            }
-            if (typeof callback !== "function" && callback !== void 0) {
-                throw new TypeError("callback must be a function or null");
-            }
-            if (typeof styles !== "object" || styles === void 0) {
-                throw new TypeError("styles must be an object");
+            if (typeof $newEl === "string") {
+                $newEl = that.toElement($newEl, false, false);
             }
-            if (Object.keys(styles).length === 0) {
-                throw new Error("styles must contain at least one property");
+            const $parent = $el.parentElement;
+            if ($parent) {
+                $parent.replaceChild($newEl, $el);
             }
-            const start = performance.now();
-            const from = {};
-            const to = {};
-            for (const prop in styles) {
-                from[prop] = element.style[prop] || DOMUtilsContext.windowApi.globalThis.getComputedStyle(element)[prop];
-                to[prop] = styles[prop];
+            else {
+                that.after($el, $newEl);
+                $el.remove();
             }
-            const timer = DOMUtilsCommonUtils.setInterval(function () {
-                const timePassed = performance.now() - start;
-                let progress = timePassed / duration;
-                if (progress > 1) {
-                    progress = 1;
-                }
-                for (const prop in styles) {
-                    element.style[prop] = from[prop] + (to[prop] - from[prop]) * progress + "px";
-                }
-                if (progress === 1) {
-                    DOMUtilsCommonUtils.clearInterval(timer);
-                    if (callback) {
-                        callback();
-                    }
-                }
-            }, 10);
         }
         /**
          * 将一个元素包裹在指定的HTML元素中
-         * @param element 要包裹的元素
+         * @param $el 要包裹的元素
          * @param wrapperHTML 要包裹的HTML元素的字符串表示形式
          * @example
          * // 将a.xx元素外面包裹一层div
          * DOMUtils.wrap(document.querySelector("a.xx"),"<div></div>")
          */
-        wrap(element, wrapperHTML) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+        wrap($el, wrapperHTML) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selectorAll($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 // 设置
-                element.forEach(($ele) => {
-                    DOMUtilsContext.wrap($ele, wrapperHTML);
+                $el.forEach(($elItem) => {
+                    that.wrap($elItem, wrapperHTML);
                 });
                 return;
             }
-            element = element;
+            $el = $el;
             // 创建一个新的div元素，并将wrapperHTML作为其innerHTML
-            const wrapper = DOMUtilsContext.windowApi.document.createElement("div");
-            DOMUtilsContext.html(wrapper, wrapperHTML);
-            const wrapperFirstChild = wrapper.firstChild;
+            const $wrapper = that.windowApi.document.createElement("div");
+            that.html($wrapper, wrapperHTML);
+            const wrapperFirstChild = $wrapper.firstChild;
             // 将要包裹的元素插入目标元素前面
-            const parentElement = element.parentElement;
-            parentElement.insertBefore(wrapperFirstChild, element);
+            const parentElement = $el.parentElement;
+            parentElement.insertBefore(wrapperFirstChild, $el);
             // 将要包裹的元素移动到wrapper中
-            wrapperFirstChild.appendChild(element);
+            wrapperFirstChild.appendChild($el);
         }
-        prev(element) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selector(element);
+        prev($el) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selector($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            return element.previousElementSibling;
+            return $el.previousElementSibling;
         }
-        next(element) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selector(element);
+        next($el) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selector($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            return element.nextElementSibling;
-        }
-        /**
-         * 取消挂载在window下的DOMUtils并返回DOMUtils
-         * @example
-         * let DOMUtils = window.DOMUtils.noConflict()
-         */
-        noConflict() {
-            const DOMUtilsContext = this;
-            if (DOMUtilsContext.windowApi.window.DOMUtils) {
-                DOMUtilsCommonUtils.delete(window, "DOMUtils");
-            }
-            DOMUtilsContext.windowApi.window.DOMUtils = this;
-            return this;
+            return $el.nextElementSibling;
         }
-        siblings(element) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selector(element);
+        siblings($el) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selector($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            return Array.from(element.parentElement.children).filter((child) => child !== element);
+            return Array.from($el.parentElement.children).filter(($child) => $child !== $el);
         }
         /**
          * 获取当前元素的父元素
-         * @param element 当前元素
+         * @param $el 当前元素
          * @returns 父元素
          * @example
          * // 获取a.xx元素的父元素
@@ -2649,27 +3587,27 @@
          * DOMUtils.parent("a.xx")
          * > <div ...>....</div>
          */
-        parent(element) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selector(element);
+        parent($el) {
+            const that = this;
+            if (typeof $el === "string") {
+                $el = that.selector($el);
             }
-            if (element == null) {
+            if ($el == null) {
                 return;
             }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
+            if (CommonUtils.isNodeList($el)) {
                 const resultArray = [];
-                element.forEach(($ele) => {
-                    resultArray.push(DOMUtilsContext.parent($ele));
+                $el.forEach(($elItem) => {
+                    resultArray.push(that.parent($elItem));
                 });
                 return resultArray;
             }
             else {
-                return element.parentElement;
+                return $el.parentElement;
             }
         }
-        parseHTML(html, useParser = false, isComplete = false) {
-            const DOMUtilsContext = this;
+        toElement(html, useParser = false, isComplete = false) {
+            const that = this;
             // 去除html前后的空格
             html = html.trim();
             function parseHTMLByDOMParser() {
@@ -2682,13 +3620,13 @@
                 }
             }
             function parseHTMLByCreateDom() {
-                const tempDIV = DOMUtilsContext.windowApi.document.createElement("div");
-                DOMUtilsContext.html(tempDIV, html);
+                const $el = that.windowApi.document.createElement("div");
+                that.html($el, html);
                 if (isComplete) {
-                    return tempDIV;
+                    return $el;
                 }
                 else {
-                    return tempDIV.firstChild;
+                    return $el.firstElementChild ?? $el.firstChild;
                 }
             }
             if (useParser) {
@@ -2733,213 +3671,6 @@
                 .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, checkVisiblie = true) {
-            const DOMUtilsContext = this;
-            if (target == null) {
-                return;
-            }
-            if (typeof target === "string") {
-                target = DOMUtilsContext.selectorAll(target);
-            }
-            if (target instanceof NodeList || target instanceof Array) {
-                target = target;
-                for (const element of target) {
-                    DOMUtilsContext.show(element, checkVisiblie);
-                }
-            }
-            else {
-                target = target;
-                target.style.display = "";
-                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, checkVisiblie = true) {
-            const DOMUtilsContext = this;
-            if (target == null) {
-                return;
-            }
-            if (typeof target === "string") {
-                target = DOMUtilsContext.selectorAll(target);
-            }
-            if (target instanceof NodeList || target instanceof Array) {
-                target = target;
-                for (const element of target) {
-                    DOMUtilsContext.hide(element, checkVisiblie);
-                }
-            }
-            else {
-                target = target;
-                target.style.display = "none";
-                if (checkVisiblie) {
-                    if (DOMUtilsCommonUtils.isShow(target)) {
-                        /* 仍然是显示，尝试使用强覆盖 */
-                        target.style.setProperty("display", "none", "important");
-                    }
-                }
-            }
-        }
-        /**
-         * 淡入元素
-         * @param element 当前元素
-         * @param duration 动画持续时间（毫秒），默认400毫秒
-         * @param callback 动画结束的回调
-         * @example
-         * // 元素a.xx淡入
-         * DOMUtils.fadeIn(document.querySelector("a.xx"),2500,()=>{
-         *   console.log("淡入完毕");
-         * })
-         * DOMUtils.fadeIn("a.xx",undefined,()=>{
-         *   console.log("淡入完毕");
-         * })
-         */
-        fadeIn(element, duration = 400, callback) {
-            if (element == null) {
-                return;
-            }
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
-            }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
-                // 设置
-                element.forEach(($ele) => {
-                    DOMUtilsContext.fadeIn($ele, duration, callback);
-                });
-                return;
-            }
-            element.style.opacity = "0";
-            element.style.display = "";
-            let start = null;
-            let timer = null;
-            function step(timestamp) {
-                if (!start)
-                    start = timestamp;
-                const progress = timestamp - start;
-                element = element;
-                element.style.opacity = Math.min(progress / duration, 1).toString();
-                if (progress < duration) {
-                    DOMUtilsContext.windowApi.window.requestAnimationFrame(step);
-                }
-                else {
-                    if (callback && typeof callback === "function") {
-                        callback();
-                    }
-                    DOMUtilsContext.windowApi.window.cancelAnimationFrame(timer);
-                }
-            }
-            timer = DOMUtilsContext.windowApi.window.requestAnimationFrame(step);
-        }
-        /**
-         * 淡出元素
-         * @param element 当前元素
-         * @param duration 动画持续时间（毫秒），默认400毫秒
-         * @param callback 动画结束的回调
-         * @example
-         * // 元素a.xx淡出
-         * DOMUtils.fadeOut(document.querySelector("a.xx"),2500,()=>{
-         *   console.log("淡出完毕");
-         * })
-         * DOMUtils.fadeOut("a.xx",undefined,()=>{
-         *   console.log("淡出完毕");
-         * })
-         */
-        fadeOut(element, duration = 400, callback) {
-            const DOMUtilsContext = this;
-            if (element == null) {
-                return;
-            }
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
-            }
-            if (DOMUtilsCommonUtils.isNodeList(element)) {
-                // 设置
-                element.forEach(($ele) => {
-                    DOMUtilsContext.fadeOut($ele, duration, callback);
-                });
-                return;
-            }
-            element.style.opacity = "1";
-            let start = null;
-            let timer = null;
-            function step(timestamp) {
-                if (!start)
-                    start = timestamp;
-                const progress = timestamp - start;
-                element = element;
-                element.style.opacity = Math.max(1 - progress / duration, 0).toString();
-                if (progress < duration) {
-                    DOMUtilsContext.windowApi.window.requestAnimationFrame(step);
-                }
-                else {
-                    element.style.display = "none";
-                    if (typeof callback === "function") {
-                        callback();
-                    }
-                    DOMUtilsContext.windowApi.window.cancelAnimationFrame(timer);
-                }
-            }
-            timer = DOMUtilsContext.windowApi.window.requestAnimationFrame(step);
-        }
-        /**
-         * 切换元素的显示和隐藏状态
-         * @param element 当前元素
-         * @param checkVisiblie 是否检测元素是否显示
-         * @example
-         * // 如果元素a.xx当前是隐藏，则显示，如果是显示，则隐藏
-         * DOMUtils.toggle(document.querySelector("a.xx"))
-         * DOMUtils.toggle("a.xx")
-         */
-        toggle(element, checkVisiblie) {
-            const DOMUtilsContext = this;
-            if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
-            }
-            if (element == null) {
-                return;
-            }
-            if (DOMUtilsCommonUtils.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, checkVisiblie);
-            }
-        }
         /**
          * 创建一个新的DOMUtils实例
          * @param option
@@ -2957,7 +3688,7 @@
          * DOMUtils.getTextBoundingRect(document.querySelector("input"));
          */
         getTextBoundingRect($input, selectionStart, selectionEnd) {
-            const DOMUtilsContext = this;
+            const that = this;
             // Basic parameter validation
             if (!$input || !("value" in $input))
                 return $input;
@@ -3026,7 +3757,7 @@
             }
             // End of CSS variable checks
             // 不能为空，不然获取不到高度
-            const text = $input.value || "G", textLen = text.length, fakeClone = DOMUtilsContext.windowApi.document.createElement("div");
+            const text = $input.value || "G", textLen = text.length, fakeClone = that.windowApi.document.createElement("div");
             if (selectionStart > 0)
                 appendPart(0, selectionStart);
             const fakeRange = appendPart(selectionStart, selectionEnd);
@@ -3040,7 +3771,7 @@
             fakeClone.style.left = leftPos + "px";
             fakeClone.style.width = width + "px";
             fakeClone.style.height = height + "px";
-            DOMUtilsContext.windowApi.document.body.appendChild(fakeClone);
+            that.windowApi.document.body.appendChild(fakeClone);
             const returnValue = fakeRange.getBoundingClientRect(); //Get rect
             fakeClone?.parentNode?.removeChild(fakeClone); //Remove temp
             return returnValue;
@@ -3052,7 +3783,7 @@
              * @returns
              */
             function appendPart(start, end) {
-                const span = DOMUtilsContext.windowApi.document.createElement("span");
+                const span = that.windowApi.document.createElement("span");
                 span.style.cssText = cssDefaultStyles; //Force styles to prevent unexpected results
                 span.textContent = text.substring(start, end);
                 fakeClone.appendChild(span);
@@ -3060,7 +3791,7 @@
             }
             // Computing offset position
             function getInputOffset() {
-                const body = DOMUtilsContext.windowApi.document.body, win = DOMUtilsContext.windowApi.document.defaultView, docElem = DOMUtilsContext.windowApi.document.documentElement, $box = DOMUtilsContext.windowApi.document.createElement("div");
+                const body = that.windowApi.document.body, win = that.windowApi.document.defaultView, docElem = that.windowApi.document.documentElement, $box = that.windowApi.document.createElement("div");
                 $box.style.paddingLeft = $box.style.width = "1px";
                 body.appendChild($box);
                 const isBoxModel = $box.offsetWidth == 2;
@@ -3079,7 +3810,7 @@
              * @returns
              */
             function getInputCSS(prop, isNumber) {
-                const val = DOMUtilsContext.windowApi.document.defaultView.getComputedStyle($input, null).getPropertyValue(prop);
+                const val = that.windowApi.document.defaultView.getComputedStyle($input, null).getPropertyValue(prop);
                 if (isNumber) {
                     return parseFloat(val);
                 }
@@ -3088,13 +3819,163 @@
                 }
             }
         }
-        /** 获取 animationend 在各个浏览器的兼容名 */
-        getAnimationEndNameList() {
-            return DOMUtilsCommonUtils.getAnimationEndNameList();
+        addStyle(cssText) {
+            if (typeof cssText !== "string") {
+                throw new Error("DOMUtils.addStyle 参数cssText 必须为String类型");
+            }
+            const $css = this.createElement("style", {
+                type: "text/css",
+                innerHTML: cssText,
+            });
+            if (this.windowApi.document.head) {
+                /* 插入head最后 */
+                this.windowApi.document.head.appendChild($css);
+            }
+            else if (this.windowApi.document.documentElement.childNodes.length === 0) {
+                /* 插入#html后 */
+                this.windowApi.document.documentElement.appendChild($css);
+            }
+            else {
+                /* 插入#html第一个元素前 */
+                this.windowApi.document.documentElement.insertBefore($css, this.windowApi.document.documentElement.childNodes[0]);
+            }
+            return $css;
         }
-        /** 获取 transitionend 在各个浏览器的兼容名 */
-        getTransitionEndNameList() {
-            return DOMUtilsCommonUtils.getTransitionEndNameList();
+        /**
+         * 检测点击的地方是否在该元素区域内
+         * @param $el 需要检测的元素
+         * @returns
+         * + true 点击在元素上
+         * + false 未点击在元素上
+         * @example
+         * DOMUtils.checkUserClickInNode(document.querySelector(".xxx"));
+         * > false
+         **/
+        checkUserClickInNode($el) {
+            const that = this;
+            if (!CommonUtils.isDOM($el)) {
+                throw new Error("Utils.checkUserClickInNode 参数 targetNode 必须为 Element|Node 类型");
+            }
+            const clickEvent = that.windowApi.window.event;
+            const touchEvent = that.windowApi.window.event;
+            const $click = clickEvent?.composedPath()?.[0];
+            // 点击的x坐标
+            const clickPosX = clickEvent?.clientX != null ? clickEvent.clientX : touchEvent.touches[0].clientX;
+            // 点击的y坐标
+            const clickPosY = clickEvent?.clientY != null ? clickEvent.clientY : touchEvent.touches[0].clientY;
+            const { 
+            /* 要检测的元素的相对屏幕的横坐标最左边 */
+            left: elementPosXLeft, 
+            /* 要检测的元素的相对屏幕的横坐标最右边 */
+            right: elementPosXRight, 
+            /* 要检测的元素的相对屏幕的纵坐标最上边 */
+            top: elementPosYTop, 
+            /* 要检测的元素的相对屏幕的纵坐标最下边 */
+            bottom: elementPosYBottom, } = $el.getBoundingClientRect();
+            if (clickPosX >= elementPosXLeft &&
+                clickPosX <= elementPosXRight &&
+                clickPosY >= elementPosYTop &&
+                clickPosY <= elementPosYBottom) {
+                return true;
+            }
+            else if (($click && $el.contains($click)) || $click == $el) {
+                /* 这种情况是应对在界面中隐藏的元素，getBoundingClientRect获取的都是0 */
+                return true;
+            }
+            else {
+                return false;
+            }
+        }
+        deleteParentNode($el, parentSelector) {
+            if ($el == null) {
+                return;
+            }
+            if (!CommonUtils.isDOM($el)) {
+                throw new Error("DOMUtils.deleteParentNode 参数 target 必须为 Node|HTMLElement 类型");
+            }
+            if (typeof parentSelector !== "string") {
+                throw new Error("DOMUtils.deleteParentNode 参数 targetSelector 必须为 string 类型");
+            }
+            let result = false;
+            const $parent = domUtils.closest($el, parentSelector);
+            if ($parent) {
+                this.remove($parent);
+                result = true;
+            }
+            return result;
+        }
+        *findElementsWithText($el, text, filter) {
+            const that = this;
+            if ($el.outerHTML.includes(text)) {
+                if ($el.children.length === 0) {
+                    const filterResult = typeof filter === "function" ? filter($el) : false;
+                    if (!filterResult) {
+                        yield $el;
+                    }
+                }
+                else {
+                    const $text = Array.from($el.childNodes).filter(($child) => $child.nodeType === Node.TEXT_NODE);
+                    for (const $child of $text) {
+                        if ($child.textContent.includes(text)) {
+                            const filterResult = typeof filter === "function" ? filter($el) : false;
+                            if (!filterResult) {
+                                yield $child;
+                            }
+                        }
+                    }
+                }
+            }
+            for (let index = 0; index < $el.children.length; index++) {
+                const $child = $el.children[index];
+                yield* that.findElementsWithText($child, text, filter);
+            }
+        }
+        /**
+         * 寻找可见元素，如果元素不可见，则向上找它的父元素直至找到，如果父元素不存在则返回null
+         * @param $el
+         * @example
+         * let visibleElement = DOMUtils.findVisibleElement(document.querySelector("a.xx"));
+         * > <HTMLElement>
+         */
+        findVisibleElement($el) {
+            let $current = $el;
+            while ($current) {
+                const rect = $current.getBoundingClientRect();
+                if (rect.length) {
+                    return $current;
+                }
+                $current = $current.parentElement;
+            }
+            return null;
+        }
+        /**
+         * 将元素上的文本或元素使用光标进行选中
+         *
+         * 注意，如果设置startIndex和endIndex，且元素上并无可选则的坐标，那么会报错
+         * @param $el 目标元素
+         * @param childTextNode 目标元素下的#text元素
+         * @param startIndex （可选）开始坐标，可为空
+         * @param endIndex （可选）结束坐标，可为空
+         * @example
+         * DOMUtils.setElementSelection(document.querySelector("span"));
+         */
+        setElementSelection($el, childTextNode, startIndex, endIndex) {
+            const range = this.windowApi.document.createRange();
+            range.selectNodeContents($el);
+            if (childTextNode) {
+                if (childTextNode.nodeType !== Node.TEXT_NODE) {
+                    throw new TypeError("childTextNode必须是#text元素");
+                }
+                if (startIndex != null && endIndex != null) {
+                    range.setStart(childTextNode, startIndex);
+                    range.setEnd(childTextNode, endIndex);
+                }
+            }
+            const selection = this.windowApi.globalThis.getSelection();
+            if (selection) {
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
         }
     }
     const domUtils = new DOMUtils();