@whitesev/domutils 1.6.8 → 1.7.0

package/dist/index.system.js

@@ -307,7 +307,7 @@ System.register('DOMUtils', [], (function (exports) {
             const setTimeout$1 = (...args) => loadOrReturnBroker().setTimeout(...args);
 
             /** 通用工具类 */
-            const DOMUtilsCommonUtils = {
+            const CommonUtils = {
                 windowApi: new WindowApi({
                     document: document,
                     window: window,
@@ -319,15 +319,16 @@ System.register('DOMUtils', [], (function (exports) {
                 }),
                 /**
                  * 判断元素是否已显示或已连接
-                 * @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,
@@ -345,14 +346,14 @@ System.register('DOMUtils', [], (function (exports) {
                  */
                 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 {
@@ -428,6 +429,19 @@ System.register('DOMUtils', [], (function (exports) {
                     }
                     return true;
                 },
+                /**
+                 * 判断对象是否是元素
+                 * @param $el
+                 * @returns
+                 * + true 是元素
+                 * + false 不是元素
+                 * @example
+                 * DOMUtilsCommonUtils.isDOM(document.querySelector("a"))
+                 * > true
+                 */
+                isDOM($el) {
+                    return $el instanceof Node;
+                },
                 /**
                  * 删除对象上的属性
                  * @param target
@@ -451,72 +465,1159 @@ System.register('DOMUtils', [], (function (exports) {
                     catch {
                         return this.windowApi.setTimeout(callback, timeout);
                     }
-                },
+                },
+                /**
+                 * 配合 .setTimeout 使用
+                 */
+                clearTimeout(timeId) {
+                    try {
+                        if (timeId != null) {
+                            clearTimeout$1(timeId);
+                        }
+                    }
+                    catch {
+                        // TODO
+                    }
+                    finally {
+                        this.windowApi.clearTimeout(timeId);
+                    }
+                },
+                /**
+                 * 自动使用 Worker 执行 setInterval
+                 */
+                setInterval(callback, timeout = 0) {
+                    try {
+                        return setInterval$1(callback, timeout);
+                    }
+                    catch {
+                        return this.windowApi.setInterval(callback, timeout);
+                    }
+                },
+                /**
+                 * 配合 .setInterval 使用
+                 */
+                clearInterval(timeId) {
+                    try {
+                        if (timeId != null) {
+                            clearInterval$1(timeId);
+                        }
+                    }
+                    catch {
+                        // TODO
+                    }
+                    finally {
+                        this.windowApi.clearInterval(timeId);
+                    }
+                },
+                /**
+                 * 判断是否是元素列表
+                 * @param $ele
+                 */
+                isNodeList($ele) {
+                    return Array.isArray($ele) || $ele instanceof NodeList;
+                },
+                /** 获取 animationend 在各个浏览器的兼容名 */
+                getAnimationEndNameList() {
+                    return ["webkitAnimationEnd", "mozAnimationEnd", "MSAnimationEnd", "oanimationend", "animationend"];
+                },
+                /** 获取 transitionend 在各个浏览器的兼容名 */
+                getTransitionEndNameList() {
+                    return ["webkitTransitionEnd", "mozTransitionEnd", "MSTransitionEnd", "otransitionend", "transitionend"];
+                },
+            };
+
+            const version = "1.7.0";
+
+            /* 数据 */
+            const GlobalData = {
+                /** .on添加在元素存储的事件 */
+                domEventSymbol: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
+            };
+
+            class ElementSelector {
+                windowApi;
+                constructor(windowApiOption) {
+                    this.windowApi = new WindowApi(windowApiOption);
+                }
+                selector(selector, parent) {
+                    return this.selectorAll(selector, parent)[0];
+                }
+                selectorAll(selector, parent) {
+                    const context = this;
+                    parent = parent || context.windowApi.document;
+                    selector = selector.trim();
+                    if (selector.match(/[^\s]{1}:empty$/gi)) {
+                        // empty 语法
+                        selector = selector.replace(/:empty$/gi, "");
+                        return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
+                            return $ele?.innerHTML?.trim() === "";
+                        });
+                    }
+                    else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
+                        // contains 语法
+                        const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
+                        const text = textMatch[2];
+                        selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
+                        return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
+                            // @ts-ignore
+                            return ($ele?.textContent || $ele?.innerText)?.includes(text);
+                        });
+                    }
+                    else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
+                        // regexp 语法
+                        const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
+                        let pattern = textMatch[2];
+                        const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
+                        let flags = "";
+                        if (flagMatch) {
+                            pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
+                            flags = flagMatch[3];
+                        }
+                        const regexp = new RegExp(pattern, flags);
+                        selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
+                        return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
+                            // @ts-ignore
+                            return Boolean(($ele?.textContent || $ele?.innerText)?.match(regexp));
+                        });
+                    }
+                    else {
+                        // 普通语法
+                        return Array.from(parent.querySelectorAll(selector));
+                    }
+                }
+                /**
+                 * 匹配元素，可使用以下的额外语法
+                 *
+                 * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
+                 * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
+                 * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
+                 * @param $el 元素
+                 * @param selector 选择器
+                 * @example
+                 * DOMUtils.matches("div:contains('测试')")
+                 * > true
+                 * @example
+                 * DOMUtils.matches("div:empty")
+                 * > true
+                 * @example
+                 * DOMUtils.matches("div:regexp('^xxxx$')")
+                 * > true
+                 * @example
+                 * DOMUtils.matches("div:regexp(/^xxx/ig)")
+                 * > false
+                 */
+                matches($el, selector) {
+                    selector = selector.trim();
+                    if ($el == null) {
+                        return false;
+                    }
+                    if (selector.match(/[^\s]{1}:empty$/gi)) {
+                        // empty 语法
+                        selector = selector.replace(/:empty$/gi, "");
+                        return $el.matches(selector) && $el?.innerHTML?.trim() === "";
+                    }
+                    else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
+                        // contains 语法
+                        const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
+                        const text = textMatch[2];
+                        selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
+                        // @ts-ignore
+                        let content = $el?.textContent || $el?.innerText;
+                        if (typeof content !== "string") {
+                            content = "";
+                        }
+                        return $el.matches(selector) && content?.includes(text);
+                    }
+                    else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
+                        // regexp 语法
+                        const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
+                        let pattern = textMatch[2];
+                        const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
+                        let flags = "";
+                        if (flagMatch) {
+                            pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
+                            flags = flagMatch[3];
+                        }
+                        const regexp = new RegExp(pattern, flags);
+                        selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
+                        // @ts-ignore
+                        let content = $el?.textContent || $el?.innerText;
+                        if (typeof content !== "string") {
+                            content = "";
+                        }
+                        return $el.matches(selector) && Boolean(content?.match(regexp));
+                    }
+                    else {
+                        // 普通语法
+                        return $el.matches(selector);
+                    }
+                }
+                closest($el, selector) {
+                    selector = selector.trim();
+                    if (selector.match(/[^\s]{1}:empty$/gi)) {
+                        // empty 语法
+                        selector = selector.replace(/:empty$/gi, "");
+                        const $closest = $el?.closest(selector);
+                        if ($closest && $closest?.innerHTML?.trim() === "") {
+                            return $closest;
+                        }
+                        return null;
+                    }
+                    else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
+                        // contains 语法
+                        const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
+                        const text = textMatch[2];
+                        selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
+                        const $closest = $el?.closest(selector);
+                        if ($closest) {
+                            // @ts-ignore
+                            const content = $el?.textContent || $el?.innerText;
+                            if (typeof content === "string" && content.includes(text)) {
+                                return $closest;
+                            }
+                        }
+                        return null;
+                    }
+                    else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
+                        // regexp 语法
+                        const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
+                        let pattern = textMatch[2];
+                        const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
+                        let flags = "";
+                        if (flagMatch) {
+                            pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
+                            flags = flagMatch[3];
+                        }
+                        const regexp = new RegExp(pattern, flags);
+                        selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
+                        const $closest = $el?.closest(selector);
+                        if ($closest) {
+                            // @ts-ignore
+                            const content = $el?.textContent || $el?.innerText;
+                            if (typeof content === "string" && content.match(regexp)) {
+                                return $closest;
+                            }
+                        }
+                        return null;
+                    }
+                    else {
+                        // 普通语法
+                        const $closest = $el?.closest(selector);
+                        return $closest;
+                    }
+                }
+            }
+            const elementSelector = new ElementSelector();
+
+            /**
+             * 判断对象是否是元素
+             * @param $el
+             * @returns
+             * + true 是元素
+             * + false 不是元素
+             * @example
+             * DOMUtilsCommonUtils.isDOM(document.querySelector("a"))
+             * > true
+             */
+            const isDOM = function ($el) {
+                return $el instanceof Node;
+            };
+            class Utils {
+                windowApi;
+                constructor(option) {
+                    this.windowApi = new WindowApi(option);
+                }
+                /**
+                 * 判断对象是否是jQuery对象
+                 * @param target
+                 * @returns
+                 * + true 是jQuery对象
+                 * + false 不是jQuery对象
+                 * @example
+                 * Utils.isJQuery($("a"))
+                 * > true
+                 */
+                isJQuery(target) {
+                    let result = false;
+                    if (typeof jQuery === "object" && target instanceof jQuery) {
+                        result = true;
+                    }
+                    if (target == null) {
+                        return false;
+                    }
+                    if (typeof target === "object") {
+                        /* 也有种可能，这个jQuery对象是1.8.3版本的，页面中的jQuery是3.4.1版本的 */
+                        const jQueryProps = [
+                            "add",
+                            "addBack",
+                            "addClass",
+                            "after",
+                            "ajaxComplete",
+                            "ajaxError",
+                            "ajaxSend",
+                            "ajaxStart",
+                            "ajaxStop",
+                            "ajaxSuccess",
+                            "animate",
+                            "append",
+                            "appendTo",
+                            "attr",
+                            "before",
+                            "bind",
+                            "blur",
+                            "change",
+                            "children",
+                            "clearQueue",
+                            "click",
+                            "clone",
+                            "closest",
+                            "constructor",
+                            "contents",
+                            "contextmenu",
+                            "css",
+                            "data",
+                            "dblclick",
+                            "delay",
+                            "delegate",
+                            "dequeue",
+                            "each",
+                            "empty",
+                            "end",
+                            "eq",
+                            "extend",
+                            "fadeIn",
+                            "fadeOut",
+                            "fadeTo",
+                            "fadeToggle",
+                            "filter",
+                            "find",
+                            "first",
+                            "focus",
+                            "focusin",
+                            "focusout",
+                            "get",
+                            "has",
+                            "hasClass",
+                            "height",
+                            "hide",
+                            "hover",
+                            "html",
+                            "index",
+                            "init",
+                            "innerHeight",
+                            "innerWidth",
+                            "insertAfter",
+                            "insertBefore",
+                            "is",
+                            "jquery",
+                            "keydown",
+                            "keypress",
+                            "keyup",
+                            "last",
+                            "load",
+                            "map",
+                            "mousedown",
+                            "mouseenter",
+                            "mouseleave",
+                            "mousemove",
+                            "mouseout",
+                            "mouseover",
+                            "mouseup",
+                            "next",
+                            "nextAll",
+                            "not",
+                            "off",
+                            "offset",
+                            "offsetParent",
+                            "on",
+                            "one",
+                            "outerHeight",
+                            "outerWidth",
+                            "parent",
+                            "parents",
+                            "position",
+                            "prepend",
+                            "prependTo",
+                            "prev",
+                            "prevAll",
+                            "prevUntil",
+                            "promise",
+                            "prop",
+                            "pushStack",
+                            "queue",
+                            "ready",
+                            "remove",
+                            "removeAttr",
+                            "removeClass",
+                            "removeData",
+                            "removeProp",
+                            "replaceAll",
+                            "replaceWith",
+                            "resize",
+                            "scroll",
+                            "scrollLeft",
+                            "scrollTop",
+                            "select",
+                            "show",
+                            "siblings",
+                            "slice",
+                            "slideDown",
+                            "slideToggle",
+                            "slideUp",
+                            "sort",
+                            "splice",
+                            "text",
+                            "toArray",
+                            "toggle",
+                            "toggleClass",
+                            "trigger",
+                            "triggerHandler",
+                            "unbind",
+                            "width",
+                            "wrap",
+                        ];
+                        for (const jQueryPropsName of jQueryProps) {
+                            if (!(jQueryPropsName in target)) {
+                                result = false;
+                                break;
+                            }
+                            else {
+                                result = true;
+                            }
+                        }
+                    }
+                    return result;
+                }
+                assign(target = {}, source = {}, isAdd = false) {
+                    const UtilsContext = this;
+                    if (Array.isArray(source)) {
+                        const canTraverse = source.filter((item) => {
+                            return typeof item === "object";
+                        });
+                        if (!canTraverse.length) {
+                            return source;
+                        }
+                    }
+                    if (source == null) {
+                        return target;
+                    }
+                    if (target == null) {
+                        target = {};
+                    }
+                    if (isAdd) {
+                        for (const sourceKeyName in source) {
+                            const targetKeyName = sourceKeyName;
+                            const targetValue = Reflect.get(target, targetKeyName);
+                            const sourceValue = Reflect.get(source, sourceKeyName);
+                            if (typeof sourceValue === "object" && sourceValue != null && sourceKeyName in target && !isDOM(sourceValue)) {
+                                /* 源端的值是object类型，且不是元素节点 */
+                                Reflect.set(target, sourceKeyName, UtilsContext.assign(targetValue, sourceValue, isAdd));
+                                continue;
+                            }
+                            Reflect.set(target, sourceKeyName, sourceValue);
+                        }
+                    }
+                    else {
+                        for (const targetKeyName in target) {
+                            if (targetKeyName in source) {
+                                const targetValue = Reflect.get(target, targetKeyName);
+                                const sourceValue = Reflect.get(source, targetKeyName);
+                                if (typeof sourceValue === "object" &&
+                                    sourceValue != null &&
+                                    !isDOM(sourceValue) &&
+                                    Object.keys(sourceValue).length) {
+                                    /* 源端的值是object类型，且不是元素节点 */
+                                    Reflect.set(target, targetKeyName, UtilsContext.assign(targetValue, sourceValue, isAdd));
+                                    continue;
+                                }
+                                /* 直接赋值 */
+                                Reflect.set(target, targetKeyName, sourceValue);
+                            }
+                        }
+                    }
+                    return target;
+                }
+                mutationObserver(target, observer_config) {
+                    const that = this;
+                    const default_obverser_config = {
+                        /* 监听到元素有反馈，需执行的函数 */
+                        callback: () => { },
+                        config: {
+                            /**
+                             * + true 监听以 target 为根节点的整个子树。包括子树中所有节点的属性，而不仅仅是针对 target
+                             * + false (默认) 不生效
+                             */
+                            subtree: void 0,
+                            /**
+                             * + true 监听 target 节点中发生的节点的新增与删除（同时，如果 subtree 为 true，会针对整个子树生效）
+                             * + false (默认) 不生效
+                             */
+                            childList: void 0,
+                            /**
+                             * + true 观察所有监听的节点属性值的变化。默认值为 true，当声明了 attributeFilter 或 attributeOldValue
+                             * + false (默认) 不生效
+                             */
+                            attributes: void 0,
+                            /**
+                             * 一个用于声明哪些属性名会被监听的数组。如果不声明该属性，所有属性的变化都将触发通知
+                             */
+                            attributeFilter: void 0,
+                            /**
+                             * + true 记录上一次被监听的节点的属性变化；可查阅 MutationObserver 中的 Monitoring attribute values 了解关于观察属性变化和属性值记录的详情
+                             * + false (默认) 不生效
+                             */
+                            attributeOldValue: void 0,
+                            /**
+                             * + true 监听声明的 target 节点上所有字符的变化。默认值为 true，如果声明了 characterDataOldValue
+                             * + false (默认) 不生效
+                             */
+                            characterData: void 0,
+                            /**
+                             * + true 记录前一个被监听的节点中发生的文本变化
+                             * + false (默认) 不生效
+                             */
+                            characterDataOldValue: void 0,
+                        },
+                        immediate: false,
+                    };
+                    observer_config = that.assign(default_obverser_config, observer_config);
+                    const windowMutationObserver = this.windowApi.window.MutationObserver ||
+                        this.windowApi.window.webkitMutationObserver ||
+                        this.windowApi.window.MozMutationObserver;
+                    // 观察者对象
+                    const mutationObserver = new windowMutationObserver(function (mutations, observer) {
+                        if (typeof observer_config.callback === "function") {
+                            observer_config.callback(mutations, observer);
+                        }
+                    });
+                    if (Array.isArray(target) || target instanceof NodeList) {
+                        // 传入的是数组或者元素数组
+                        target.forEach((item) => {
+                            mutationObserver.observe(item, observer_config.config);
+                        });
+                    }
+                    else if (that.isJQuery(target)) {
+                        /* 传入的参数是jQuery对象 */
+                        target.each((_, item) => {
+                            mutationObserver.observe(item, observer_config.config);
+                        });
+                    }
+                    else {
+                        mutationObserver.observe(target, observer_config.config);
+                    }
+                    if (observer_config.immediate) {
+                        /* 主动触发一次 */
+                        if (typeof observer_config.callback === "function") {
+                            observer_config.callback([], mutationObserver);
+                        }
+                    }
+                    return mutationObserver;
+                }
+            }
+            const utils = new Utils();
+
+            class ElementWait extends ElementSelector {
+                windowApi;
+                constructor(windowApiOption) {
+                    super(windowApiOption);
+                    this.windowApi = new WindowApi(windowApiOption);
+                }
+                wait(checkFn, timeout, parent) {
+                    const UtilsContext = this;
+                    const __timeout__ = typeof timeout === "number" ? timeout : 0;
+                    return new Promise((resolve) => {
+                        const observer = utils.mutationObserver(parent || UtilsContext.windowApi.document, {
+                            config: {
+                                subtree: true,
+                                childList: true,
+                                attributes: true,
+                            },
+                            immediate: true,
+                            callback(_, __observer__) {
+                                const result = checkFn();
+                                if (result.success) {
+                                    // 取消观察器
+                                    if (typeof __observer__?.disconnect === "function") {
+                                        __observer__.disconnect();
+                                    }
+                                    resolve(result.data);
+                                }
+                            },
+                        });
+                        if (__timeout__ > 0) {
+                            CommonUtils.setTimeout(() => {
+                                // 取消观察器
+                                if (typeof observer?.disconnect === "function") {
+                                    observer.disconnect();
+                                }
+                                resolve(null);
+                            }, __timeout__);
+                        }
+                    });
+                }
+                waitNode(...args) {
+                    // 过滤掉undefined
+                    args = args.filter((arg) => arg !== void 0);
+                    const UtilsContext = this;
+                    // 选择器
+                    const selector = args[0];
+                    // 父元素（监听的元素）
+                    let parent = UtilsContext.windowApi.document;
+                    // 超时时间
+                    let timeout = 0;
+                    if (typeof args[0] !== "string" && !Array.isArray(args[0]) && typeof args[0] !== "function") {
+                        throw new TypeError("Utils.waitNode 第一个参数必须是string|string[]|Function");
+                    }
+                    if (args.length === 1) ;
+                    else if (args.length === 2) {
+                        const secondParam = args[1];
+                        if (typeof secondParam === "number") {
+                            // "div",10000
+                            timeout = secondParam;
+                        }
+                        else if (typeof secondParam === "object" && secondParam instanceof Node) {
+                            // "div",document
+                            parent = secondParam;
+                        }
+                        else {
+                            throw new TypeError("Utils.waitNode 第二个参数必须是number|Node");
+                        }
+                    }
+                    else if (args.length === 3) {
+                        // "div",document,10000
+                        // 第二个参数，parent
+                        const secondParam = args[1];
+                        // 第三个参数，timeout
+                        const thirdParam = args[2];
+                        if (typeof secondParam === "object" && secondParam instanceof Node) {
+                            parent = secondParam;
+                            if (typeof thirdParam === "number") {
+                                timeout = thirdParam;
+                            }
+                            else {
+                                throw new TypeError("Utils.waitNode 第三个参数必须是number");
+                            }
+                        }
+                        else {
+                            throw new TypeError("Utils.waitNode 第二个参数必须是Node");
+                        }
+                    }
+                    else {
+                        throw new TypeError("Utils.waitNode 参数个数错误");
+                    }
+                    function getNode() {
+                        if (Array.isArray(selector)) {
+                            const result = [];
+                            for (let index = 0; index < selector.length; index++) {
+                                const node = elementSelector.selector(selector[index]);
+                                if (node) {
+                                    result.push(node);
+                                }
+                            }
+                            if (result.length === selector.length) {
+                                return result;
+                            }
+                        }
+                        else if (typeof selector === "function") {
+                            return selector();
+                        }
+                        else {
+                            return elementSelector.selector(selector, parent);
+                        }
+                    }
+                    return UtilsContext.wait(() => {
+                        const node = getNode();
+                        if (node) {
+                            return {
+                                success: true,
+                                data: node,
+                            };
+                        }
+                        else {
+                            return {
+                                success: false,
+                                data: node,
+                            };
+                        }
+                    }, timeout, parent);
+                }
+                waitAnyNode(...args) {
+                    // 过滤掉undefined
+                    args = args.filter((arg) => arg !== void 0);
+                    const UtilsContext = this;
+                    // 选择器
+                    const selectorList = args[0];
+                    // 父元素（监听的元素）
+                    let parent = UtilsContext.windowApi.document;
+                    // 超时时间
+                    let timeout = 0;
+                    if (typeof args[0] !== "object" && !Array.isArray(args[0])) {
+                        throw new TypeError("Utils.waitAnyNode 第一个参数必须是string[]");
+                    }
+                    if (args.length === 1) ;
+                    else if (args.length === 2) {
+                        const secondParam = args[1];
+                        if (typeof secondParam === "number") {
+                            // "div",10000
+                            timeout = secondParam;
+                        }
+                        else if (typeof secondParam === "object" && secondParam instanceof Node) {
+                            // "div",document
+                            parent = secondParam;
+                        }
+                        else {
+                            throw new TypeError("Utils.waitAnyNode 第二个参数必须是number|Node");
+                        }
+                    }
+                    else if (args.length === 3) {
+                        // "div",document,10000
+                        // 第二个参数，parent
+                        const secondParam = args[1];
+                        // 第三个参数，timeout
+                        const thirdParam = args[2];
+                        if (typeof secondParam === "object" && secondParam instanceof Node) {
+                            parent = secondParam;
+                            if (typeof thirdParam === "number") {
+                                timeout = thirdParam;
+                            }
+                            else {
+                                throw new TypeError("Utils.waitAnyNode 第三个参数必须是number");
+                            }
+                        }
+                        else {
+                            throw new TypeError("Utils.waitAnyNode 第二个参数必须是Node");
+                        }
+                    }
+                    else {
+                        throw new TypeError("Utils.waitAnyNode 参数个数错误");
+                    }
+                    const promiseList = selectorList.map((selector) => {
+                        return UtilsContext.waitNode(selector, parent, timeout);
+                    });
+                    return Promise.any(promiseList);
+                }
+                waitNodeList(...args) {
+                    // 过滤掉undefined
+                    args = args.filter((arg) => arg !== void 0);
+                    const UtilsContext = this;
+                    // 选择器数组
+                    const selector = args[0];
+                    // 父元素（监听的元素）
+                    let parent = UtilsContext.windowApi.document;
+                    // 超时时间
+                    let timeout = 0;
+                    if (typeof args[0] !== "string" && !Array.isArray(args[0])) {
+                        throw new TypeError("Utils.waitNodeList 第一个参数必须是string|string[]");
+                    }
+                    if (args.length === 1) ;
+                    else if (args.length === 2) {
+                        const secondParam = args[1];
+                        if (typeof secondParam === "number") {
+                            // "div",10000
+                            timeout = secondParam;
+                        }
+                        else if (typeof secondParam === "object" && secondParam instanceof Node) {
+                            // "div",document
+                            parent = secondParam;
+                        }
+                        else {
+                            throw new TypeError("Utils.waitNodeList 第二个参数必须是number|Node");
+                        }
+                    }
+                    else if (args.length === 3) {
+                        // "div",document,10000
+                        // 第二个参数，parent
+                        const secondParam = args[1];
+                        // 第三个参数，timeout
+                        const thirdParam = args[2];
+                        if (typeof secondParam === "object" && secondParam instanceof Node) {
+                            parent = secondParam;
+                            if (typeof thirdParam === "number") {
+                                timeout = thirdParam;
+                            }
+                            else {
+                                throw new TypeError("Utils.waitNodeList 第三个参数必须是number");
+                            }
+                        }
+                        else {
+                            throw new TypeError("Utils.waitNodeList 第二个参数必须是Node");
+                        }
+                    }
+                    else {
+                        throw new TypeError("Utils.waitNodeList 参数个数错误");
+                    }
+                    function getNodeList() {
+                        if (Array.isArray(selector)) {
+                            const result = [];
+                            for (let index = 0; index < selector.length; index++) {
+                                const nodeList = elementSelector.selectorAll(selector[index], parent);
+                                if (nodeList.length) {
+                                    result.push(nodeList);
+                                }
+                            }
+                            if (result.length === selector.length) {
+                                return result;
+                            }
+                        }
+                        else {
+                            const nodeList = elementSelector.selectorAll(selector, parent);
+                            if (nodeList.length) {
+                                return nodeList;
+                            }
+                        }
+                    }
+                    return UtilsContext.wait(() => {
+                        const node = getNodeList();
+                        if (node) {
+                            return {
+                                success: true,
+                                data: node,
+                            };
+                        }
+                        else {
+                            return {
+                                success: false,
+                                data: node,
+                            };
+                        }
+                    }, timeout, parent);
+                }
+                waitAnyNodeList(...args) {
+                    // 过滤掉undefined
+                    args = args.filter((arg) => arg !== void 0);
+                    const UtilsContext = this;
+                    // 选择器数组
+                    const selectorList = args[0];
+                    // 父元素（监听的元素）
+                    let parent = UtilsContext.windowApi.document;
+                    // 超时时间
+                    let timeout = 0;
+                    if (!Array.isArray(args[0])) {
+                        throw new TypeError("Utils.waitAnyNodeList 第一个参数必须是string[]");
+                    }
+                    if (args.length === 1) ;
+                    else if (args.length === 2) {
+                        const secondParam = args[1];
+                        if (typeof secondParam === "number") {
+                            // "div",10000
+                            timeout = secondParam;
+                        }
+                        else if (typeof secondParam === "object" && secondParam instanceof Node) {
+                            // "div",document
+                            parent = secondParam;
+                        }
+                        else {
+                            throw new TypeError("Utils.waitAnyNodeList 第二个参数必须是number|Node");
+                        }
+                    }
+                    else if (args.length === 3) {
+                        // "div",document,10000
+                        // 第二个参数，parent
+                        const secondParam = args[1];
+                        // 第三个参数，timeout
+                        const thirdParam = args[2];
+                        if (typeof secondParam === "object" && secondParam instanceof Node) {
+                            parent = secondParam;
+                            if (typeof thirdParam === "number") {
+                                timeout = thirdParam;
+                            }
+                            else {
+                                throw new TypeError("Utils.waitAnyNodeList 第三个参数必须是number");
+                            }
+                        }
+                        else {
+                            throw new TypeError("Utils.waitAnyNodeList 第二个参数必须是Node");
+                        }
+                    }
+                    else {
+                        throw new TypeError("Utils.waitAnyNodeList 参数个数错误");
+                    }
+                    const promiseList = selectorList.map((selector) => {
+                        return UtilsContext.waitNodeList(selector, parent, timeout);
+                    });
+                    return Promise.any(promiseList);
+                }
+            }
+            new ElementWait();
+
+            class ElementAnimate extends ElementWait {
+                windowApi;
+                constructor(windowApiOption) {
+                    super(windowApiOption);
+                    this.windowApi = new WindowApi(windowApiOption);
+                }
+                /**
+                 * 在一定时间内改变元素的样式属性，实现动画效果
+                 * @param element 需要进行动画的元素
+                 * @param styles 动画结束时元素的样式属性
+                 * @param duration 动画持续时间，单位为毫秒
+                 * @param callback 动画结束后执行的函数
+                 * @example
+                 * // 监听元素a.xx的从显示变为隐藏
+                 * DOMUtils.animate(document.querySelector("a.xx"),{ top:100},1000,function(){
+                 *   console.log("已往上位移100px")
+                 * })
+                 */
+                animate(element, styles, duration = 1000, callback = null) {
+                    const context = this;
+                    if (typeof element === "string") {
+                        element = elementSelector.selectorAll(element);
+                    }
+                    if (element == null) {
+                        return;
+                    }
+                    if (CommonUtils.isNodeList(element)) {
+                        // 设置
+                        element.forEach(($ele) => {
+                            context.animate($ele, styles, duration, callback);
+                        });
+                        return;
+                    }
+                    if (typeof duration !== "number" || duration <= 0) {
+                        throw new TypeError("duration must be a positive number");
+                    }
+                    if (typeof callback !== "function" && callback !== void 0) {
+                        throw new TypeError("callback must be a function or null");
+                    }
+                    if (typeof styles !== "object" || styles === void 0) {
+                        throw new TypeError("styles must be an object");
+                    }
+                    if (Object.keys(styles).length === 0) {
+                        throw new Error("styles must contain at least one property");
+                    }
+                    const start = performance.now();
+                    const from = {};
+                    const to = {};
+                    for (const prop in styles) {
+                        from[prop] = element.style[prop] || context.windowApi.globalThis.getComputedStyle(element)[prop];
+                        to[prop] = styles[prop];
+                    }
+                    const timer = CommonUtils.setInterval(function () {
+                        const timePassed = performance.now() - start;
+                        let progress = timePassed / duration;
+                        if (progress > 1) {
+                            progress = 1;
+                        }
+                        for (const prop in styles) {
+                            element.style[prop] = from[prop] + (to[prop] - from[prop]) * progress + "px";
+                        }
+                        if (progress === 1) {
+                            CommonUtils.clearInterval(timer);
+                            if (callback) {
+                                callback();
+                            }
+                        }
+                    }, 10);
+                }
+                /**
+                 * 显示元素
+                 * @param target 当前元素
+                 * @param checkVisiblie 是否检测元素是否显示
+                 * + true （默认）如果检测到还未显示，则强制使用display: unset !important;
+                 * + false 不检测，直接设置display属性为空
+                 * @example
+                 * // 显示a.xx元素
+                 * DOMUtils.show(document.querySelector("a.xx"))
+                 * DOMUtils.show(document.querySelectorAll("a.xx"))
+                 * DOMUtils.show("a.xx")
+                 */
+                show(target, checkVisiblie = true) {
+                    const context = this;
+                    if (target == null) {
+                        return;
+                    }
+                    if (typeof target === "string") {
+                        target = elementSelector.selectorAll(target);
+                    }
+                    if (target instanceof NodeList || target instanceof Array) {
+                        target = target;
+                        for (const element of target) {
+                            context.show(element, checkVisiblie);
+                        }
+                    }
+                    else {
+                        target = target;
+                        target.style.display = "";
+                        if (checkVisiblie) {
+                            if (!CommonUtils.isShow(target)) {
+                                /* 仍然是不显示，尝试使用强覆盖 */
+                                target.style.setProperty("display", "unset", "important");
+                            }
+                        }
+                    }
+                }
+                /**
+                 * 隐藏元素
+                 * @param target 当前元素
+                 * @param checkVisiblie 是否检测元素是否显示
+                 * + true （默认）如果检测到显示，则强制使用display: none !important;
+                 * + false 不检测，直接设置display属性为none
+                 * @example
+                 * // 隐藏a.xx元素
+                 * DOMUtils.hide(document.querySelector("a.xx"))
+                 * DOMUtils.hide(document.querySelectorAll("a.xx"))
+                 * DOMUtils.hide("a.xx")
+                 */
+                hide(target, checkVisiblie = true) {
+                    const context = this;
+                    if (target == null) {
+                        return;
+                    }
+                    if (typeof target === "string") {
+                        target = elementSelector.selectorAll(target);
+                    }
+                    if (target instanceof NodeList || target instanceof Array) {
+                        target = target;
+                        for (const element of target) {
+                            context.hide(element, checkVisiblie);
+                        }
+                    }
+                    else {
+                        target = target;
+                        target.style.display = "none";
+                        if (checkVisiblie) {
+                            if (CommonUtils.isShow(target)) {
+                                /* 仍然是显示，尝试使用强覆盖 */
+                                target.style.setProperty("display", "none", "important");
+                            }
+                        }
+                    }
+                }
+                /**
+                 * 淡入元素
+                 * @param element 当前元素
+                 * @param duration 动画持续时间（毫秒），默认400毫秒
+                 * @param callback 动画结束的回调
+                 * @example
+                 * // 元素a.xx淡入
+                 * DOMUtils.fadeIn(document.querySelector("a.xx"),2500,()=>{
+                 *   console.log("淡入完毕");
+                 * })
+                 * DOMUtils.fadeIn("a.xx",undefined,()=>{
+                 *   console.log("淡入完毕");
+                 * })
+                 */
+                fadeIn(element, duration = 400, callback) {
+                    if (element == null) {
+                        return;
+                    }
+                    const context = this;
+                    if (typeof element === "string") {
+                        element = elementSelector.selectorAll(element);
+                    }
+                    if (CommonUtils.isNodeList(element)) {
+                        // 设置
+                        element.forEach(($ele) => {
+                            context.fadeIn($ele, duration, callback);
+                        });
+                        return;
+                    }
+                    element.style.opacity = "0";
+                    element.style.display = "";
+                    let start = null;
+                    let timer = null;
+                    function step(timestamp) {
+                        if (!start)
+                            start = timestamp;
+                        const progress = timestamp - start;
+                        element = element;
+                        element.style.opacity = Math.min(progress / duration, 1).toString();
+                        if (progress < duration) {
+                            context.windowApi.window.requestAnimationFrame(step);
+                        }
+                        else {
+                            if (callback && typeof callback === "function") {
+                                callback();
+                            }
+                            context.windowApi.window.cancelAnimationFrame(timer);
+                        }
+                    }
+                    timer = context.windowApi.window.requestAnimationFrame(step);
+                }
                 /**
-                 * 配合 .setTimeout 使用
+                 * 淡出元素
+                 * @param element 当前元素
+                 * @param duration 动画持续时间（毫秒），默认400毫秒
+                 * @param callback 动画结束的回调
+                 * @example
+                 * // 元素a.xx淡出
+                 * DOMUtils.fadeOut(document.querySelector("a.xx"),2500,()=>{
+                 *   console.log("淡出完毕");
+                 * })
+                 * DOMUtils.fadeOut("a.xx",undefined,()=>{
+                 *   console.log("淡出完毕");
+                 * })
                  */
-                clearTimeout(timeId) {
-                    try {
-                        if (timeId != null) {
-                            clearTimeout$1(timeId);
-                        }
+                fadeOut(element, duration = 400, callback) {
+                    const context = this;
+                    if (element == null) {
+                        return;
                     }
-                    catch {
-                        // TODO
+                    if (typeof element === "string") {
+                        element = elementSelector.selectorAll(element);
                     }
-                    finally {
-                        this.windowApi.clearTimeout(timeId);
+                    if (CommonUtils.isNodeList(element)) {
+                        // 设置
+                        element.forEach(($ele) => {
+                            context.fadeOut($ele, duration, callback);
+                        });
+                        return;
                     }
-                },
+                    element.style.opacity = "1";
+                    let start = null;
+                    let timer = null;
+                    function step(timestamp) {
+                        if (!start)
+                            start = timestamp;
+                        const progress = timestamp - start;
+                        element = element;
+                        element.style.opacity = Math.max(1 - progress / duration, 0).toString();
+                        if (progress < duration) {
+                            context.windowApi.window.requestAnimationFrame(step);
+                        }
+                        else {
+                            element.style.display = "none";
+                            if (typeof callback === "function") {
+                                callback();
+                            }
+                            context.windowApi.window.cancelAnimationFrame(timer);
+                        }
+                    }
+                    timer = context.windowApi.window.requestAnimationFrame(step);
+                }
                 /**
-                 * 自动使用 Worker 执行 setInterval
+                 * 切换元素的显示和隐藏状态
+                 * @param element 当前元素
+                 * @param checkVisiblie 是否检测元素是否显示
+                 * @example
+                 * // 如果元素a.xx当前是隐藏，则显示，如果是显示，则隐藏
+                 * DOMUtils.toggle(document.querySelector("a.xx"))
+                 * DOMUtils.toggle("a.xx")
                  */
-                setInterval(callback, timeout = 0) {
-                    try {
-                        return setInterval$1(callback, timeout);
+                toggle(element, checkVisiblie) {
+                    const context = this;
+                    if (typeof element === "string") {
+                        element = elementSelector.selectorAll(element);
                     }
-                    catch {
-                        return this.windowApi.setInterval(callback, timeout);
+                    if (element == null) {
+                        return;
                     }
-                },
-                /**
-                 * 配合 .setInterval 使用
-                 */
-                clearInterval(timeId) {
-                    try {
-                        if (timeId != null) {
-                            clearInterval$1(timeId);
-                        }
+                    if (CommonUtils.isNodeList(element)) {
+                        // 设置
+                        element.forEach(($ele) => {
+                            context.toggle($ele);
+                        });
+                        return;
                     }
-                    catch {
-                        // TODO
+                    if (context.windowApi.globalThis.getComputedStyle(element).getPropertyValue("display") === "none") {
+                        context.show(element, checkVisiblie);
                     }
-                    finally {
-                        this.windowApi.clearInterval(timeId);
+                    else {
+                        context.hide(element, checkVisiblie);
                     }
-                },
-                /**
-                 * 判断是否是元素列表
-                 * @param $ele
-                 */
-                isNodeList($ele) {
-                    return Array.isArray($ele) || $ele instanceof NodeList;
-                },
-                /** 获取 animationend 在各个浏览器的兼容名 */
-                getAnimationEndNameList() {
-                    return ["webkitAnimationEnd", "mozAnimationEnd", "MSAnimationEnd", "oanimationend", "animationend"];
-                },
-                /** 获取 transitionend 在各个浏览器的兼容名 */
-                getTransitionEndNameList() {
-                    return ["webkitTransitionEnd", "mozTransitionEnd", "MSTransitionEnd", "otransitionend", "transitionend"];
-                },
-            };
-
-            /* 数据 */
-            const DOMUtilsData = {
-                /** .on添加在元素存储的事件 */
-                SymbolEvents: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
-            };
+                }
+            }
+            new ElementAnimate();
 
             const OriginPrototype = {
                 Object: {
@@ -524,11 +1625,20 @@ System.register('DOMUtils', [], (function (exports) {
                 },
             };
 
-            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配置
@@ -559,11 +1669,11 @@ System.register('DOMUtils', [], (function (exports) {
                         }
                         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;
@@ -616,7 +1726,7 @@ System.register('DOMUtils', [], (function (exports) {
                      */
                     function checkOptionOnceToRemoveEventListener() {
                         if (listenerOption.once) {
-                            DOMUtilsContext.off(element, eventType, selector, callback, option);
+                            that.off(element, eventType, selector, callback, option);
                         }
                     }
                     elementList.forEach((elementItem) => {
@@ -632,19 +1742,19 @@ System.register('DOMUtils', [], (function (exports) {
                                     ? 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;
@@ -677,7 +1787,7 @@ System.register('DOMUtils', [], (function (exports) {
                         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({
@@ -687,7 +1797,7 @@ System.register('DOMUtils', [], (function (exports) {
                                 originCallBack: listenerCallBack,
                             });
                             /* 覆盖事件 */
-                            Reflect.set(elementItem, DOMUtilsData.SymbolEvents, elementEvents);
+                            Reflect.set(elementItem, GlobalData.domEventSymbol, elementEvents);
                         });
                     });
                 }
@@ -708,22 +1818,22 @@ System.register('DOMUtils', [], (function (exports) {
                         }
                         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)) {
@@ -774,9 +1884,9 @@ System.register('DOMUtils', [], (function (exports) {
                         // 目标函数、事件名、回调函数、事件配置、过滤函数
                         filter = option;
                     }
-                    elementList.forEach((elementItem) => {
+                    $elList.forEach(($elItem) => {
                         /* 获取对象上的事件 */
-                        const elementEvents = Reflect.get(elementItem, DOMUtilsData.SymbolEvents) || {};
+                        const elementEvents = Reflect.get($elItem, GlobalData.domEventSymbol) || {};
                         eventTypeList.forEach((eventName) => {
                             const handlers = elementEvents[eventName] || [];
                             const filterHandler = typeof filter === "function" ? handlers.filter(filter) : handlers;
@@ -800,7 +1910,7 @@ System.register('DOMUtils', [], (function (exports) {
                                     flag = false;
                                 }
                                 if (flag || isRemoveAll) {
-                                    elementItem.removeEventListener(eventName, handler.callback, handler.option);
+                                    $elItem.removeEventListener(eventName, handler.callback, handler.option);
                                     const findIndex = handlers.findIndex((item) => item === handler);
                                     if (findIndex !== -1) {
                                         handlers.splice(findIndex, 1);
@@ -809,10 +1919,10 @@ System.register('DOMUtils', [], (function (exports) {
                             }
                             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);
                     });
                 }
                 /**
@@ -821,19 +1931,19 @@ System.register('DOMUtils', [], (function (exports) {
                  * @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)) {
@@ -842,12 +1952,13 @@ System.register('DOMUtils', [], (function (exports) {
                     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];
@@ -855,12 +1966,12 @@ System.register('DOMUtils', [], (function (exports) {
                                     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);
                             });
                         });
                     });
@@ -877,15 +1988,15 @@ System.register('DOMUtils', [], (function (exports) {
                     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 {
@@ -905,12 +2016,12 @@ System.register('DOMUtils', [], (function (exports) {
                     }
                     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,
                         },
@@ -935,7 +2046,7 @@ System.register('DOMUtils', [], (function (exports) {
                     }
                     if (checkDOMReadyState()) {
                         /* 检查document状态 */
-                        DOMUtilsCommonUtils.setTimeout(callback);
+                        CommonUtils.setTimeout(callback);
                     }
                     else {
                         /* 添加监听 */
@@ -947,7 +2058,7 @@ System.register('DOMUtils', [], (function (exports) {
                  * @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")
@@ -957,20 +2068,20 @@ System.register('DOMUtils', [], (function (exports) {
                  * 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)) {
@@ -979,29 +2090,33 @@ System.register('DOMUtils', [], (function (exports) {
                     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);
                             }
                         });
                     });
@@ -1021,25 +2136,25 @@ System.register('DOMUtils', [], (function (exports) {
                  * })
                  * */
                 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);
                     }
                 }
                 /**
@@ -1057,25 +2172,25 @@ System.register('DOMUtils', [], (function (exports) {
                  * })
                  * */
                 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);
                     }
                 }
                 /**
@@ -1093,25 +2208,25 @@ System.register('DOMUtils', [], (function (exports) {
                  * })
                  * */
                 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);
                     }
                 }
                 /**
@@ -1129,22 +2244,22 @@ System.register('DOMUtils', [], (function (exports) {
                  * })
                  */
                 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);
                 }
                 /**
                  * 当动画结束时触发事件
@@ -1153,30 +2268,23 @@ System.register('DOMUtils', [], (function (exports) {
                  * @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);
                             },
                         };
                     }
@@ -1188,30 +2296,23 @@ System.register('DOMUtils', [], (function (exports) {
                  * @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);
                             },
                         };
                     }
@@ -1232,21 +2333,21 @@ System.register('DOMUtils', [], (function (exports) {
                  * })
                  */
                 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);
                 }
                 /**
                  * 当按键按下时触发事件
@@ -1264,21 +2365,21 @@ System.register('DOMUtils', [], (function (exports) {
                  * })
                  */
                 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);
                 }
                 /**
                  * 当按键按下时触发事件
@@ -1296,21 +2397,21 @@ System.register('DOMUtils', [], (function (exports) {
                  * })
                  */
                 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全局按键事件
@@ -1376,9 +2477,9 @@ System.register('DOMUtils', [], (function (exports) {
                     收藏		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) {
                         /** 键名 */
@@ -1386,233 +2487,146 @@ System.register('DOMUtils', [], (function (exports) {
                         /** 键值 */
                         const keyValue = event.charCode || event.keyCode || event.which;
                         /** 组合键列表 */
-                        const otherCodeList = [];
-                        if (event.ctrlKey) {
-                            otherCodeList.push("ctrl");
-                        }
-                        if (event.altKey) {
-                            otherCodeList.push("alt");
-                        }
-                        if (event.metaKey) {
-                            otherCodeList.push("meta");
-                        }
-                        if (event.shiftKey) {
-                            otherCodeList.push("shift");
-                        }
-                        if (typeof callback === "function") {
-                            callback(keyName, keyValue, otherCodeList, event);
-                        }
-                    };
-                    DOMUtilsContext.on(element, eventName, keyboardEventCallBack, options);
-                    return {
-                        removeListen: () => {
-                            DOMUtilsContext.off(element, eventName, keyboardEventCallBack, options);
-                        },
-                    };
-                }
-                selector(selector, parent) {
-                    return this.selectorAll(selector, parent)[0];
-                }
-                selectorAll(selector, parent) {
-                    const context = this;
-                    parent = parent || context.windowApi.document;
-                    selector = selector.trim();
-                    if (selector.match(/[^\s]{1}:empty$/gi)) {
-                        // empty 语法
-                        selector = selector.replace(/:empty$/gi, "");
-                        return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
-                            return $ele?.innerHTML?.trim() === "";
-                        });
-                    }
-                    else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
-                        // contains 语法
-                        const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
-                        const text = textMatch[2];
-                        selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
-                        return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
-                            // @ts-ignore
-                            return ($ele?.textContent || $ele?.innerText)?.includes(text);
-                        });
-                    }
-                    else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
-                        // regexp 语法
-                        const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
-                        let pattern = textMatch[2];
-                        const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
-                        let flags = "";
-                        if (flagMatch) {
-                            pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
-                            flags = flagMatch[3];
-                        }
-                        const regexp = new RegExp(pattern, flags);
-                        selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
-                        return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
-                            // @ts-ignore
-                            return Boolean(($ele?.textContent || $ele?.innerText)?.match(regexp));
-                        });
-                    }
-                    else {
-                        // 普通语法
-                        return Array.from(parent.querySelectorAll(selector));
-                    }
-                }
-                /**
-                 * 匹配元素，可使用以下的额外语法
-                 *
-                 * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
-                 * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
-                 * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
-                 * @param $el 元素
-                 * @param selector 选择器
-                 * @example
-                 * DOMUtils.matches("div:contains('测试')")
-                 * > true
-                 * @example
-                 * DOMUtils.matches("div:empty")
-                 * > true
-                 * @example
-                 * DOMUtils.matches("div:regexp('^xxxx$')")
-                 * > true
-                 * @example
-                 * DOMUtils.matches("div:regexp(/^xxx/ig)")
-                 * > false
-                 */
-                matches($el, selector) {
-                    selector = selector.trim();
-                    if ($el == null) {
-                        return false;
-                    }
-                    if (selector.match(/[^\s]{1}:empty$/gi)) {
-                        // empty 语法
-                        selector = selector.replace(/:empty$/gi, "");
-                        return $el.matches(selector) && $el?.innerHTML?.trim() === "";
-                    }
-                    else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
-                        // contains 语法
-                        const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
-                        const text = textMatch[2];
-                        selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
-                        // @ts-ignore
-                        let content = $el?.textContent || $el?.innerText;
-                        if (typeof content !== "string") {
-                            content = "";
-                        }
-                        return $el.matches(selector) && content?.includes(text);
-                    }
-                    else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
-                        // regexp 语法
-                        const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
-                        let pattern = textMatch[2];
-                        const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
-                        let flags = "";
-                        if (flagMatch) {
-                            pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
-                            flags = flagMatch[3];
-                        }
-                        const regexp = new RegExp(pattern, flags);
-                        selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
-                        // @ts-ignore
-                        let content = $el?.textContent || $el?.innerText;
-                        if (typeof content !== "string") {
-                            content = "";
+                        const otherCodeList = [];
+                        if (event.ctrlKey) {
+                            otherCodeList.push("ctrl");
                         }
-                        return $el.matches(selector) && Boolean(content?.match(regexp));
-                    }
-                    else {
-                        // 普通语法
-                        return $el.matches(selector);
-                    }
-                }
-                closest($el, selector) {
-                    selector = selector.trim();
-                    if (selector.match(/[^\s]{1}:empty$/gi)) {
-                        // empty 语法
-                        selector = selector.replace(/:empty$/gi, "");
-                        const $closest = $el?.closest(selector);
-                        if ($closest && $closest?.innerHTML?.trim() === "") {
-                            return $closest;
+                        if (event.altKey) {
+                            otherCodeList.push("alt");
                         }
-                        return null;
-                    }
-                    else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
-                        // contains 语法
-                        const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
-                        const text = textMatch[2];
-                        selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
-                        const $closest = $el?.closest(selector);
-                        if ($closest) {
-                            // @ts-ignore
-                            const content = $el?.textContent || $el?.innerText;
-                            if (typeof content === "string" && content.includes(text)) {
-                                return $closest;
-                            }
+                        if (event.metaKey) {
+                            otherCodeList.push("meta");
                         }
-                        return null;
-                    }
-                    else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
-                        // regexp 语法
-                        const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
-                        let pattern = textMatch[2];
-                        const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
-                        let flags = "";
-                        if (flagMatch) {
-                            pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
-                            flags = flagMatch[3];
+                        if (event.shiftKey) {
+                            otherCodeList.push("shift");
                         }
-                        const regexp = new RegExp(pattern, flags);
-                        selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
-                        const $closest = $el?.closest(selector);
-                        if ($closest) {
-                            // @ts-ignore
-                            const content = $el?.textContent || $el?.innerText;
-                            if (typeof content === "string" && content.match(regexp)) {
-                                return $closest;
-                            }
+                        if (typeof callback === "function") {
+                            callback(keyName, keyValue, otherCodeList, event);
                         }
-                        return null;
+                    };
+                    that.on(element, eventName, keyboardEventCallBack, options);
+                    return {
+                        removeListen: () => {
+                            that.off(element, eventName, keyboardEventCallBack, options);
+                        },
+                    };
+                }
+                preventEvent(...args) {
+                    /**
+                     * 阻止事件的默认行为发生，并阻止事件传播
+                     */
+                    const stopEvent = (event) => {
+                        /* 阻止事件的默认行为发生。例如，当点击一个链接时，浏览器会默认打开链接的URL */
+                        event?.preventDefault();
+                        /* 停止事件的传播，阻止它继续向更上层的元素冒泡，事件将不会再传播给其他的元素 */
+                        event?.stopPropagation();
+                        /* 阻止事件传播，并且还能阻止元素上的其他事件处理程序被触发 */
+                        event?.stopImmediatePropagation();
+                        return false;
+                    };
+                    if (args.length === 1) {
+                        /* 直接阻止事件 */
+                        return stopEvent(args[0]);
                     }
                     else {
-                        // 普通语法
-                        const $closest = $el?.closest(selector);
-                        return $closest;
+                        const $el = args[0];
+                        let eventNameList = args[1];
+                        const capture = args[2];
+                        /* 添加对应的事件来阻止触发 */
+                        if (typeof eventNameList === "string") {
+                            eventNameList = [eventNameList];
+                        }
+                        this.on($el, eventNameList, stopEvent, { capture: Boolean(capture) });
                     }
                 }
             }
+            new ElementEvent();
 
-            const version = "1.6.8";
+            class ElementHandler extends ElementEvent {
+                windowApi;
+                constructor(windowApiOption) {
+                    super(windowApiOption);
+                    this.windowApi = new WindowApi(windowApiOption);
+                }
+                /**
+                 * 获取元素的选择器字符串
+                 * @param $el
+                 * @example
+                 * DOMUtils.getElementSelector(document.querySelector("a"))
+                 * > '.....'
+                 */
+                getElementSelector($el) {
+                    const that = this;
+                    if (!$el)
+                        return void 0;
+                    if (!$el.parentElement)
+                        return void 0;
+                    /* 如果元素有id属性，则直接返回id选择器 */
+                    if ($el.id)
+                        return `#${$el.id}`;
+                    /* 递归地获取父元素的选择器 */
+                    let selector = that.getElementSelector($el.parentElement);
+                    if (!selector) {
+                        return $el.tagName.toLowerCase();
+                    }
+                    /* 如果有多个相同类型的兄弟元素，则需要添加索引 */
+                    if ($el.parentElement.querySelectorAll($el.tagName).length > 1) {
+                        const index = Array.prototype.indexOf.call($el.parentElement.children, $el) + 1;
+                        selector += ` > ${$el.tagName.toLowerCase()}:nth-child(${index})`;
+                    }
+                    else {
+                        selector += ` > ${$el.tagName.toLowerCase()}`;
+                    }
+                    return selector;
+                }
+            }
+            new ElementHandler();
 
-            class DOMUtils extends DOMUtilsEvent {
+            class DOMUtils extends ElementHandler {
                 constructor(option) {
                     super(option);
                 }
                 /** 版本号 */
                 version = version;
-                attr(element, attrName, attrValue) {
-                    const DOMUtilsContext = this;
-                    if (typeof element === "string") {
-                        element = DOMUtilsContext.selectorAll(element);
+                /**
+                 * 取消挂载在window下的DOMUtils并返回DOMUtils
+                 * @example
+                 * let DOMUtils = window.DOMUtils.noConflict()
+                 */
+                noConflict() {
+                    const that = this;
+                    if (that.windowApi.window.DOMUtils) {
+                        CommonUtils.delete(window, "DOMUtils");
                     }
-                    if (element == null) {
+                    that.windowApi.window.DOMUtils = this;
+                    return this;
+                }
+                attr($el, attrName, attrValue) {
+                    const that = this;
+                    if (typeof $el === "string") {
+                        $el = that.selectorAll($el);
+                    }
+                    if ($el == null) {
                         return;
                     }
-                    if (DOMUtilsCommonUtils.isNodeList(element)) {
+                    if (CommonUtils.isNodeList($el)) {
                         if (attrValue == null) {
                             // 获取属性
-                            return DOMUtilsContext.attr(element[0], attrName, attrValue);
+                            return that.attr($el[0], attrName, attrValue);
                         }
                         else {
                             // 设置属性
-                            element.forEach(($ele) => {
-                                DOMUtilsContext.attr($ele, attrName, attrValue);
+                            $el.forEach(($elItem) => {
+                                that.attr($elItem, attrName, attrValue);
                             });
                             return;
                         }
                     }
                     if (attrValue == null) {
-                        return element.getAttribute(attrName);
+                        return $el.getAttribute(attrName);
                     }
                     else {
-                        element.setAttribute(attrName, attrValue);
+                        $el.setAttribute(attrName, attrValue);
                     }
                 }
                 createElement(
@@ -1622,11 +2636,11 @@ System.register('DOMUtils', [], (function (exports) {
                 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 = {};
@@ -1637,10 +2651,10 @@ System.register('DOMUtils', [], (function (exports) {
                     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];
@@ -1652,12 +2666,12 @@ System.register('DOMUtils', [], (function (exports) {
                             /* 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的加上
                      */
@@ -1671,30 +2685,30 @@ System.register('DOMUtils', [], (function (exports) {
                         }
                         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;
                         }
@@ -1706,16 +2720,16 @@ System.register('DOMUtils', [], (function (exports) {
                                 .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);
@@ -1732,92 +2746,92 @@ System.register('DOMUtils', [], (function (exports) {
                         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) {
@@ -1834,225 +2848,189 @@ System.register('DOMUtils', [], (function (exports) {
                         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;
                     }
@@ -2063,31 +3041,31 @@ System.register('DOMUtils', [], (function (exports) {
                         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)) {
@@ -2095,7 +3073,7 @@ System.register('DOMUtils', [], (function (exports) {
                     }
                     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;
                         }
                     }
@@ -2103,25 +3081,25 @@ System.register('DOMUtils', [], (function (exports) {
                 }
                 /**
                  * 函数在元素内部末尾添加子元素或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;
                     }
@@ -2129,12 +3107,12 @@ System.register('DOMUtils', [], (function (exports) {
                         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 {
@@ -2143,96 +3121,96 @@ System.register('DOMUtils', [], (function (exports) {
                     }
                     if (Array.isArray(content) || content instanceof NodeList) {
                         /* 数组 */
-                        const fragment = DOMUtilsContext.windowApi.document.createDocumentFragment();
+                        const fragment = that.windowApi.document.createDocumentFragment();
                         content.forEach((ele) => {
                             if (typeof ele === "string") {
                                 // 转为元素
-                                ele = DOMUtilsContext.parseHTML(ele, true, false);
+                                ele = that.toElement(ele, true, false);
                             }
                             fragment.appendChild(ele);
                         });
-                        element.appendChild(fragment);
+                        $el.appendChild(fragment);
                     }
                     else {
-                        elementAppendChild(element, content);
+                        elementAppendChild($el, content);
                     }
                 }
                 /**
                  * 函数 在元素内部开头添加子元素或HTML字符串
-                 * @param element 目标元素
+                 * @param $el 目标元素
                  * @param content 子元素或HTML字符串
                  * @example
                  * // 元素a.xx内部开头添加一个元素
                  * DOMUtils.prepend(document.querySelector("a.xx"),document.querySelector("b.xx"))
                  * DOMUtils.prepend("a.xx","'<b class="xx"></b>")
                  * */
-                prepend(element, content) {
-                    const DOMUtilsContext = this;
-                    if (typeof element === "string") {
-                        element = DOMUtilsContext.selectorAll(element);
+                prepend($el, content) {
+                    const that = this;
+                    if (typeof $el === "string") {
+                        $el = that.selectorAll($el);
                     }
-                    if (element == null) {
+                    if ($el == null) {
                         return;
                     }
-                    if (DOMUtilsCommonUtils.isNodeList(element)) {
+                    if (CommonUtils.isNodeList($el)) {
                         // 设置
-                        element.forEach(($ele) => {
-                            DOMUtilsContext.prepend($ele, content);
+                        $el.forEach(($elItem) => {
+                            that.prepend($elItem, content);
                         });
                         return;
                     }
                     if (typeof content === "string") {
-                        if (element instanceof DocumentFragment) {
-                            content = DOMUtilsContext.parseHTML(content, true, false);
-                            element.prepend(content);
+                        if ($el instanceof DocumentFragment) {
+                            content = that.toElement(content, true, false);
+                            $el.prepend(content);
                         }
                         else {
-                            element.insertAdjacentHTML("afterbegin", DOMUtilsCommonUtils.getSafeHTML(content));
+                            $el.insertAdjacentHTML("afterbegin", CommonUtils.createSafeHTML(content));
                         }
                     }
                     else {
-                        const $firstChild = element.firstChild;
+                        const $firstChild = $el.firstChild;
                         if ($firstChild == null) {
-                            element.prepend(content);
+                            $el.prepend(content);
                         }
                         else {
-                            element.insertBefore(content, $firstChild);
+                            $el.insertBefore(content, $firstChild);
                         }
                     }
                 }
                 /**
                  * 在元素后面添加兄弟元素或HTML字符串
-                 * @param element 目标元素
+                 * @param $el 目标元素
                  * @param content 兄弟元素或HTML字符串
                  * @example
                  * // 元素a.xx后面添加一个元素
                  * DOMUtils.after(document.querySelector("a.xx"),document.querySelector("b.xx"))
                  * DOMUtils.after("a.xx","'<b class="xx"></b>")
                  * */
-                after(element, content) {
-                    const DOMUtilsContext = this;
-                    if (typeof element === "string") {
-                        element = DOMUtilsContext.selectorAll(element);
+                after($el, content) {
+                    const that = this;
+                    if (typeof $el === "string") {
+                        $el = that.selectorAll($el);
                     }
-                    if (element == null) {
+                    if ($el == null) {
                         return;
                     }
-                    if (DOMUtilsCommonUtils.isNodeList(element)) {
+                    if (CommonUtils.isNodeList($el)) {
                         // 设置
-                        element.forEach(($ele) => {
-                            DOMUtilsContext.after($ele, content);
+                        $el.forEach(($elItem) => {
+                            that.after($elItem, content);
                         });
                         return;
                     }
                     if (typeof content === "string") {
-                        element.insertAdjacentHTML("afterend", DOMUtilsCommonUtils.getSafeHTML(content));
+                        $el.insertAdjacentHTML("afterend", CommonUtils.createSafeHTML(content));
                     }
                     else {
-                        const $parent = element.parentElement;
-                        const $nextSlibling = element.nextSibling;
+                        const $parent = $el.parentElement;
+                        const $nextSlibling = $el.nextSibling;
                         if (!$parent || $nextSlibling) {
                             // 任意一个不行
-                            element.after(content);
+                            $el.after(content);
                         }
                         else {
                             $parent.insertBefore(content, $nextSlibling);
@@ -2241,157 +3219,157 @@ System.register('DOMUtils', [], (function (exports) {
                 }
                 /**
                  * 在元素前面添加兄弟元素或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()) -
@@ -2402,41 +3380,41 @@ System.register('DOMUtils', [], (function (exports) {
                     }
                     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()) -
@@ -2447,200 +3425,160 @@ System.register('DOMUtils', [], (function (exports) {
                     }
                     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元素的父元素
@@ -2648,27 +3586,27 @@ System.register('DOMUtils', [], (function (exports) {
                  * 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() {
@@ -2681,13 +3619,13 @@ System.register('DOMUtils', [], (function (exports) {
                         }
                     }
                     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) {
@@ -2732,213 +3670,6 @@ System.register('DOMUtils', [], (function (exports) {
                         .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
@@ -2956,7 +3687,7 @@ System.register('DOMUtils', [], (function (exports) {
                  * 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;
@@ -3025,7 +3756,7 @@ System.register('DOMUtils', [], (function (exports) {
                     }
                     // 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);
@@ -3039,7 +3770,7 @@ System.register('DOMUtils', [], (function (exports) {
                     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;
@@ -3051,7 +3782,7 @@ System.register('DOMUtils', [], (function (exports) {
                      * @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);
@@ -3059,7 +3790,7 @@ System.register('DOMUtils', [], (function (exports) {
                     }
                     // 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;
@@ -3078,7 +3809,7 @@ System.register('DOMUtils', [], (function (exports) {
                      * @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);
                         }
@@ -3087,13 +3818,163 @@ System.register('DOMUtils', [], (function (exports) {
                         }
                     }
                 }
-                /** 获取 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 = exports("default", new DOMUtils());