@whitesev/domutils 1.0.0 → 1.0.3

package/dist/index.esm.js

@@ -1,3 +1,36 @@
+const DOMUtilsCoreDefaultEnv = {
+    document: document,
+    window: window,
+    globalThis: globalThis,
+    self: self,
+};
+const DOMUtilsCoreEnv = {
+    document: document,
+    window: window,
+    globalThis: globalThis,
+    self: self,
+};
+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 CommonDOMUtils = {
     /**
@@ -14,7 +47,7 @@ const CommonDOMUtils = {
     showElement(element) {
         let dupNode = element.cloneNode(true);
         dupNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
-        document.documentElement.appendChild(dupNode);
+        DOMUtilsCore.document.documentElement.appendChild(dupNode);
         return {
             /**
              * 恢复修改的style
@@ -107,11 +140,14 @@ const OriginPrototype = {
 };
 
 class DOMUtils {
+    constructor(option) {
+        DOMUtilsCore.init(option);
+    }
     /** 版本号 */
     version = "2024.5.24";
     attr(element, attrName, attrValue) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -148,7 +184,7 @@ class DOMUtils {
     property, 
     /** 自定义属性 */
     attributes) {
-        let tempElement = document.createElement(tagName);
+        let tempElement = DOMUtilsCore.document.createElement(tagName);
         if (typeof property === "string") {
             tempElement.innerHTML = property;
             return tempElement;
@@ -202,7 +238,7 @@ class DOMUtils {
             return propertyValue;
         }
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -236,7 +272,7 @@ class DOMUtils {
     }
     text(element, text) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -258,7 +294,7 @@ class DOMUtils {
     }
     html(element, html) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -292,7 +328,7 @@ class DOMUtils {
     click(element, handler, details, useDispatchToTriggerEvent) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -321,7 +357,7 @@ class DOMUtils {
     blur(element, handler, details, useDispatchToTriggerEvent) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -350,7 +386,7 @@ class DOMUtils {
     focus(element, handler, details, useDispatchToTriggerEvent) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -399,7 +435,7 @@ class DOMUtils {
     }
     val(element, value) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -428,7 +464,7 @@ class DOMUtils {
             return;
         }
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (propValue == null) {
             return element[propName];
@@ -448,7 +484,7 @@ class DOMUtils {
      * */
     removeAttr(element, attrName) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -466,7 +502,7 @@ class DOMUtils {
      */
     removeClass(element, className) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -487,7 +523,7 @@ class DOMUtils {
      * */
     removeProp(element, propName) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -506,7 +542,7 @@ class DOMUtils {
     replaceWith(element, newElement) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -534,7 +570,7 @@ class DOMUtils {
      * */
     addClass(element, className) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -552,7 +588,7 @@ class DOMUtils {
      * */
     append(element, content) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -575,7 +611,7 @@ class DOMUtils {
      * */
     prepend(element, content) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -598,7 +634,7 @@ class DOMUtils {
      * */
     after(element, content) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -621,7 +657,7 @@ class DOMUtils {
      * */
     before(element, content) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -645,7 +681,7 @@ class DOMUtils {
     remove(target) {
         let DOMUtilsContext = this;
         if (typeof target === "string") {
-            target = document.querySelectorAll(target);
+            target = DOMUtilsCore.document.querySelectorAll(target);
         }
         if (target == null) {
             return;
@@ -670,7 +706,7 @@ class DOMUtils {
      * */
     empty(element) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -707,7 +743,7 @@ class DOMUtils {
         let DOMUtilsContext = this;
         let args = arguments;
         if (typeof element === "string") {
-            element = document.querySelectorAll(element);
+            element = DOMUtilsCore.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
@@ -758,7 +794,7 @@ class DOMUtils {
                 if (_selector_) {
                     /* 存在自定义子元素选择器 */
                     let totalParent = CommonDOMUtils.isWin(elementItem)
-                        ? document.documentElement
+                        ? DOMUtilsCore.document.documentElement
                         : elementItem;
                     if (target.matches(_selector_)) {
                         /* 当前目标可以被selector所匹配到 */
@@ -824,7 +860,7 @@ class DOMUtils {
         }
         let args = arguments;
         if (typeof element === "string") {
-            element = document.querySelectorAll(element);
+            element = DOMUtilsCore.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
@@ -908,7 +944,7 @@ class DOMUtils {
      */
     offAll(element, eventType) {
         if (typeof element === "string") {
-            element = document.querySelectorAll(element);
+            element = DOMUtilsCore.document.querySelectorAll(element);
         }
         if (element == null) {
             return;
@@ -968,7 +1004,7 @@ class DOMUtils {
      */
     trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -1026,7 +1062,7 @@ class DOMUtils {
      */
     offset(element) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -1034,21 +1070,21 @@ class DOMUtils {
         let rect = element.getBoundingClientRect();
         return {
             /** y轴偏移 */
-            top: rect.top + globalThis.scrollY,
+            top: rect.top + DOMUtilsCore.globalThis.scrollY,
             /** x轴偏移 */
-            left: rect.left + globalThis.scrollX,
+            left: rect.left + DOMUtilsCore.globalThis.scrollX,
         };
     }
     width(element, isShow = false) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
         }
         if (CommonDOMUtils.isWin(element)) {
-            return window.document.documentElement.clientWidth;
+            return DOMUtilsCore.window.document.documentElement.clientWidth;
         }
         if (element.nodeType === 9) {
             /* Document文档节点 */
@@ -1091,10 +1127,10 @@ class DOMUtils {
     height(element, isShow = false) {
         let DOMUtilsContext = this;
         if (CommonDOMUtils.isWin(element)) {
-            return window.document.documentElement.clientHeight;
+            return DOMUtilsCore.window.document.documentElement.clientHeight;
         }
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             // @ts-ignore
@@ -1141,10 +1177,10 @@ class DOMUtils {
     outerWidth(element, isShow = false) {
         let DOMUtilsContext = this;
         if (CommonDOMUtils.isWin(element)) {
-            return window.innerWidth;
+            return DOMUtilsCore.window.innerWidth;
         }
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             // @ts-ignore
@@ -1167,10 +1203,10 @@ class DOMUtils {
     outerHeight(element, isShow = false) {
         let DOMUtilsContext = this;
         if (CommonDOMUtils.isWin(element)) {
-            return window.innerHeight;
+            return DOMUtilsCore.window.innerHeight;
         }
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             // @ts-ignore
@@ -1231,7 +1267,7 @@ class DOMUtils {
      */
     animate(element, styles, duration = 1000, callback = null) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -1283,14 +1319,14 @@ class DOMUtils {
      */
     wrap(element, wrapperHTML) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
         }
         element = element;
         // 创建一个新的div元素，并将wrapperHTML作为其innerHTML
-        let wrapper = document.createElement("div");
+        let wrapper = DOMUtilsCore.document.createElement("div");
         wrapper.innerHTML = wrapperHTML;
         let wrapperFirstChild = wrapper.firstChild;
         // 将要包裹的元素插入目标元素前面
@@ -1300,7 +1336,7 @@ class DOMUtils {
     }
     prev(element) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -1309,7 +1345,7 @@ class DOMUtils {
     }
     next(element) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -1322,15 +1358,15 @@ class DOMUtils {
      * let DOMUtils = window.DOMUtils.noConflict()
      */
     noConflict() {
-        if (window.DOMUtils) {
+        if (DOMUtilsCore.window.DOMUtils) {
             CommonDOMUtils.delete(window, "DOMUtils");
         }
-        window.DOMUtils = this;
+        DOMUtilsCore.window.DOMUtils = this;
         return this;
     }
     siblings(element) {
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -1351,7 +1387,7 @@ class DOMUtils {
     parent(element) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -1379,7 +1415,7 @@ class DOMUtils {
             }
         }
         function parseHTMLByCreateDom() {
-            let tempDIV = document.createElement("div");
+            let tempDIV = DOMUtilsCore.document.createElement("div");
             tempDIV.innerHTML = html;
             if (isComplete) {
                 return tempDIV;
@@ -1412,7 +1448,7 @@ class DOMUtils {
     hover(element, handler, option) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -1435,7 +1471,7 @@ class DOMUtils {
             return;
         }
         if (typeof target === "string") {
-            target = document.querySelectorAll(target);
+            target = DOMUtilsCore.document.querySelectorAll(target);
         }
         if (target instanceof NodeList || target instanceof Array) {
             target = target;
@@ -1444,6 +1480,7 @@ class DOMUtils {
             }
         }
         else {
+            target = target;
             target.style.display = "";
             if (!CommonDOMUtils.isShow(target)) {
                 /* 仍然是不显示，尝试使用强覆盖 */
@@ -1466,7 +1503,7 @@ class DOMUtils {
             return;
         }
         if (typeof target === "string") {
-            target = document.querySelectorAll(target);
+            target = DOMUtilsCore.document.querySelectorAll(target);
         }
         if (target instanceof NodeList || target instanceof Array) {
             target = target;
@@ -1475,6 +1512,7 @@ class DOMUtils {
             }
         }
         else {
+            target = target;
             target.style.display = "none";
             if (CommonDOMUtils.isShow(target)) {
                 /* 仍然是显示，尝试使用强覆盖 */
@@ -1503,7 +1541,7 @@ class DOMUtils {
             return;
         }
         if (typeof target === "string") {
-            target = document.querySelector(target);
+            target = DOMUtilsCore.document.querySelector(target);
         }
         DOMUtilsContext.on(target, "keyup", null, handler, option);
     }
@@ -1528,7 +1566,7 @@ class DOMUtils {
             return;
         }
         if (typeof target === "string") {
-            target = document.querySelector(target);
+            target = DOMUtilsCore.document.querySelector(target);
         }
         DOMUtilsContext.on(target, "keydown", null, handler, option);
     }
@@ -1553,7 +1591,7 @@ class DOMUtils {
             return;
         }
         if (typeof target === "string") {
-            target = document.querySelector(target);
+            target = DOMUtilsCore.document.querySelector(target);
         }
         DOMUtilsContext.on(target, "keypress", null, handler, option);
     }
@@ -1576,7 +1614,7 @@ class DOMUtils {
             return;
         }
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         element = element;
         element.style.opacity = "0";
@@ -1590,16 +1628,16 @@ class DOMUtils {
             element = element;
             element.style.opacity = Math.min(progress / duration, 1).toString();
             if (progress < duration) {
-                window.requestAnimationFrame(step);
+                DOMUtilsCore.window.requestAnimationFrame(step);
             }
             else {
                 if (callback && typeof callback === "function") {
                     callback();
                 }
-                window.cancelAnimationFrame(timer);
+                DOMUtilsCore.window.cancelAnimationFrame(timer);
             }
         }
-        timer = window.requestAnimationFrame(step);
+        timer = DOMUtilsCore.window.requestAnimationFrame(step);
     }
     /**
      * 淡出元素
@@ -1620,7 +1658,7 @@ class DOMUtils {
             return;
         }
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         element = element;
         element.style.opacity = "1";
@@ -1633,17 +1671,17 @@ class DOMUtils {
             element = element;
             element.style.opacity = Math.max(1 - progress / duration, 0).toString();
             if (progress < duration) {
-                window.requestAnimationFrame(step);
+                DOMUtilsCore.window.requestAnimationFrame(step);
             }
             else {
                 element.style.display = "none";
                 if (typeof callback === "function") {
                     callback();
                 }
-                window.cancelAnimationFrame(timer);
+                DOMUtilsCore.window.cancelAnimationFrame(timer);
             }
         }
-        timer = window.requestAnimationFrame(step);
+        timer = DOMUtilsCore.window.requestAnimationFrame(step);
     }
     /**
      * 切换元素的显示和隐藏状态
@@ -1656,7 +1694,7 @@ class DOMUtils {
     toggle(element) {
         let DOMUtilsContext = this;
         if (typeof element === "string") {
-            element = document.querySelector(element);
+            element = DOMUtilsCore.document.querySelector(element);
         }
         if (element == null) {
             return;
@@ -1668,6 +1706,14 @@ class DOMUtils {
             DOMUtilsContext.hide(element);
         }
     }
+    /**
+     * 创建一个新的DOMUtils实例
+     * @param option
+     * @returns
+     */
+    createDOMUtils(option) {
+        return new DOMUtils(option);
+    }
 }
 let domUtils = new DOMUtils();