@whitesev/domutils 1.0.0

package/dist/index.cjs.js

@@ -0,0 +1,1677 @@
+'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();
+
+module.exports = domUtils;
+//# sourceMappingURL=index.cjs.js.map