@whitesev/domutils 1.2.0 → 1.3.1

package/dist/index.esm.js

@@ -1,40 +1,9 @@
-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
@@ -49,7 +18,7 @@ const DOMUtilsCommonUtils = {
     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
@@ -106,13 +75,13 @@ const DOMUtilsCommonUtils = {
         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) {
@@ -150,7 +119,45 @@ const OriginPrototype = {
     },
 };
 
+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配置
@@ -181,7 +188,7 @@ class DOMUtilsEvent {
         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;
@@ -232,7 +239,7 @@ class DOMUtilsEvent {
                 if (_selector_) {
                     /* 存在自定义子元素选择器 */
                     let totalParent = DOMUtilsCommonUtils.isWin(elementItem)
-                        ? DOMUtilsCore.document.documentElement
+                        ? DOMUtilsContext.windowApi.document.documentElement
                         : elementItem;
                     if (target.matches(_selector_)) {
                         /* 当前目标可以被selector所匹配到 */
@@ -296,9 +303,10 @@ class DOMUtilsEvent {
             }
             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;
@@ -381,8 +389,9 @@ class DOMUtilsEvent {
      * @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;
@@ -437,14 +446,16 @@ class DOMUtilsEvent {
         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 {
@@ -464,12 +475,12 @@ class DOMUtilsEvent {
         }
         let targetList = [
             {
-                target: DOMUtilsCore.document,
+                target: DOMUtilsContext.windowApi.document,
                 eventType: "DOMContentLoaded",
                 callback: completed,
             },
             {
-                target: DOMUtilsCore.window,
+                target: DOMUtilsContext.windowApi.window,
                 eventType: "load",
                 callback: completed,
             },
@@ -516,8 +527,9 @@ class DOMUtilsEvent {
      * 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;
@@ -581,7 +593,7 @@ class DOMUtilsEvent {
     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;
@@ -610,7 +622,7 @@ class DOMUtilsEvent {
     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;
@@ -639,7 +651,7 @@ class DOMUtilsEvent {
     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;
@@ -668,7 +680,7 @@ class DOMUtilsEvent {
     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;
@@ -697,7 +709,7 @@ class DOMUtilsEvent {
             return;
         }
         if (typeof target === "string") {
-            target = DOMUtilsCore.document.querySelector(target);
+            target = DOMUtilsContext.windowApi.document.querySelector(target);
         }
         DOMUtilsContext.on(target, "keyup", null, handler, option);
     }
@@ -722,7 +734,7 @@ class DOMUtilsEvent {
             return;
         }
         if (typeof target === "string") {
-            target = DOMUtilsCore.document.querySelector(target);
+            target = DOMUtilsContext.windowApi.document.querySelector(target);
         }
         DOMUtilsContext.on(target, "keydown", null, handler, option);
     }
@@ -747,22 +759,113 @@ class DOMUtilsEvent {
             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;
@@ -799,7 +902,8 @@ class DOMUtils extends DOMUtilsEvent {
     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;
@@ -829,6 +933,7 @@ class DOMUtils extends DOMUtilsEvent {
         return tempElement;
     }
     css(element, property, value) {
+        let DOMUtilsContext = this;
         /**
          * 把纯数字没有px的加上
          */
@@ -853,7 +958,7 @@ class DOMUtils extends DOMUtilsEvent {
             return propertyValue;
         }
         if (typeof element === "string") {
-            element = DOMUtilsCore.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -886,8 +991,9 @@ class DOMUtils extends DOMUtilsEvent {
         }
     }
     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;
@@ -908,8 +1014,9 @@ class DOMUtils extends DOMUtilsEvent {
         }
     }
     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;
@@ -962,8 +1069,9 @@ class DOMUtils extends DOMUtilsEvent {
         };
     }
     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;
@@ -988,11 +1096,12 @@ class DOMUtils extends DOMUtilsEvent {
         }
     }
     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];
@@ -1011,8 +1120,9 @@ class DOMUtils extends DOMUtilsEvent {
      * 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;
@@ -1029,8 +1139,9 @@ class DOMUtils extends DOMUtilsEvent {
      * 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;
@@ -1050,8 +1161,9 @@ class DOMUtils extends DOMUtilsEvent {
      * 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;
@@ -1070,7 +1182,7 @@ class DOMUtils extends DOMUtilsEvent {
     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;
@@ -1097,8 +1209,9 @@ class DOMUtils extends DOMUtilsEvent {
      * 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;
@@ -1115,8 +1228,9 @@ class DOMUtils extends DOMUtilsEvent {
      * 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;
@@ -1131,7 +1245,7 @@ class DOMUtils extends DOMUtilsEvent {
         }
         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);
@@ -1154,8 +1268,9 @@ class DOMUtils extends DOMUtilsEvent {
      * 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;
@@ -1177,8 +1292,9 @@ class DOMUtils extends DOMUtilsEvent {
      * 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;
@@ -1200,8 +1316,9 @@ class DOMUtils extends DOMUtilsEvent {
      * 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;
@@ -1225,7 +1342,7 @@ class DOMUtils extends DOMUtilsEvent {
     remove(target) {
         let DOMUtilsContext = this;
         if (typeof target === "string") {
-            target = DOMUtilsCore.document.querySelectorAll(target);
+            target = DOMUtilsContext.windowApi.document.querySelectorAll(target);
         }
         if (target == null) {
             return;
@@ -1249,8 +1366,9 @@ class DOMUtils extends DOMUtilsEvent {
      * 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;
@@ -1267,8 +1385,9 @@ class DOMUtils extends DOMUtilsEvent {
      * > 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;
@@ -1276,21 +1395,22 @@ class DOMUtils extends DOMUtilsEvent {
         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文档节点 */
@@ -1333,10 +1453,11 @@ class DOMUtils extends DOMUtilsEvent {
     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
@@ -1383,10 +1504,10 @@ class DOMUtils extends DOMUtilsEvent {
     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
@@ -1409,10 +1530,10 @@ class DOMUtils extends DOMUtilsEvent {
     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
@@ -1445,8 +1566,9 @@ class DOMUtils extends DOMUtilsEvent {
      * })
      */
     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;
@@ -1497,15 +1619,16 @@ class DOMUtils extends DOMUtilsEvent {
      * 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;
         // 将要包裹的元素插入目标元素前面
@@ -1514,8 +1637,9 @@ class DOMUtils extends DOMUtilsEvent {
         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;
@@ -1523,8 +1647,9 @@ class DOMUtils extends DOMUtilsEvent {
         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;
@@ -1537,15 +1662,17 @@ class DOMUtils extends DOMUtilsEvent {
      * 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;
@@ -1566,7 +1693,7 @@ class DOMUtils extends DOMUtilsEvent {
     parent(element) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsCore.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -1584,6 +1711,7 @@ class DOMUtils extends DOMUtilsEvent {
         }
     }
     parseHTML(html, useParser = false, isComplete = false) {
+        let DOMUtilsContext = this;
         function parseHTMLByDOMParser() {
             let parser = new DOMParser();
             if (isComplete) {
@@ -1594,7 +1722,7 @@ class DOMUtils extends DOMUtilsEvent {
             }
         }
         function parseHTMLByCreateDom() {
-            let tempDIV = DOMUtilsCore.document.createElement("div");
+            let tempDIV = DOMUtilsContext.windowApi.document.createElement("div");
             tempDIV.innerHTML = html;
             if (isComplete) {
                 return tempDIV;
@@ -1625,7 +1753,7 @@ class DOMUtils extends DOMUtilsEvent {
             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;
@@ -1657,7 +1785,7 @@ class DOMUtils extends DOMUtilsEvent {
             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;
@@ -1692,8 +1820,9 @@ class DOMUtils extends DOMUtilsEvent {
         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";
@@ -1707,16 +1836,16 @@ class DOMUtils extends DOMUtilsEvent {
             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);
     }
     /**
      * 淡出元素
@@ -1733,11 +1862,12 @@ class DOMUtils extends DOMUtilsEvent {
      * })
      */
     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";
@@ -1750,17 +1880,17 @@ class DOMUtils extends DOMUtilsEvent {
             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);
     }
     /**
      * 切换元素的显示和隐藏状态
@@ -1773,7 +1903,7 @@ class DOMUtils extends DOMUtilsEvent {
     toggle(element) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = DOMUtilsCore.document.querySelector(element);
+            element = DOMUtilsContext.windowApi.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -1802,6 +1932,7 @@ class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.getTextBoundingRect(document.querySelector("input"));
      */
     getTextBoundingRect($input, selectionStart, selectionEnd) {
+        let DOMUtilsContext = this;
         // Basic parameter validation
         if (!$input || !("value" in $input))
             return $input;
@@ -1871,7 +2002,7 @@ class DOMUtils extends DOMUtilsEvent {
         }
         // 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);
@@ -1885,7 +2016,7 @@ class DOMUtils extends DOMUtilsEvent {
         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;
@@ -1897,7 +2028,7 @@ class DOMUtils extends DOMUtilsEvent {
          * @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);
@@ -1905,7 +2036,7 @@ class DOMUtils extends DOMUtilsEvent {
         }
         // 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;
@@ -1928,7 +2059,7 @@ class DOMUtils extends DOMUtilsEvent {
          * @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;