@whitesev/domutils 1.2.0 → 1.3.1

package/dist/index.umd.js

@@ -4,43 +4,12 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DOMUtils = factory());
 })(this, (function () { 'use strict';
 
-    const DOMUtilsCoreDefaultEnv = {
-        document: document,
-        window: window,
-        globalThis: globalThis,
-        self: self,
-        top: top,
-    };
-    const DOMUtilsCoreEnv = {
-        document: document,
-        window: window,
-        globalThis: globalThis,
-        self: self,
-        top: top,
-    };
-    const DOMUtilsCore = {
-        init(option) {
-            if (!option) {
-                option = Object.assign({}, DOMUtilsCoreDefaultEnv);
-            }
-            Object.assign(DOMUtilsCoreEnv, option);
-        },
-        get document() {
-            return DOMUtilsCoreEnv.document;
-        },
-        get window() {
-            return DOMUtilsCoreEnv.window;
-        },
-        get globalThis() {
-            return DOMUtilsCoreEnv.globalThis;
-        },
-        get self() {
-            return DOMUtilsCoreEnv.self;
-        },
-    };
-
     /** 通用工具类 */
     const DOMUtilsCommonUtils = {
+        windowApi: {
+            window: window,
+            document: document,
+        },
         /**
          * 判断元素是否已显示或已连接
          * @param element
@@ -55,7 +24,7 @@
         showElement(element) {
             let dupNode = element.cloneNode(true);
             dupNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
-            DOMUtilsCore.document.documentElement.appendChild(dupNode);
+            this.windowApi.document.documentElement.appendChild(dupNode);
             return {
                 /**
                  * 恢复修改的style
@@ -112,13 +81,13 @@
             if (target === self) {
                 return true;
             }
-            if (target === DOMUtilsCore.globalThis) {
+            if (target === globalThis) {
                 return true;
             }
-            if (target === DOMUtilsCore.window) {
+            if (target === window) {
                 return true;
             }
-            if (target === DOMUtilsCore.self) {
+            if (target === self) {
                 return true;
             }
             if (typeof unsafeWindow !== "undefined" && target === unsafeWindow) {
@@ -156,7 +125,45 @@
         },
     };
 
+    class WindowApi {
+        /** 默认的配置 */
+        defaultApi = {
+            document: document,
+            window: window,
+            globalThis: globalThis,
+            self: self,
+            top: top,
+        };
+        /** 使用的配置 */
+        api;
+        constructor(option) {
+            if (!option) {
+                option = Object.assign({}, this.defaultApi);
+            }
+            this.api = Object.assign({}, option);
+        }
+        get document() {
+            return this.api.document;
+        }
+        get window() {
+            return this.api.window;
+        }
+        get globalThis() {
+            return this.api.globalThis;
+        }
+        get self() {
+            return this.api.self;
+        }
+        get top() {
+            return this.api.top;
+        }
+    }
+
     class DOMUtilsEvent {
+        windowApi;
+        constructor(windowApiOption) {
+            this.windowApi = new WindowApi(windowApiOption);
+        }
         on(element, eventType, selector, callback, option) {
             /**
              * 获取option配置
@@ -187,7 +194,7 @@
             let DOMUtilsContext = this;
             let args = arguments;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelectorAll(element);
+                element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
             }
             if (element == null) {
                 return;
@@ -238,7 +245,7 @@
                     if (_selector_) {
                         /* 存在自定义子元素选择器 */
                         let totalParent = DOMUtilsCommonUtils.isWin(elementItem)
-                            ? DOMUtilsCore.document.documentElement
+                            ? DOMUtilsContext.windowApi.document.documentElement
                             : elementItem;
                         if (target.matches(_selector_)) {
                             /* 当前目标可以被selector所匹配到 */
@@ -302,9 +309,10 @@
                 }
                 return option;
             }
+            let DOMUtilsContext = this;
             let args = arguments;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelectorAll(element);
+                element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
             }
             if (element == null) {
                 return;
@@ -387,8 +395,9 @@
          * @param eventType （可选）需要取消监听的事件
          */
         offAll(element, eventType) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelectorAll(element);
+                element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
             }
             if (element == null) {
                 return;
@@ -443,14 +452,16 @@
             if (typeof callback !== "function") {
                 return;
             }
+            let DOMUtilsContext = this;
             /**
              * 检测文档是否加载完毕
              */
             function checkDOMReadyState() {
                 try {
-                    if (DOMUtilsCore.document.readyState === "complete" ||
-                        (DOMUtilsCore.document.readyState !== "loading" &&
-                            !DOMUtilsCore.document.documentElement.doScroll)) {
+                    if (DOMUtilsContext.windowApi.document.readyState === "complete" ||
+                        (DOMUtilsContext.windowApi.document.readyState !== "loading" &&
+                            !DOMUtilsContext.windowApi.document.documentElement
+                                .doScroll)) {
                         return true;
                     }
                     else {
@@ -470,12 +481,12 @@
             }
             let targetList = [
                 {
-                    target: DOMUtilsCore.document,
+                    target: DOMUtilsContext.windowApi.document,
                     eventType: "DOMContentLoaded",
                     callback: completed,
                 },
                 {
-                    target: DOMUtilsCore.window,
+                    target: DOMUtilsContext.windowApi.window,
                     eventType: "load",
                     callback: completed,
                 },
@@ -522,8 +533,9 @@
          * DOMUtils.trigger("a.xx",["click","tap","hover"])
          */
         trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -587,7 +599,7 @@
         click(element, handler, details, useDispatchToTriggerEvent) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -616,7 +628,7 @@
         blur(element, handler, details, useDispatchToTriggerEvent) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -645,7 +657,7 @@
         focus(element, handler, details, useDispatchToTriggerEvent) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -674,7 +686,7 @@
         hover(element, handler, option) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -703,7 +715,7 @@
                 return;
             }
             if (typeof target === "string") {
-                target = DOMUtilsCore.document.querySelector(target);
+                target = DOMUtilsContext.windowApi.document.querySelector(target);
             }
             DOMUtilsContext.on(target, "keyup", null, handler, option);
         }
@@ -728,7 +740,7 @@
                 return;
             }
             if (typeof target === "string") {
-                target = DOMUtilsCore.document.querySelector(target);
+                target = DOMUtilsContext.windowApi.document.querySelector(target);
             }
             DOMUtilsContext.on(target, "keydown", null, handler, option);
         }
@@ -753,22 +765,113 @@
                 return;
             }
             if (typeof target === "string") {
-                target = DOMUtilsCore.document.querySelector(target);
+                target = DOMUtilsContext.windowApi.document.querySelector(target);
             }
             DOMUtilsContext.on(target, "keypress", null, handler, option);
         }
+        /**
+         * 监听某个元素键盘按键事件或window全局按键事件
+         * 按下有值的键时触发，按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件，再触发keypress事件。
+         * @param target 需要监听的对象，可以是全局Window或者某个元素
+         * @param eventName 事件名，默认keypress
+         * @param callback 自己定义的回调事件，参数1为当前的key，参数2为组合按键，数组类型，包含ctrl、shift、alt和meta（win键或mac的cmd键）
+         * @param options 监听事件的配置
+         * @example
+            Utils.listenKeyboard(window,(keyName,keyValue,otherKey,event)=>{
+                if(keyName === "Enter"){
+                    console.log("回车按键的值是："+keyValue)
+                }
+                if(otherKey.indexOf("ctrl") && keyName === "Enter" ){
+                    console.log("Ctrl和回车键");
+              }
+            })
+         * @example
+        字母和数字键的键码值(keyCode)
+          按键	键码	按键	键码	按键	键码	按键	键码
+          A	65	J	74	S	83	1	49
+          B	66	K	75	T	84	2	50
+          C	67	L	76	U	85	3	51
+          D	68	M	77	V	86	4	52
+          E	69	N	78	W	87	5	53
+          F	70	O	79	X	88	6	54
+          G	71	P	80	Y	89	7	55
+          H	72	Q	81	Z	90	8	56
+          I	73	R	82	0	48	9	57
+      
+          数字键盘上的键的键码值(keyCode)
+          功能键键码值(keyCode)
+          按键	键码	按键  	键码	按键	键码	按键	键码
+          0	96	8	104	F1	112	F7	118
+          1	97	9	105	F2	113	F8	119
+          2	98	*	106	F3	114	F9	120
+          3	99	+	107	F4	115	F10	121
+          4	100	Enter	108	F5	116	F11	122
+          5	101	-	109	F6	117	F12	123
+          6	102	.	110
+          7	103	/	111
+          
+          控制键键码值(keyCode)
+          按键		键码	按键		键码	按键		键码	按键		键码
+          BackSpace	8	Esc		27	→		39	-_		189
+          Tab		9	Spacebar	32	↓		40	.>		190
+          Clear		12	Page Up		33	Insert		45	/?		191
+          Enter		13	Page Down	34	Delete		46	`~		192
+          Shift		16	End		35	Num Lock	144	[{		219
+          Control		17	Home		36	;:		186	\|		220
+          Alt		18	←		37	=+		187	]}		221
+          Cape Lock	20	↑		38	,<		188	'"		222
+      
+          多媒体键码值(keyCode)
+          按键		键码
+          音量加		175
+          音量减		174
+          停止		179
+          静音		173
+          浏览器		172
+          邮件		180
+          搜索		170
+          收藏		171
+         **/
+        listenKeyboard(target, eventName = "keypress", callback, options) {
+            let keyboardEventCallBack = function (event) {
+                let keyName = event.key || event.code;
+                let keyValue = event.charCode || event.keyCode || event.which;
+                let otherCodeList = [];
+                if (event.ctrlKey) {
+                    otherCodeList.push("ctrl");
+                }
+                if (event.altKey) {
+                    otherCodeList.push("alt");
+                }
+                if (event.metaKey) {
+                    otherCodeList.push("meta");
+                }
+                if (event.shiftKey) {
+                    otherCodeList.push("shift");
+                }
+                if (typeof callback === "function") {
+                    callback(keyName, keyValue.toString(), otherCodeList, event);
+                }
+            };
+            this.on(target, eventName, keyboardEventCallBack, options);
+            return {
+                removeListen: () => {
+                    this.off(target, eventName, keyboardEventCallBack, options);
+                },
+            };
+        }
     }
 
     class DOMUtils extends DOMUtilsEvent {
         constructor(option) {
-            DOMUtilsCore.init(option);
-            super();
+            super(option);
         }
         /** 版本号 */
-        version = "2024.6.21";
+        version = "2024.8.30";
         attr(element, attrName, attrValue) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -805,7 +908,8 @@
         property, 
         /** 自定义属性 */
         attributes) {
-            let tempElement = DOMUtilsCore.document.createElement(tagName);
+            let DOMUtilsContext = this;
+            let tempElement = DOMUtilsContext.windowApi.document.createElement(tagName);
             if (typeof property === "string") {
                 tempElement.innerHTML = property;
                 return tempElement;
@@ -835,6 +939,7 @@
             return tempElement;
         }
         css(element, property, value) {
+            let DOMUtilsContext = this;
             /**
              * 把纯数字没有px的加上
              */
@@ -859,7 +964,7 @@
                 return propertyValue;
             }
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -892,8 +997,9 @@
             }
         }
         text(element, text) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -914,8 +1020,9 @@
             }
         }
         html(element, html) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -968,8 +1075,9 @@
             };
         }
         val(element, value) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -994,11 +1102,12 @@
             }
         }
         prop(element, propName, propValue) {
+            let DOMUtilsContext = this;
             if (element == null) {
                 return;
             }
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (propValue == null) {
                 return element[propName];
@@ -1017,8 +1126,9 @@
          * DOMUtils.removeAttr("a.xx","data-value")
          * */
         removeAttr(element, attrName) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1035,8 +1145,9 @@
          * DOMUtils.removeClass("a.xx","xx")
          */
         removeClass(element, className) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1056,8 +1167,9 @@
          * DOMUtils.removeProp("a.xx","href")
          * */
         removeProp(element, propName) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1076,7 +1188,7 @@
         replaceWith(element, newElement) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1103,8 +1215,9 @@
          * DOMUtils.addClass("a.xx","_vue_")
          * */
         addClass(element, className) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1121,8 +1234,9 @@
          * DOMUtils.append("a.xx","'<b class="xx"></b>")
          * */
         append(element, content) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1137,7 +1251,7 @@
             }
             if (Array.isArray(content) || content instanceof NodeList) {
                 /* 数组 */
-                let fragment = DOMUtilsCore.document.createDocumentFragment();
+                let fragment = DOMUtilsContext.windowApi.document.createDocumentFragment();
                 content.forEach((ele) => {
                     if (typeof ele === "string") {
                         ele = this.parseHTML(ele, true, false);
@@ -1160,8 +1274,9 @@
          * DOMUtils.prepend("a.xx","'<b class="xx"></b>")
          * */
         prepend(element, content) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1183,8 +1298,9 @@
          * DOMUtils.after("a.xx","'<b class="xx"></b>")
          * */
         after(element, content) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1206,8 +1322,9 @@
          * DOMUtils.before("a.xx","'<b class="xx"></b>")
          * */
         before(element, content) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1231,7 +1348,7 @@
         remove(target) {
             let DOMUtilsContext = this;
             if (typeof target === "string") {
-                target = DOMUtilsCore.document.querySelectorAll(target);
+                target = DOMUtilsContext.windowApi.document.querySelectorAll(target);
             }
             if (target == null) {
                 return;
@@ -1255,8 +1372,9 @@
          * DOMUtils.empty("a.xx")
          * */
         empty(element) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1273,8 +1391,9 @@
          * > 0
          */
         offset(element) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1282,21 +1401,22 @@
             let rect = element.getBoundingClientRect();
             return {
                 /** y轴偏移 */
-                top: rect.top + DOMUtilsCore.globalThis.scrollY,
+                top: rect.top + DOMUtilsContext.windowApi.globalThis.scrollY,
                 /** x轴偏移 */
-                left: rect.left + DOMUtilsCore.globalThis.scrollX,
+                left: rect.left + DOMUtilsContext.windowApi.globalThis.scrollX,
             };
         }
         width(element, isShow = false) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
             }
             if (DOMUtilsCommonUtils.isWin(element)) {
-                return DOMUtilsCore.window.document.documentElement.clientWidth;
+                return DOMUtilsContext.windowApi.window.document.documentElement
+                    .clientWidth;
             }
             if (element.nodeType === 9) {
                 /* Document文档节点 */
@@ -1339,10 +1459,11 @@
         height(element, isShow = false) {
             let DOMUtilsContext = this;
             if (DOMUtilsCommonUtils.isWin(element)) {
-                return DOMUtilsCore.window.document.documentElement.clientHeight;
+                return DOMUtilsContext.windowApi.window.document.documentElement
+                    .clientHeight;
             }
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 // @ts-ignore
@@ -1389,10 +1510,10 @@
         outerWidth(element, isShow = false) {
             let DOMUtilsContext = this;
             if (DOMUtilsCommonUtils.isWin(element)) {
-                return DOMUtilsCore.window.innerWidth;
+                return DOMUtilsContext.windowApi.window.innerWidth;
             }
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 // @ts-ignore
@@ -1415,10 +1536,10 @@
         outerHeight(element, isShow = false) {
             let DOMUtilsContext = this;
             if (DOMUtilsCommonUtils.isWin(element)) {
-                return DOMUtilsCore.window.innerHeight;
+                return DOMUtilsContext.windowApi.window.innerHeight;
             }
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 // @ts-ignore
@@ -1451,8 +1572,9 @@
          * })
          */
         animate(element, styles, duration = 1000, callback = null) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1503,15 +1625,16 @@
          * DOMUtils.wrap(document.querySelector("a.xx"),"<div></div>")
          */
         wrap(element, wrapperHTML) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
             }
             element = element;
             // 创建一个新的div元素，并将wrapperHTML作为其innerHTML
-            let wrapper = DOMUtilsCore.document.createElement("div");
+            let wrapper = DOMUtilsContext.windowApi.document.createElement("div");
             wrapper.innerHTML = wrapperHTML;
             let wrapperFirstChild = wrapper.firstChild;
             // 将要包裹的元素插入目标元素前面
@@ -1520,8 +1643,9 @@
             wrapperFirstChild.appendChild(element);
         }
         prev(element) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1529,8 +1653,9 @@
             return element.previousElementSibling;
         }
         next(element) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1543,15 +1668,17 @@
          * let DOMUtils = window.DOMUtils.noConflict()
          */
         noConflict() {
-            if (DOMUtilsCore.window.DOMUtils) {
+            let DOMUtilsContext = this;
+            if (DOMUtilsContext.windowApi.window.DOMUtils) {
                 DOMUtilsCommonUtils.delete(window, "DOMUtils");
             }
-            DOMUtilsCore.window.DOMUtils = this;
+            DOMUtilsContext.windowApi.window.DOMUtils = this;
             return this;
         }
         siblings(element) {
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1572,7 +1699,7 @@
         parent(element) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1590,6 +1717,7 @@
             }
         }
         parseHTML(html, useParser = false, isComplete = false) {
+            let DOMUtilsContext = this;
             function parseHTMLByDOMParser() {
                 let parser = new DOMParser();
                 if (isComplete) {
@@ -1600,7 +1728,7 @@
                 }
             }
             function parseHTMLByCreateDom() {
-                let tempDIV = DOMUtilsCore.document.createElement("div");
+                let tempDIV = DOMUtilsContext.windowApi.document.createElement("div");
                 tempDIV.innerHTML = html;
                 if (isComplete) {
                     return tempDIV;
@@ -1631,7 +1759,7 @@
                 return;
             }
             if (typeof target === "string") {
-                target = DOMUtilsCore.document.querySelectorAll(target);
+                target = DOMUtilsContext.windowApi.document.querySelectorAll(target);
             }
             if (target instanceof NodeList || target instanceof Array) {
                 target = target;
@@ -1663,7 +1791,7 @@
                 return;
             }
             if (typeof target === "string") {
-                target = DOMUtilsCore.document.querySelectorAll(target);
+                target = DOMUtilsContext.windowApi.document.querySelectorAll(target);
             }
             if (target instanceof NodeList || target instanceof Array) {
                 target = target;
@@ -1698,8 +1826,9 @@
             if (element == null) {
                 return;
             }
+            let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             element = element;
             element.style.opacity = "0";
@@ -1713,16 +1842,16 @@
                 element = element;
                 element.style.opacity = Math.min(progress / duration, 1).toString();
                 if (progress < duration) {
-                    DOMUtilsCore.window.requestAnimationFrame(step);
+                    DOMUtilsContext.windowApi.window.requestAnimationFrame(step);
                 }
                 else {
                     if (callback && typeof callback === "function") {
                         callback();
                     }
-                    DOMUtilsCore.window.cancelAnimationFrame(timer);
+                    DOMUtilsContext.windowApi.window.cancelAnimationFrame(timer);
                 }
             }
-            timer = DOMUtilsCore.window.requestAnimationFrame(step);
+            timer = DOMUtilsContext.windowApi.window.requestAnimationFrame(step);
         }
         /**
          * 淡出元素
@@ -1739,11 +1868,12 @@
          * })
          */
         fadeOut(element, duration = 400, callback) {
+            let DOMUtilsContext = this;
             if (element == null) {
                 return;
             }
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             element = element;
             element.style.opacity = "1";
@@ -1756,17 +1886,17 @@
                 element = element;
                 element.style.opacity = Math.max(1 - progress / duration, 0).toString();
                 if (progress < duration) {
-                    DOMUtilsCore.window.requestAnimationFrame(step);
+                    DOMUtilsContext.windowApi.window.requestAnimationFrame(step);
                 }
                 else {
                     element.style.display = "none";
                     if (typeof callback === "function") {
                         callback();
                     }
-                    DOMUtilsCore.window.cancelAnimationFrame(timer);
+                    DOMUtilsContext.windowApi.window.cancelAnimationFrame(timer);
                 }
             }
-            timer = DOMUtilsCore.window.requestAnimationFrame(step);
+            timer = DOMUtilsContext.windowApi.window.requestAnimationFrame(step);
         }
         /**
          * 切换元素的显示和隐藏状态
@@ -1779,7 +1909,7 @@
         toggle(element) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = DOMUtilsCore.document.querySelector(element);
+                element = DOMUtilsContext.windowApi.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1808,6 +1938,7 @@
          * DOMUtils.getTextBoundingRect(document.querySelector("input"));
          */
         getTextBoundingRect($input, selectionStart, selectionEnd) {
+            let DOMUtilsContext = this;
             // Basic parameter validation
             if (!$input || !("value" in $input))
                 return $input;
@@ -1877,7 +2008,7 @@
             }
             // End of CSS variable checks
             // 不能为空，不然获取不到高度
-            let text = $input.value || "G", textLen = text.length, fakeClone = DOMUtilsCore.document.createElement("div");
+            let text = $input.value || "G", textLen = text.length, fakeClone = DOMUtilsContext.windowApi.document.createElement("div");
             if (selectionStart > 0)
                 appendPart(0, selectionStart);
             var fakeRange = appendPart(selectionStart, selectionEnd);
@@ -1891,7 +2022,7 @@
             fakeClone.style.left = leftPos + "px";
             fakeClone.style.width = width + "px";
             fakeClone.style.height = height + "px";
-            DOMUtilsCore.document.body.appendChild(fakeClone);
+            DOMUtilsContext.windowApi.document.body.appendChild(fakeClone);
             var returnValue = fakeRange.getBoundingClientRect(); //Get rect
             fakeClone?.parentNode?.removeChild(fakeClone); //Remove temp
             return returnValue;
@@ -1903,7 +2034,7 @@
              * @returns
              */
             function appendPart(start, end) {
-                var span = DOMUtilsCore.document.createElement("span");
+                var span = DOMUtilsContext.windowApi.document.createElement("span");
                 span.style.cssText = cssDefaultStyles; //Force styles to prevent unexpected results
                 span.textContent = text.substring(start, end);
                 fakeClone.appendChild(span);
@@ -1911,7 +2042,7 @@
             }
             // Computing offset position
             function getInputOffset() {
-                let body = DOMUtilsCore.document.body, win = DOMUtilsCore.document.defaultView, docElem = DOMUtilsCore.document.documentElement, $box = DOMUtilsCore.document.createElement("div");
+                let body = DOMUtilsContext.windowApi.document.body, win = DOMUtilsContext.windowApi.document.defaultView, docElem = DOMUtilsContext.windowApi.document.documentElement, $box = DOMUtilsContext.windowApi.document.createElement("div");
                 $box.style.paddingLeft = $box.style.width = "1px";
                 body.appendChild($box);
                 var isBoxModel = $box.offsetWidth == 2;
@@ -1934,7 +2065,7 @@
              * @returns
              */
             function getInputCSS(prop, isNumber) {
-                var val = DOMUtilsCore.document
+                var val = DOMUtilsContext.windowApi.document
                     .defaultView.getComputedStyle($input, null)
                     .getPropertyValue(prop);
                 return isNumber ? parseFloat(val) : val;