@whitesev/domutils 1.6.7 → 1.7.0

package/dist/index.cjs.js

@@ -304,7 +304,7 @@ const setInterval$1 = (...args) => loadOrReturnBroker().setInterval(...args);
 const setTimeout$1 = (...args) => loadOrReturnBroker().setTimeout(...args);
 
 /** 通用工具类 */
-const DOMUtilsCommonUtils = {
+const CommonUtils = {
     windowApi: new WindowApi({
         document: document,
         window: window,
@@ -316,15 +316,16 @@ const DOMUtilsCommonUtils = {
     }),
     /**
      * 判断元素是否已显示或已连接
-     * @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,
@@ -342,14 +343,14 @@ const DOMUtilsCommonUtils = {
      */
     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 {
@@ -425,14 +426,27 @@ const DOMUtilsCommonUtils = {
         }
         return true;
     },
+    /**
+     * 判断对象是否是元素
+     * @param $el
+     * @returns
+     * + true 是元素
+     * + false 不是元素
+     * @example
+     * DOMUtilsCommonUtils.isDOM(document.querySelector("a"))
+     * > true
+     */
+    isDOM($el) {
+        return $el instanceof Node;
+    },
     /**
      * 删除对象上的属性
      * @param target
      * @param propName
      */
     delete(target, propName) {
-        if (typeof Reflect === "object" && Reflect.deleteProperty) {
-            Reflect.deleteProperty(target, propName);
+        if (typeof Reflect === "object" && Reflect != null && Reflect.deleteProperty) {
+            return Reflect.deleteProperty(target, propName);
         }
         else {
             delete target[propName];
@@ -441,79 +455,1166 @@ const DOMUtilsCommonUtils = {
     /**
      * 自动使用 Worker 执行 setTimeout
      */
-    setTimeout(callback, timeout = 0) {
-        try {
-            return setTimeout$1(callback, timeout);
-        }
-        catch {
-            return this.windowApi.setTimeout(callback, timeout);
+    setTimeout(callback, timeout = 0) {
+        try {
+            return setTimeout$1(callback, timeout);
+        }
+        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);
+    }
+    /**
+     * 淡出元素
+     * @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 context = this;
+        if (element == null) {
+            return;
         }
-    },
-    /**
-     * 配合 .setTimeout 使用
-     */
-    clearTimeout(timeId) {
-        try {
-            if (timeId != null) {
-                clearTimeout$1(timeId);
-            }
+        if (typeof element === "string") {
+            element = elementSelector.selectorAll(element);
         }
-        catch {
-            // TODO
+        if (CommonUtils.isNodeList(element)) {
+            // 设置
+            element.forEach(($ele) => {
+                context.fadeOut($ele, duration, callback);
+            });
+            return;
         }
-        finally {
-            this.windowApi.clearTimeout(timeId);
+        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: {
@@ -521,11 +1622,20 @@ const OriginPrototype = {
     },
 };
 
-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配置
@@ -556,11 +1666,11 @@ class DOMUtilsEvent {
             }
             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;
@@ -613,7 +1723,7 @@ class DOMUtilsEvent {
          */
         function checkOptionOnceToRemoveEventListener() {
             if (listenerOption.once) {
-                DOMUtilsContext.off(element, eventType, selector, callback, option);
+                that.off(element, eventType, selector, callback, option);
             }
         }
         elementList.forEach((elementItem) => {
@@ -629,19 +1739,19 @@ class DOMUtilsEvent {
                         ? 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;
@@ -674,7 +1784,7 @@ class DOMUtilsEvent {
             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({
@@ -684,7 +1794,7 @@ class DOMUtilsEvent {
                     originCallBack: listenerCallBack,
                 });
                 /* 覆盖事件 */
-                Reflect.set(elementItem, DOMUtilsData.SymbolEvents, elementEvents);
+                Reflect.set(elementItem, GlobalData.domEventSymbol, elementEvents);
             });
         });
     }
@@ -700,27 +1810,27 @@ class DOMUtilsEvent {
             if (typeof currentParam === "boolean") {
                 option.capture = currentParam;
             }
-            else if (typeof currentParam === "object" && "capture" in currentParam) {
+            else if (typeof currentParam === "object" && currentParam != null && "capture" in currentParam) {
                 option.capture = currentParam.capture;
             }
             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)) {
@@ -767,16 +1877,18 @@ class DOMUtilsEvent {
             // 目标函数、事件名、子元素选择器
             isRemoveAll = true;
         }
-        elementList.forEach((elementItem) => {
+        if (args.length === 5 && typeof args[4] === "function" && typeof filter !== "function") {
+            // 目标函数、事件名、回调函数、事件配置、过滤函数
+            filter = option;
+        }
+        $elList.forEach(($elItem) => {
             /* 获取对象上的事件 */
-            const elementEvents = Reflect.get(elementItem, DOMUtilsData.SymbolEvents) || {};
+            const elementEvents = Reflect.get($elItem, GlobalData.domEventSymbol) || {};
             eventTypeList.forEach((eventName) => {
-                let handlers = elementEvents[eventName] || [];
-                if (typeof filter === "function") {
-                    handlers = handlers.filter(filter);
-                }
-                for (let index = 0; index < handlers.length; index++) {
-                    const handler = handlers[index];
+                const handlers = elementEvents[eventName] || [];
+                const filterHandler = typeof filter === "function" ? handlers.filter(filter) : handlers;
+                for (let index = 0; index < filterHandler.length; index++) {
+                    const handler = filterHandler[index];
                     let flag = true;
                     if (flag && listenerCallBack && handler.originCallBack !== listenerCallBack) {
                         // callback不同
@@ -788,21 +1900,26 @@ class DOMUtilsEvent {
                             flag = false;
                         }
                     }
-                    if (flag && listenerOption.capture !== handler.option.capture) {
+                    if (flag &&
+                        typeof handler.option.capture === "boolean" &&
+                        listenerOption.capture !== handler.option.capture) {
                         // 事件的配置项不同
                         flag = false;
                     }
                     if (flag || isRemoveAll) {
-                        elementItem.removeEventListener(eventName, handler.callback, handler.option);
-                        handlers.splice(index--, 1);
+                        $elItem.removeEventListener(eventName, handler.callback, handler.option);
+                        const findIndex = handlers.findIndex((item) => item === handler);
+                        if (findIndex !== -1) {
+                            handlers.splice(findIndex, 1);
+                        }
                     }
                 }
                 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);
         });
     }
     /**
@@ -811,19 +1928,19 @@ class DOMUtilsEvent {
      * @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)) {
@@ -832,12 +1949,13 @@ class DOMUtilsEvent {
         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];
@@ -845,12 +1963,12 @@ class DOMUtilsEvent {
                         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);
                 });
             });
         });
@@ -867,15 +1985,15 @@ class DOMUtilsEvent {
         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 {
@@ -895,12 +2013,12 @@ class DOMUtilsEvent {
         }
         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,
             },
@@ -925,7 +2043,7 @@ class DOMUtilsEvent {
         }
         if (checkDOMReadyState()) {
             /* 检查document状态 */
-            DOMUtilsCommonUtils.setTimeout(callback);
+            CommonUtils.setTimeout(callback);
         }
         else {
             /* 添加监听 */
@@ -937,7 +2055,7 @@ class DOMUtilsEvent {
      * @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")
@@ -947,20 +2065,20 @@ class DOMUtilsEvent {
      * 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)) {
@@ -969,29 +2087,33 @@ class DOMUtilsEvent {
         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);
                 }
             });
         });
@@ -1011,25 +2133,25 @@ class DOMUtilsEvent {
      * })
      * */
     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);
         }
     }
     /**
@@ -1047,25 +2169,25 @@ class DOMUtilsEvent {
      * })
      * */
     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);
         }
     }
     /**
@@ -1083,25 +2205,25 @@ class DOMUtilsEvent {
      * })
      * */
     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);
         }
     }
     /**
@@ -1119,22 +2241,22 @@ class DOMUtilsEvent {
      * })
      */
     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);
     }
     /**
      * 当动画结束时触发事件
@@ -1143,30 +2265,23 @@ class DOMUtilsEvent {
      * @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);
                 },
             };
         }
@@ -1178,30 +2293,23 @@ class DOMUtilsEvent {
      * @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);
                 },
             };
         }
@@ -1222,21 +2330,21 @@ class DOMUtilsEvent {
      * })
      */
     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);
     }
     /**
      * 当按键按下时触发事件
@@ -1254,21 +2362,21 @@ class DOMUtilsEvent {
      * })
      */
     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);
     }
     /**
      * 当按键按下时触发事件
@@ -1286,21 +2394,21 @@ class DOMUtilsEvent {
      * })
      */
     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全局按键事件
@@ -1366,9 +2474,9 @@ class DOMUtilsEvent {
         收藏		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) {
             /** 键名 */
@@ -1376,233 +2484,146 @@ class DOMUtilsEvent {
             /** 键值 */
             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.6";
+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(
@@ -1612,11 +2633,11 @@ class DOMUtils extends DOMUtilsEvent {
     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 = {};
@@ -1627,10 +2648,10 @@ class DOMUtils extends DOMUtilsEvent {
         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];
@@ -1642,12 +2663,12 @@ class DOMUtils extends DOMUtilsEvent {
                 /* 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的加上
          */
@@ -1661,30 +2682,30 @@ class DOMUtils extends DOMUtilsEvent {
             }
             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;
             }
@@ -1696,16 +2717,16 @@ class DOMUtils extends DOMUtilsEvent {
                     .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);
@@ -1722,92 +2743,92 @@ class DOMUtils extends DOMUtilsEvent {
             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) {
@@ -1824,225 +2845,189 @@ class DOMUtils extends DOMUtilsEvent {
             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;
         }
@@ -2053,31 +3038,31 @@ class DOMUtils extends DOMUtilsEvent {
             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)) {
@@ -2085,7 +3070,7 @@ class DOMUtils extends DOMUtilsEvent {
         }
         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;
             }
         }
@@ -2093,25 +3078,25 @@ class DOMUtils extends DOMUtilsEvent {
     }
     /**
      * 函数在元素内部末尾添加子元素或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;
         }
@@ -2119,12 +3104,12 @@ class DOMUtils extends DOMUtilsEvent {
             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 {
@@ -2133,255 +3118,255 @@ class DOMUtils extends DOMUtilsEvent {
         }
         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, element.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 {
-                element.parentElement.insertBefore(content, element.nextSibling);
+                $parent.insertBefore(content, $nextSlibling);
             }
         }
     }
     /**
      * 在元素前面添加兄弟元素或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()) -
@@ -2392,41 +3377,41 @@ class DOMUtils extends DOMUtilsEvent {
         }
         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()) -
@@ -2437,200 +3422,160 @@ class DOMUtils extends DOMUtilsEvent {
         }
         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元素的父元素
@@ -2638,27 +3583,27 @@ class DOMUtils extends DOMUtilsEvent {
      * 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() {
@@ -2671,13 +3616,13 @@ class DOMUtils extends DOMUtilsEvent {
             }
         }
         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) {
@@ -2722,213 +3667,6 @@ class DOMUtils extends DOMUtilsEvent {
             .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
@@ -2946,7 +3684,7 @@ class DOMUtils extends DOMUtilsEvent {
      * 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;
@@ -3015,7 +3753,7 @@ class DOMUtils extends DOMUtilsEvent {
         }
         // 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);
@@ -3029,7 +3767,7 @@ class DOMUtils extends DOMUtilsEvent {
         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;
@@ -3041,7 +3779,7 @@ class DOMUtils extends DOMUtilsEvent {
          * @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);
@@ -3049,7 +3787,7 @@ class DOMUtils extends DOMUtilsEvent {
         }
         // 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;
@@ -3068,7 +3806,7 @@ class DOMUtils extends DOMUtilsEvent {
          * @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);
             }
@@ -3077,13 +3815,163 @@ class DOMUtils extends DOMUtilsEvent {
             }
         }
     }
-    /** 获取 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();