@whitesev/domutils 1.0.0

package/dist/index.umd.js

@@ -0,0 +1,1683 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DOMUtils = factory());
+})(this, (function () { 'use strict';
+
+    /** 通用工具类 */
+    const CommonDOMUtils = {
+        /**
+         * 判断元素是否已显示或已连接
+         * @param element
+         */
+        isShow(element) {
+            return Boolean(element.getClientRects().length);
+        },
+        /**
+         * 用于显示元素并获取它的高度宽度等其它属性
+         * @param element
+         */
+        showElement(element) {
+            let dupNode = element.cloneNode(true);
+            dupNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
+            document.documentElement.appendChild(dupNode);
+            return {
+                /**
+                 * 恢复修改的style
+                 */
+                recovery() {
+                    dupNode.remove();
+                },
+            };
+        },
+        /**
+         * 获取元素上的Float格式的属性px
+         * @param element
+         * @param styleName style名
+         */
+        getStyleValue(element, styleName) {
+            let view = null;
+            let styles = null;
+            if (element instanceof CSSStyleDeclaration) {
+                /* 直接就获取了style属性 */
+                styles = element;
+            }
+            else {
+                view = element.ownerDocument.defaultView;
+                if (!view || !view.opener) {
+                    view = window;
+                }
+                styles = view.getComputedStyle(element);
+            }
+            let value = parseFloat(styles[styleName]);
+            if (isNaN(value)) {
+                return 0;
+            }
+            else {
+                return value;
+            }
+        },
+        /**
+         * 判断是否是window，例如window、self、globalThis
+         * @param target
+         */
+        isWin(target) {
+            if (typeof target !== "object") {
+                return false;
+            }
+            if (target instanceof Node) {
+                return false;
+            }
+            if (target === globalThis) {
+                return true;
+            }
+            if (target === window) {
+                return true;
+            }
+            if (target === self) {
+                return true;
+            }
+            if (typeof unsafeWindow !== "undefined" && target === unsafeWindow) {
+                return true;
+            }
+            if (target?.Math?.toString() !== "[object Math]") {
+                return false;
+            }
+            return true;
+        },
+        /**
+         * 删除对象上的属性
+         * @param target
+         * @param propName
+         */
+        delete(target, propName) {
+            if (typeof Reflect === "object" && Reflect.deleteProperty) {
+                Reflect.deleteProperty(target, propName);
+            }
+            else {
+                delete target[propName];
+            }
+        },
+    };
+
+    /* 数据 */
+    const DOMUtilsData = {
+        /** .on绑定的事件 */
+        SymbolEvents: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
+    };
+
+    const OriginPrototype = {
+        Object: {
+            defineProperty: Object.defineProperty,
+        },
+    };
+
+    class DOMUtils {
+        /** 版本号 */
+        version = "2024.5.24";
+        attr(element, attrName, attrValue) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (attrValue == null) {
+                return element.getAttribute(attrName);
+            }
+            else {
+                element.setAttribute(attrName, attrValue);
+            }
+        }
+        /**
+         * 创建元素
+         * @param tagName 标签名
+         * @param property 属性
+         * @param attributes 元素上的自定义属性
+         * @example
+         * // 创建一个DIV元素，且属性class为xxx
+         * DOMUtils.createElement("div",undefined,{ class:"xxx" });
+         * > <div class="xxx"></div>
+         * @example
+         * // 创建一个DIV元素
+         * DOMUtils.createElement("div");
+         * > <div></div>
+         * @example
+         * // 创建一个DIV元素
+         * DOMUtils.createElement("div","测试");
+         * > <div>测试</div>
+         */
+        createElement(
+        /** 元素名 */
+        tagName, 
+        /** 属性 */
+        property, 
+        /** 自定义属性 */
+        attributes) {
+            let tempElement = document.createElement(tagName);
+            if (typeof property === "string") {
+                tempElement.innerHTML = property;
+                return tempElement;
+            }
+            if (property == null) {
+                property = {};
+            }
+            if (attributes == null) {
+                attributes = {};
+            }
+            Object.keys(property).forEach((key) => {
+                let value = property[key];
+                tempElement[key] = value;
+            });
+            Object.keys(attributes).forEach((key) => {
+                let value = attributes[key];
+                if (typeof value === "object") {
+                    /* object转字符串 */
+                    value = JSON.stringify(value);
+                }
+                else if (typeof value === "function") {
+                    /* function转字符串 */
+                    value = value.toString();
+                }
+                tempElement.setAttribute(key, value);
+            });
+            return tempElement;
+        }
+        css(element, property, value) {
+            /**
+             * 把纯数字没有px的加上
+             */
+            function handlePixe(propertyName, propertyValue) {
+                let allowAddPixe = [
+                    "width",
+                    "height",
+                    "top",
+                    "left",
+                    "right",
+                    "bottom",
+                    "font-size",
+                ];
+                if (typeof propertyValue === "number") {
+                    propertyValue = propertyValue.toString();
+                }
+                if (typeof propertyValue === "string" &&
+                    allowAddPixe.includes(propertyName) &&
+                    propertyValue.match(/[0-9]$/gi)) {
+                    propertyValue = propertyValue + "px";
+                }
+                return propertyValue;
+            }
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (typeof property === "string") {
+                if (value == null) {
+                    return getComputedStyle(element).getPropertyValue(property);
+                }
+                else {
+                    if (value === "string" && value.includes("!important")) {
+                        element.style.setProperty(property, value, "important");
+                    }
+                    else {
+                        value = handlePixe(property, value);
+                        element.style.setProperty(property, value);
+                    }
+                }
+            }
+            else if (typeof property === "object") {
+                for (let prop in property) {
+                    if (typeof property[prop] === "string" &&
+                        property[prop].includes("!important")) {
+                        element.style.setProperty(prop, property[prop], "important");
+                    }
+                    else {
+                        property[prop] = handlePixe(prop, property[prop]);
+                        element.style.setProperty(prop, property[prop]);
+                    }
+                }
+            }
+        }
+        text(element, text) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (text == null) {
+                return element.textContent || element.innerText;
+            }
+            else {
+                if (text instanceof Node) {
+                    text = text.textContent || text.innerText;
+                }
+                if ("textContent" in element) {
+                    element.textContent = text;
+                }
+                else if ("innerText" in element) {
+                    element.innerText = text;
+                }
+            }
+        }
+        html(element, html) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (html == null) {
+                return element.innerHTML;
+            }
+            else {
+                if (html instanceof Node) {
+                    html = html.innerHTML;
+                }
+                if ("innerHTML" in element) {
+                    element.innerHTML = html;
+                }
+            }
+        }
+        /**
+         * 绑定或触发元素的click事件
+         * @param element 目标元素
+         * @param handler （可选）事件处理函数
+         * @param details （可选）赋予触发的Event的额外属性
+         * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
+         * @example
+         * // 触发元素a.xx的click事件
+         * DOMUtils.click(document.querySelector("a.xx"))
+         * DOMUtils.click("a.xx")
+         * DOMUtils.click("a.xx"，function(){
+         *  console.log("触发click事件成功")
+         * })
+         * */
+        click(element, handler, details, useDispatchToTriggerEvent) {
+            let DOMUtilsContext = this;
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (handler == null) {
+                DOMUtilsContext.trigger(element, "click", details, useDispatchToTriggerEvent);
+            }
+            else {
+                DOMUtilsContext.on(element, "click", null, handler);
+            }
+        }
+        /**
+         * 绑定或触发元素的blur事件
+         * @param element 目标元素
+         * @param handler （可选）事件处理函数
+         * @param details （可选）赋予触发的Event的额外属性
+         * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
+         * @example
+         * // 触发元素a.xx的blur事件
+         * DOMUtils.blur(document.querySelector("a.xx"))
+         * DOMUtils.blur("a.xx")
+         * DOMUtils.blur("a.xx"，function(){
+         *  console.log("触发blur事件成功")
+         * })
+         * */
+        blur(element, handler, details, useDispatchToTriggerEvent) {
+            let DOMUtilsContext = this;
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (handler === null) {
+                DOMUtilsContext.trigger(element, "blur", details, useDispatchToTriggerEvent);
+            }
+            else {
+                DOMUtilsContext.on(element, "blur", null, handler);
+            }
+        }
+        /**
+         * 绑定或触发元素的focus事件
+         * @param element 目标元素
+         * @param handler （可选）事件处理函数
+         * @param details （可选）赋予触发的Event的额外属性
+         * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
+         * @example
+         * // 触发元素a.xx的focus事件
+         * DOMUtils.focus(document.querySelector("a.xx"))
+         * DOMUtils.focus("a.xx")
+         * DOMUtils.focus("a.xx"，function(){
+         *  console.log("触发focus事件成功")
+         * })
+         * */
+        focus(element, handler, details, useDispatchToTriggerEvent) {
+            let DOMUtilsContext = this;
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (handler == null) {
+                DOMUtilsContext.trigger(element, "focus", details, useDispatchToTriggerEvent);
+            }
+            else {
+                DOMUtilsContext.on(element, "focus", null, handler);
+            }
+        }
+        /**
+         * 获取移动元素的transform偏移
+         */
+        getTransform(element, isShow = false) {
+            let DOMUtilsContext = this;
+            let transform_left = 0;
+            let transform_top = 0;
+            if (!(isShow || (!isShow && CommonDOMUtils.isShow(element)))) {
+                /* 未显示 */
+                let { recovery } = CommonDOMUtils.showElement(element);
+                let transformInfo = DOMUtilsContext.getTransform(element, true);
+                recovery();
+                return transformInfo;
+            }
+            let elementTransform = getComputedStyle(element).transform;
+            if (elementTransform != null &&
+                elementTransform !== "none" &&
+                elementTransform !== "") {
+                let elementTransformSplit = elementTransform
+                    .match(/\((.+)\)/)?.[1]
+                    .split(",");
+                if (elementTransformSplit) {
+                    transform_left = Math.abs(parseInt(elementTransformSplit[4]));
+                    transform_top = Math.abs(parseInt(elementTransformSplit[5]));
+                }
+                else {
+                    transform_left = 0;
+                    transform_top = 0;
+                }
+            }
+            return {
+                transformLeft: transform_left,
+                transformTop: transform_top,
+            };
+        }
+        val(element, value) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (value == null) {
+                if (element.localName === "input" &&
+                    (element.type === "checkbox" || element.type === "radio")) {
+                    return element.checked;
+                }
+                else {
+                    return element.value;
+                }
+            }
+            else {
+                if (element.localName === "input" &&
+                    (element.type === "checkbox" || element.type === "radio")) {
+                    element.checked = !!value;
+                }
+                else {
+                    element.value = value;
+                }
+            }
+        }
+        prop(element, propName, propValue) {
+            if (element == null) {
+                return;
+            }
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (propValue == null) {
+                return element[propName];
+            }
+            else {
+                element[propName] = propValue;
+            }
+        }
+        /**
+         * 移除元素的属性
+         * @param element 目标元素
+         * @param attrName 属性名
+         * @example
+         * // 移除元素a.xx的属性data-value
+         * DOMUtils.removeAttr(document.querySelector("a.xx"),"data-value")
+         * DOMUtils.removeAttr("a.xx","data-value")
+         * */
+        removeAttr(element, attrName) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            element.removeAttribute(attrName);
+        }
+        /**
+         * 移除元素class名
+         * @param element 目标元素
+         * @param className 类名
+         * @example
+         * // 移除元素a.xx的className为xx
+         * DOMUtils.removeClass(document.querySelector("a.xx"),"xx")
+         * DOMUtils.removeClass("a.xx","xx")
+         */
+        removeClass(element, className) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (className == null) {
+                return;
+            }
+            element.classList.remove(className);
+        }
+        /**
+         * 移除元素的属性
+         * @param element 目标元素
+         * @param propName 属性名
+         * @example
+         * // 移除元素a.xx的href属性
+         * DOMUtils.removeProp(document.querySelector("a.xx"),"href")
+         * DOMUtils.removeProp("a.xx","href")
+         * */
+        removeProp(element, propName) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            CommonDOMUtils.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) {
+            let DOMUtilsContext = this;
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (typeof newElement === "string") {
+                newElement = DOMUtilsContext.parseHTML(newElement, false, false);
+            }
+            if (element instanceof NodeList || element instanceof Array) {
+                element.forEach((item) => {
+                    DOMUtilsContext.replaceWith(item, newElement);
+                });
+            }
+            else {
+                element.parentElement.replaceChild(newElement, element);
+            }
+        }
+        /**
+         * 给元素添加class
+         * @param element 目标元素
+         * @param className class名
+         * @example
+         * // 元素a.xx的className添加_vue_
+         * DOMUtils.addClass(document.querySelector("a.xx"),"_vue_")
+         * DOMUtils.addClass("a.xx","_vue_")
+         * */
+        addClass(element, className) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            element.classList.add(className);
+        }
+        /**
+         * 函数在元素内部末尾添加子元素或HTML字符串
+         * @param element 目标元素
+         * @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) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (typeof content === "string") {
+                element.insertAdjacentHTML("beforeend", content);
+            }
+            else {
+                element.appendChild(content);
+            }
+        }
+        /**
+         * 函数 在元素内部开头添加子元素或HTML字符串
+         * @param element 目标元素
+         * @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) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (typeof content === "string") {
+                element.insertAdjacentHTML("afterbegin", content);
+            }
+            else {
+                element.insertBefore(content, element.firstChild);
+            }
+        }
+        /**
+         * 在元素后面添加兄弟元素或HTML字符串
+         * @param element 目标元素
+         * @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) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (typeof content === "string") {
+                element.insertAdjacentHTML("afterend", content);
+            }
+            else {
+                element.parentElement.insertBefore(content, element.nextSibling);
+            }
+        }
+        /**
+         * 在元素前面添加兄弟元素或HTML字符串
+         * @param element 目标元素
+         * @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) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (typeof content === "string") {
+                element.insertAdjacentHTML("beforebegin", content);
+            }
+            else {
+                element.parentElement.insertBefore(content, element);
+            }
+        }
+        /**
+         * 移除元素
+         * @param target 目标元素
+         * @example
+         * // 元素a.xx前面添加一个元素
+         * DOMUtils.remove(document.querySelector("a.xx"))
+         * DOMUtils.remove(document.querySelectorAll("a.xx"))
+         * DOMUtils.remove("a.xx")
+         * */
+        remove(target) {
+            let DOMUtilsContext = this;
+            if (typeof target === "string") {
+                target = document.querySelectorAll(target);
+            }
+            if (target == null) {
+                return;
+            }
+            if (target instanceof NodeList || target instanceof Array) {
+                target = target;
+                for (const element of target) {
+                    DOMUtilsContext.remove(element);
+                }
+            }
+            else {
+                target.remove();
+            }
+        }
+        /**
+         * 移除元素的所有子元素
+         * @param element 目标元素
+         * @example
+         * // 移除元素a.xx元素的所有子元素
+         * DOMUtils.empty(document.querySelector("a.xx"))
+         * DOMUtils.empty("a.xx")
+         * */
+        empty(element) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            element.innerHTML = "";
+        }
+        on(element, eventType, selector, callback, option) {
+            /**
+             * 获取option配置
+             * @param args
+             * @param startIndex
+             * @param option
+             */
+            function getOption(args, startIndex, option) {
+                if (typeof args[startIndex] === "boolean") {
+                    option.capture = args[startIndex];
+                    if (typeof args[startIndex + 1] === "boolean") {
+                        option.once = args[startIndex + 1];
+                    }
+                    if (typeof args[startIndex + 2] === "boolean") {
+                        option.passive = args[startIndex + 2];
+                    }
+                }
+                else if (typeof args[startIndex] === "object" &&
+                    ("capture" in args[startIndex] ||
+                        "once" in args[startIndex] ||
+                        "passive" in args[startIndex])) {
+                    option.capture = args[startIndex].capture;
+                    option.once = args[startIndex].once;
+                    option.passive = args[startIndex].passive;
+                }
+                return option;
+            }
+            let DOMUtilsContext = this;
+            let args = arguments;
+            if (typeof element === "string") {
+                element = document.querySelectorAll(element);
+            }
+            if (element == null) {
+                return;
+            }
+            let elementList = [];
+            if (element instanceof NodeList || Array.isArray(element)) {
+                element = element;
+                elementList = [...element];
+            }
+            else {
+                elementList.push(element);
+            }
+            let eventTypeList = [];
+            if (Array.isArray(eventType)) {
+                eventTypeList = eventTypeList.concat(eventType);
+            }
+            else if (typeof eventType === "string") {
+                eventTypeList = eventTypeList.concat(eventType.split(" "));
+            }
+            let _selector_ = selector;
+            let _callback_ = callback;
+            let _option_ = {
+                capture: false,
+                once: false,
+                passive: false,
+            };
+            if (typeof selector === "function") {
+                /* 这是为没有selector的情况 */
+                _selector_ = void 0;
+                _callback_ = selector;
+                _option_ = getOption(args, 3, _option_);
+            }
+            else {
+                /* 这是存在selector的情况 */
+                _option_ = getOption(args, 4, _option_);
+            }
+            /**
+             * 如果是once，那么删除该监听和元素上的事件和监听
+             */
+            function checkOptionOnceToRemoveEventListener() {
+                if (_option_.once) {
+                    DOMUtilsContext.off(element, eventType, selector, callback, option);
+                }
+            }
+            elementList.forEach((elementItem) => {
+                function ownCallBack(event) {
+                    let target = event.target;
+                    if (_selector_) {
+                        /* 存在自定义子元素选择器 */
+                        let totalParent = CommonDOMUtils.isWin(elementItem)
+                            ? document.documentElement
+                            : elementItem;
+                        if (target.matches(_selector_)) {
+                            /* 当前目标可以被selector所匹配到 */
+                            _callback_.call(target, event);
+                            checkOptionOnceToRemoveEventListener();
+                        }
+                        else if (target.closest(_selector_) &&
+                            totalParent.contains(target.closest(_selector_))) {
+                            /* 在上层与主元素之间寻找可以被selector所匹配到的 */
+                            let closestElement = target.closest(_selector_);
+                            /* event的target值不能直接修改 */
+                            OriginPrototype.Object.defineProperty(event, "target", {
+                                get() {
+                                    return closestElement;
+                                },
+                            });
+                            _callback_.call(closestElement, event);
+                            checkOptionOnceToRemoveEventListener();
+                        }
+                    }
+                    else {
+                        _callback_.call(elementItem, event);
+                        checkOptionOnceToRemoveEventListener();
+                    }
+                }
+                /* 遍历事件名设置元素事件 */
+                eventTypeList.forEach((eventName) => {
+                    elementItem.addEventListener(eventName, ownCallBack, _option_);
+                    if (_callback_ && _callback_.delegate) {
+                        elementItem.setAttribute("data-delegate", _selector_);
+                    }
+                    /* 获取对象上的事件 */
+                    let elementEvents = elementItem[DOMUtilsData.SymbolEvents] || {};
+                    /* 初始化对象上的xx事件 */
+                    elementEvents[eventName] = elementEvents[eventName] || [];
+                    elementEvents[eventName].push({
+                        selector: _selector_,
+                        option: _option_,
+                        callback: ownCallBack,
+                        originCallBack: _callback_,
+                    });
+                    /* 覆盖事件 */
+                    elementItem[DOMUtilsData.SymbolEvents] = elementEvents;
+                });
+            });
+        }
+        off(element, eventType, selector, callback, option, filter) {
+            /**
+             * 获取option配置
+             * @param args1
+             * @param startIndex
+             * @param option
+             */
+            function getOption(args1, startIndex, option) {
+                if (typeof args1[startIndex] === "boolean") {
+                    option.capture = args1[startIndex];
+                }
+                else if (typeof args1[startIndex] === "object" &&
+                    "capture" in args1[startIndex]) {
+                    option.capture = args1[startIndex].capture;
+                }
+                return option;
+            }
+            let args = arguments;
+            if (typeof element === "string") {
+                element = document.querySelectorAll(element);
+            }
+            if (element == null) {
+                return;
+            }
+            let elementList = [];
+            if (element instanceof NodeList || Array.isArray(element)) {
+                element = element;
+                elementList = [...element];
+            }
+            else {
+                elementList.push(element);
+            }
+            let eventTypeList = [];
+            if (Array.isArray(eventType)) {
+                eventTypeList = eventTypeList.concat(eventType);
+            }
+            else if (typeof eventType === "string") {
+                eventTypeList = eventTypeList.concat(eventType.split(" "));
+            }
+            /**
+             * 子元素选择器
+             */
+            let _selector_ = selector;
+            /**
+             * 事件的回调函数
+             */
+            let _callback_ = callback;
+            /**
+             * 事件的配置
+             */
+            let _option_ = {
+                capture: false,
+            };
+            if (typeof selector === "function") {
+                /* 这是为没有selector的情况 */
+                _selector_ = void 0;
+                _callback_ = selector;
+                _option_ = getOption(args, 3, _option_);
+            }
+            else {
+                _option_ = getOption(args, 4, _option_);
+            }
+            elementList.forEach((elementItem) => {
+                /* 获取对象上的事件 */
+                let elementEvents = elementItem[DOMUtilsData.SymbolEvents] || {};
+                eventTypeList.forEach((eventName) => {
+                    let handlers = elementEvents[eventName] || [];
+                    if (typeof filter === "function") {
+                        handlers = handlers.filter(filter);
+                    }
+                    for (let index = 0; index < handlers.length; index++) {
+                        let handler = handlers[index];
+                        let flag = false;
+                        if (!_selector_ || handler.selector === _selector_) {
+                            /* selector不为空，进行selector判断 */
+                            flag = true;
+                        }
+                        if (!_callback_ ||
+                            handler.callback === _callback_ ||
+                            handler.originCallBack === _callback_) {
+                            /* callback不为空，进行callback判断 */
+                            flag = true;
+                        }
+                        if (flag) {
+                            elementItem.removeEventListener(eventName, handler.callback, _option_);
+                            handlers.splice(index--, 1);
+                        }
+                    }
+                    if (handlers.length === 0) {
+                        /* 如果没有任意的handler，那么删除该属性 */
+                        CommonDOMUtils.delete(elementEvents, eventType);
+                    }
+                });
+                elementItem[DOMUtilsData.SymbolEvents] = elementEvents;
+            });
+        }
+        /**
+         * 取消绑定所有的事件
+         * @param element 需要取消绑定的元素|元素数组
+         * @param eventType （可选）需要取消监听的事件
+         */
+        offAll(element, eventType) {
+            if (typeof element === "string") {
+                element = document.querySelectorAll(element);
+            }
+            if (element == null) {
+                return;
+            }
+            let elementList = [];
+            if (element instanceof NodeList || Array.isArray(element)) {
+                element = element;
+                elementList = [...element];
+            }
+            else {
+                elementList.push(element);
+            }
+            let eventTypeList = [];
+            if (Array.isArray(eventType)) {
+                eventTypeList = eventTypeList.concat(eventType);
+            }
+            else if (typeof eventType === "string") {
+                eventTypeList = eventTypeList.concat(eventType.split(" "));
+            }
+            elementList.forEach((elementItem) => {
+                Object.getOwnPropertySymbols(elementItem).forEach((symbolEvents) => {
+                    if (!symbolEvents.toString().startsWith("Symbol(events_")) {
+                        return;
+                    }
+                    let elementEvents = elementItem[symbolEvents] || {};
+                    let iterEventNameList = eventTypeList.length
+                        ? eventTypeList
+                        : Object.keys(elementEvents);
+                    iterEventNameList.forEach((eventName) => {
+                        let handlers = elementEvents[eventName];
+                        if (!handlers) {
+                            return;
+                        }
+                        for (const handler of handlers) {
+                            elementItem.removeEventListener(eventName, handler.callback, {
+                                capture: handler["option"]["capture"],
+                            });
+                        }
+                        CommonDOMUtils.delete(elementItem[symbolEvents], eventName);
+                    });
+                });
+            });
+        }
+        /**
+         * 主动触发事件
+         * @param element 需要触发的元素|元素数组|window
+         * @param eventType 需要触发的事件
+         * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
+         * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true
+         * @example
+         * // 触发元素a.xx的click事件
+         * DOMUtils.trigger(document.querySelector("a.xx"),"click")
+         * DOMUtils.trigger("a.xx","click")
+         * // 触发元素a.xx的click、tap、hover事件
+         * DOMUtils.trigger(document.querySelector("a.xx"),"click tap hover")
+         * DOMUtils.trigger("a.xx",["click","tap","hover"])
+         */
+        trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            let elementList = [];
+            if (element instanceof NodeList || Array.isArray(element)) {
+                element = element;
+                elementList = [...element];
+            }
+            else {
+                elementList = [element];
+            }
+            let eventTypeList = [];
+            if (Array.isArray(eventType)) {
+                eventTypeList = eventType;
+            }
+            else if (typeof eventType === "string") {
+                eventTypeList = eventType.split(" ");
+            }
+            elementList.forEach((elementItem) => {
+                /* 获取对象上的事件 */
+                let events = elementItem[DOMUtilsData.SymbolEvents] || {};
+                eventTypeList.forEach((_eventType_) => {
+                    let event = null;
+                    if (details && details instanceof Event) {
+                        event = details;
+                    }
+                    else {
+                        event = new Event(_eventType_);
+                        if (details) {
+                            Object.keys(details).forEach((keyName) => {
+                                event[keyName] = details[keyName];
+                            });
+                        }
+                    }
+                    if (useDispatchToTriggerEvent == false && _eventType_ in events) {
+                        events[_eventType_].forEach((eventsItem) => {
+                            eventsItem.callback(event);
+                        });
+                    }
+                    else {
+                        elementItem.dispatchEvent(event);
+                    }
+                });
+            });
+        }
+        /**
+         * 获取元素相对于文档的偏移坐标（加上文档的滚动条）
+         * @param element 目标元素
+         * @example
+         * // 获取元素a.xx的对于文档的偏移坐标
+         * DOMUtils.offset(document.querySelector("a.xx"))
+         * DOMUtils.offset("a.xx")
+         * > 0
+         */
+        offset(element) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            let rect = element.getBoundingClientRect();
+            return {
+                /** y轴偏移 */
+                top: rect.top + globalThis.scrollY,
+                /** x轴偏移 */
+                left: rect.left + globalThis.scrollX,
+            };
+        }
+        width(element, isShow = false) {
+            let DOMUtilsContext = this;
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (CommonDOMUtils.isWin(element)) {
+                return window.document.documentElement.clientWidth;
+            }
+            if (element.nodeType === 9) {
+                /* Document文档节点 */
+                element = element;
+                return Math.max(element.body.scrollWidth, element.documentElement.scrollWidth, element.body.offsetWidth, element.documentElement.offsetWidth, element.documentElement.clientWidth);
+            }
+            if (isShow || (!isShow && CommonDOMUtils.isShow(element))) {
+                /* 已显示 */
+                /* 不从style中获取对应的宽度，因为可能使用了class定义了width !important */
+                element = element;
+                /* 如果element.style.width为空  则从css里面获取是否定义了width信息如果定义了 则读取css里面定义的宽度width */
+                if (parseFloat(CommonDOMUtils.getStyleValue(element, "width").toString()) >
+                    0) {
+                    return parseFloat(CommonDOMUtils.getStyleValue(element, "width").toString());
+                }
+                /* 如果从css里获取到的值不是大于0  可能是auto 则通过offsetWidth来进行计算 */
+                if (element.offsetWidth > 0) {
+                    let borderLeftWidth = CommonDOMUtils.getStyleValue(element, "borderLeftWidth");
+                    let borderRightWidth = CommonDOMUtils.getStyleValue(element, "borderRightWidth");
+                    let paddingLeft = CommonDOMUtils.getStyleValue(element, "paddingLeft");
+                    let paddingRight = CommonDOMUtils.getStyleValue(element, "paddingRight");
+                    let backHeight = parseFloat(element.offsetWidth.toString()) -
+                        parseFloat(borderLeftWidth.toString()) -
+                        parseFloat(borderRightWidth.toString()) -
+                        parseFloat(paddingLeft.toString()) -
+                        parseFloat(paddingRight.toString());
+                    return parseFloat(backHeight.toString());
+                }
+                return 0;
+            }
+            else {
+                /* 未显示 */
+                element = element;
+                let { recovery } = CommonDOMUtils.showElement(element);
+                let width = DOMUtilsContext.width(element, true);
+                recovery();
+                return width;
+            }
+        }
+        height(element, isShow = false) {
+            let DOMUtilsContext = this;
+            if (CommonDOMUtils.isWin(element)) {
+                return window.document.documentElement.clientHeight;
+            }
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                // @ts-ignore
+                return;
+            }
+            if (element.nodeType === 9) {
+                element = element;
+                /* Document文档节点 */
+                return Math.max(element.body.scrollHeight, element.documentElement.scrollHeight, element.body.offsetHeight, element.documentElement.offsetHeight, element.documentElement.clientHeight);
+            }
+            if (isShow || (!isShow && CommonDOMUtils.isShow(element))) {
+                element = element;
+                /* 已显示 */
+                /* 从style中获取对应的高度，因为可能使用了class定义了width !important */
+                /* 如果element.style.height为空  则从css里面获取是否定义了height信息如果定义了 则读取css里面定义的高度height */
+                if (parseFloat(CommonDOMUtils.getStyleValue(element, "height").toString()) >
+                    0) {
+                    return parseFloat(CommonDOMUtils.getStyleValue(element, "height").toString());
+                }
+                /* 如果从css里获取到的值不是大于0  可能是auto 则通过offsetHeight来进行计算 */
+                if (element.offsetHeight > 0) {
+                    let borderTopWidth = CommonDOMUtils.getStyleValue(element, "borderTopWidth");
+                    let borderBottomWidth = CommonDOMUtils.getStyleValue(element, "borderBottomWidth");
+                    let paddingTop = CommonDOMUtils.getStyleValue(element, "paddingTop");
+                    let paddingBottom = CommonDOMUtils.getStyleValue(element, "paddingBottom");
+                    let backHeight = parseFloat(element.offsetHeight.toString()) -
+                        parseFloat(borderTopWidth.toString()) -
+                        parseFloat(borderBottomWidth.toString()) -
+                        parseFloat(paddingTop.toString()) -
+                        parseFloat(paddingBottom.toString());
+                    return parseFloat(backHeight.toString());
+                }
+                return 0;
+            }
+            else {
+                /* 未显示 */
+                element = element;
+                let { recovery } = CommonDOMUtils.showElement(element);
+                let height = DOMUtilsContext.height(element, true);
+                recovery();
+                return height;
+            }
+        }
+        outerWidth(element, isShow = false) {
+            let DOMUtilsContext = this;
+            if (CommonDOMUtils.isWin(element)) {
+                return window.innerWidth;
+            }
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                // @ts-ignore
+                return;
+            }
+            element = element;
+            if (isShow || (!isShow && CommonDOMUtils.isShow(element))) {
+                let style = getComputedStyle(element, null);
+                let marginLeft = CommonDOMUtils.getStyleValue(style, "marginLeft");
+                let marginRight = CommonDOMUtils.getStyleValue(style, "marginRight");
+                return element.offsetWidth + marginLeft + marginRight;
+            }
+            else {
+                let { recovery } = CommonDOMUtils.showElement(element);
+                let outerWidth = DOMUtilsContext.outerWidth(element, true);
+                recovery();
+                return outerWidth;
+            }
+        }
+        outerHeight(element, isShow = false) {
+            let DOMUtilsContext = this;
+            if (CommonDOMUtils.isWin(element)) {
+                return window.innerHeight;
+            }
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                // @ts-ignore
+                return;
+            }
+            element = element;
+            if (isShow || (!isShow && CommonDOMUtils.isShow(element))) {
+                let style = getComputedStyle(element, null);
+                let marginTop = CommonDOMUtils.getStyleValue(style, "marginTop");
+                let marginBottom = CommonDOMUtils.getStyleValue(style, "marginBottom");
+                return element.offsetHeight + marginTop + marginBottom;
+            }
+            else {
+                let { recovery } = CommonDOMUtils.showElement(element);
+                let outerHeight = DOMUtilsContext.outerHeight(element, true);
+                recovery();
+                return outerHeight;
+            }
+        }
+        /**
+         * 等待文档加载完成后执行指定的函数
+         * @param callback 需要执行的函数
+         * @example
+         * DOMUtils.ready(function(){
+         *   console.log("文档加载完毕")
+         * })
+         */
+        ready(callback) {
+            let DOMUtilsContext = this;
+            function completed() {
+                DOMUtilsContext.off(document, "DOMContentLoaded", completed);
+                DOMUtilsContext.off(globalThis, "load", completed);
+                callback();
+            }
+            if (document.readyState === "complete" ||
+                (document.readyState !== "loading" &&
+                    !document.documentElement.doScroll)) {
+                setTimeout(callback);
+            }
+            else {
+                /* 监听DOMContentLoaded事件 */
+                DOMUtilsContext.on(document, "DOMContentLoaded", completed);
+                /* 监听load事件 */
+                DOMUtilsContext.on(globalThis, "load", completed);
+            }
+        }
+        /**
+         * 在一定时间内改变元素的样式属性，实现动画效果
+         * @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) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                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");
+            }
+            let start = performance.now();
+            let from = {};
+            let to = {};
+            for (let prop in styles) {
+                from[prop] = element.style[prop] || getComputedStyle(element)[prop];
+                to[prop] = styles[prop];
+            }
+            let timer = setInterval(function () {
+                let timePassed = performance.now() - start;
+                let progress = timePassed / duration;
+                if (progress > 1) {
+                    progress = 1;
+                }
+                for (let prop in styles) {
+                    element.style[prop] =
+                        from[prop] + (to[prop] - from[prop]) * progress + "px";
+                }
+                if (progress === 1) {
+                    clearInterval(timer);
+                    if (callback) {
+                        callback();
+                    }
+                }
+            }, 10);
+        }
+        /**
+         * 将一个元素包裹在指定的HTML元素中
+         * @param element 要包裹的元素
+         * @param wrapperHTML 要包裹的HTML元素的字符串表示形式
+         * @example
+         * // 将a.xx元素外面包裹一层div
+         * DOMUtils.wrap(document.querySelector("a.xx"),"<div></div>")
+         */
+        wrap(element, wrapperHTML) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            element = element;
+            // 创建一个新的div元素，并将wrapperHTML作为其innerHTML
+            let wrapper = document.createElement("div");
+            wrapper.innerHTML = wrapperHTML;
+            let wrapperFirstChild = wrapper.firstChild;
+            // 将要包裹的元素插入目标元素前面
+            element.parentElement.insertBefore(wrapperFirstChild, element);
+            // 将要包裹的元素移动到wrapper中
+            wrapperFirstChild.appendChild(element);
+        }
+        prev(element) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            return element.previousElementSibling;
+        }
+        next(element) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            return element.nextElementSibling;
+        }
+        /**
+         * 取消挂载在window下的DOMUtils并返回DOMUtils
+         * @example
+         * let DOMUtils = window.DOMUtils.noConflict()
+         */
+        noConflict() {
+            if (window.DOMUtils) {
+                CommonDOMUtils.delete(window, "DOMUtils");
+            }
+            window.DOMUtils = this;
+            return this;
+        }
+        siblings(element) {
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            return Array.from(element.parentElement
+                .children).filter((child) => child !== element);
+        }
+        /**
+         * 获取当前元素的父元素
+         * @param element 当前元素
+         * @returns 父元素
+         * @example
+         * // 获取a.xx元素的父元素
+         * DOMUtils.parent(document.querySelector("a.xx"))
+         * DOMUtils.parent("a.xx")
+         * > <div ...>....</div>
+         */
+        parent(element) {
+            let DOMUtilsContext = this;
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (element instanceof NodeList || element instanceof Array) {
+                element = element;
+                let resultArray = [];
+                element.forEach((eleItem) => {
+                    resultArray.push(DOMUtilsContext.parent(eleItem));
+                });
+                return resultArray;
+            }
+            else {
+                return element.parentElement;
+            }
+        }
+        parseHTML(html, useParser = false, isComplete = false) {
+            function parseHTMLByDOMParser() {
+                let parser = new DOMParser();
+                if (isComplete) {
+                    return parser.parseFromString(html, "text/html");
+                }
+                else {
+                    return parser.parseFromString(html, "text/html").body.firstChild;
+                }
+            }
+            function parseHTMLByCreateDom() {
+                let tempDIV = document.createElement("div");
+                tempDIV.innerHTML = html;
+                if (isComplete) {
+                    return tempDIV;
+                }
+                else {
+                    return tempDIV.firstChild;
+                }
+            }
+            if (useParser) {
+                return parseHTMLByDOMParser();
+            }
+            else {
+                return parseHTMLByCreateDom();
+            }
+        }
+        /**
+         * 当鼠标移入或移出元素时触发事件
+         * @param element 当前元素
+         * @param handler 事件处理函数
+         * @param option 配置
+         * @example
+         * // 监听a.xx元素的移入或移出
+         * DOMUtils.hover(document.querySelector("a.xx"),()=>{
+         *   console.log("移入/移除");
+         * })
+         * DOMUtils.hover("a.xx",()=>{
+         *   console.log("移入/移除");
+         * })
+         */
+        hover(element, handler, option) {
+            let DOMUtilsContext = this;
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            DOMUtilsContext.on(element, "mouseenter", null, handler, option);
+            DOMUtilsContext.on(element, "mouseleave", null, handler, option);
+        }
+        /**
+         * 显示元素
+         * @param target 当前元素
+         * @example
+         * // 显示a.xx元素
+         * DOMUtils.show(document.querySelector("a.xx"))
+         * DOMUtils.show(document.querySelectorAll("a.xx"))
+         * DOMUtils.show("a.xx")
+         */
+        show(target) {
+            let DOMUtilsContext = this;
+            if (target == null) {
+                return;
+            }
+            if (typeof target === "string") {
+                target = document.querySelectorAll(target);
+            }
+            if (target instanceof NodeList || target instanceof Array) {
+                target = target;
+                for (const element of target) {
+                    DOMUtilsContext.show(element);
+                }
+            }
+            else {
+                target.style.display = "";
+                if (!CommonDOMUtils.isShow(target)) {
+                    /* 仍然是不显示，尝试使用强覆盖 */
+                    target.style.setProperty("display", "unset", "important");
+                }
+            }
+        }
+        /**
+         * 隐藏元素
+         * @param target 当前元素
+         * @example
+         * // 隐藏a.xx元素
+         * DOMUtils.hide(document.querySelector("a.xx"))
+         * DOMUtils.hide(document.querySelectorAll("a.xx"))
+         * DOMUtils.hide("a.xx")
+         */
+        hide(target) {
+            let DOMUtilsContext = this;
+            if (target == null) {
+                return;
+            }
+            if (typeof target === "string") {
+                target = document.querySelectorAll(target);
+            }
+            if (target instanceof NodeList || target instanceof Array) {
+                target = target;
+                for (const element of target) {
+                    DOMUtilsContext.hide(element);
+                }
+            }
+            else {
+                target.style.display = "none";
+                if (CommonDOMUtils.isShow(target)) {
+                    /* 仍然是显示，尝试使用强覆盖 */
+                    target.style.setProperty("display", "none", "important");
+                }
+            }
+        }
+        /**
+         * 当按键松开时触发事件
+         * keydown - > keypress - > keyup
+         * @param target 当前元素
+         * @param handler 事件处理函数
+         * @param option 配置
+         * @example
+         * // 监听a.xx元素的按键松开
+         * DOMUtils.keyup(document.querySelector("a.xx"),()=>{
+         *   console.log("按键松开");
+         * })
+         * DOMUtils.keyup("a.xx",()=>{
+         *   console.log("按键松开");
+         * })
+         */
+        keyup(target, handler, option) {
+            let DOMUtilsContext = this;
+            if (target == null) {
+                return;
+            }
+            if (typeof target === "string") {
+                target = document.querySelector(target);
+            }
+            DOMUtilsContext.on(target, "keyup", null, handler, option);
+        }
+        /**
+         * 当按键按下时触发事件
+         * keydown - > keypress - > keyup
+         * @param target 目标
+         * @param handler 事件处理函数
+         * @param option 配置
+         * @example
+         * // 监听a.xx元素的按键按下
+         * DOMUtils.keydown(document.querySelector("a.xx"),()=>{
+         *   console.log("按键按下");
+         * })
+         * DOMUtils.keydown("a.xx",()=>{
+         *   console.log("按键按下");
+         * })
+         */
+        keydown(target, handler, option) {
+            let DOMUtilsContext = this;
+            if (target == null) {
+                return;
+            }
+            if (typeof target === "string") {
+                target = document.querySelector(target);
+            }
+            DOMUtilsContext.on(target, "keydown", null, handler, option);
+        }
+        /**
+         * 当按键按下时触发事件
+         * keydown - > keypress - > keyup
+         * @param target 目标
+         * @param handler 事件处理函数
+         * @param option 配置
+         * @example
+         * // 监听a.xx元素的按键按下
+         * DOMUtils.keypress(document.querySelector("a.xx"),()=>{
+         *   console.log("按键按下");
+         * })
+         * DOMUtils.keypress("a.xx",()=>{
+         *   console.log("按键按下");
+         * })
+         */
+        keypress(target, handler, option) {
+            let DOMUtilsContext = this;
+            if (target == null) {
+                return;
+            }
+            if (typeof target === "string") {
+                target = document.querySelector(target);
+            }
+            DOMUtilsContext.on(target, "keypress", null, handler, option);
+        }
+        /**
+         * 淡入元素
+         * @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;
+            }
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            element = element;
+            element.style.opacity = "0";
+            element.style.display = "";
+            let start = null;
+            let timer = null;
+            function step(timestamp) {
+                if (!start)
+                    start = timestamp;
+                let progress = timestamp - start;
+                element = element;
+                element.style.opacity = Math.min(progress / duration, 1).toString();
+                if (progress < duration) {
+                    window.requestAnimationFrame(step);
+                }
+                else {
+                    if (callback && typeof callback === "function") {
+                        callback();
+                    }
+                    window.cancelAnimationFrame(timer);
+                }
+            }
+            timer = 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) {
+            if (element == null) {
+                return;
+            }
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            element = element;
+            element.style.opacity = "1";
+            let start = null;
+            let timer = null;
+            function step(timestamp) {
+                if (!start)
+                    start = timestamp;
+                let progress = timestamp - start;
+                element = element;
+                element.style.opacity = Math.max(1 - progress / duration, 0).toString();
+                if (progress < duration) {
+                    window.requestAnimationFrame(step);
+                }
+                else {
+                    element.style.display = "none";
+                    if (typeof callback === "function") {
+                        callback();
+                    }
+                    window.cancelAnimationFrame(timer);
+                }
+            }
+            timer = window.requestAnimationFrame(step);
+        }
+        /**
+         * 切换元素的显示和隐藏状态
+         * @param element 当前元素
+         * @example
+         * // 如果元素a.xx当前是隐藏，则显示，如果是显示，则隐藏
+         * DOMUtils.toggle(document.querySelector("a.xx"))
+         * DOMUtils.toggle("a.xx")
+         */
+        toggle(element) {
+            let DOMUtilsContext = this;
+            if (typeof element === "string") {
+                element = document.querySelector(element);
+            }
+            if (element == null) {
+                return;
+            }
+            if (getComputedStyle(element).getPropertyValue("display") === "none") {
+                DOMUtilsContext.show(element);
+            }
+            else {
+                DOMUtilsContext.hide(element);
+            }
+        }
+    }
+    let domUtils = new DOMUtils();
+
+    return domUtils;
+
+}));
+//# sourceMappingURL=index.umd.js.map