@whitesev/domutils 1.6.2 → 1.6.4

package/dist/types/src/DOMUtils.d.ts

@@ -127,7 +127,7 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.text("a.xx","abcd")
      * DOMUtils.text("a.xx",document.querySelector("b"))
      * */
-    text(element: DOMUtilsTargetElementType): string;
+    text(element: DOMUtilsTargetElementType | Element | DocumentFragment | Node): string;
     /**
      * 设置元素的文本内容
      * @param element 目标元素
@@ -139,7 +139,7 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.text("a.xx","abcd")
      * DOMUtils.text("a.xx",document.querySelector("b"))
      * */
-    text(element: DOMUtilsTargetElementType | DocumentFragment, text: string | HTMLElement | Element | number): void;
+    text(element: DOMUtilsTargetElementType | Element | DocumentFragment | Node, text: string | HTMLElement | Element | number): void;
     /**
      * 设置元素的HTML内容
      * @param element 目标元素
@@ -328,7 +328,7 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.remove(document.querySelectorAll("a.xx"))
      * DOMUtils.remove("a.xx")
      * */
-    remove(element: DOMUtilsTargetElementType): void;
+    remove(element: DOMUtilsTargetElementType | Element): void;
     /**
      * 移除元素的所有子元素
      * @param element 目标元素
@@ -337,7 +337,7 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.empty(document.querySelector("a.xx"))
      * DOMUtils.empty("a.xx")
      * */
-    empty(element: DOMUtilsTargetElementType): void;
+    empty(element: DOMUtilsTargetElementType | Element): void;
     /**
      * 获取元素相对于文档的偏移坐标（加上文档的滚动条）
      * @param element 目标元素

package/dist/types/src/DOMUtilsEvent.d.ts

@@ -186,7 +186,7 @@ export declare class DOMUtilsEvent {
      * DOMUtils.trigger(document.querySelector("a.xx"),"click tap hover")
      * DOMUtils.trigger("a.xx",["click","tap","hover"])
      */
-    trigger(element: DOMUtilsTargetElementType | any[] | typeof globalThis | Window | Document, eventType: string, details?: object, useDispatchToTriggerEvent?: boolean): void;
+    trigger(element: DOMUtilsTargetElementType | Element | DocumentFragment | any[] | typeof globalThis | Window | Document, eventType: string, details?: object, useDispatchToTriggerEvent?: boolean): void;
     /**
      * 主动触发事件
      * @param element 需要触发的元素|元素数组|window
@@ -216,7 +216,7 @@ export declare class DOMUtilsEvent {
      *  console.log("触发click事件成功")
      * })
      * */
-    click(element: DOMUtilsTargetElementType | typeof globalThis | Window, handler?: (this: HTMLElement, event: DOMUtils_Event["click"]) => void, details?: any, useDispatchToTriggerEvent?: boolean): void;
+    click(element: DOMUtilsTargetElementType | Element | DocumentFragment | typeof globalThis | Window, handler?: (this: HTMLElement, event: DOMUtils_Event["click"]) => void, details?: any, useDispatchToTriggerEvent?: boolean): void;
     /**
      * 绑定或触发元素的blur事件
      * @param element 目标元素
@@ -231,7 +231,7 @@ export declare class DOMUtilsEvent {
      *  console.log("触发blur事件成功")
      * })
      * */
-    blur(element: DOMUtilsTargetElementType | typeof globalThis | Window, handler?: (this: HTMLElement, event: DOMUtils_Event["blur"]) => void, details?: object, useDispatchToTriggerEvent?: boolean): void;
+    blur(element: DOMUtilsTargetElementType | Element | DocumentFragment | typeof globalThis | Window, handler?: (this: HTMLElement, event: DOMUtils_Event["blur"]) => void, details?: object, useDispatchToTriggerEvent?: boolean): void;
     /**
      * 绑定或触发元素的focus事件
      * @param element 目标元素
@@ -246,7 +246,7 @@ export declare class DOMUtilsEvent {
      *  console.log("触发focus事件成功")
      * })
      * */
-    focus(element: DOMUtilsTargetElementType | typeof globalThis | Window, handler?: (this: HTMLElement, event: DOMUtils_Event["focus"]) => void, details?: object, useDispatchToTriggerEvent?: boolean): void;
+    focus(element: DOMUtilsTargetElementType | Element | DocumentFragment | typeof globalThis | Window, handler?: (this: HTMLElement, event: DOMUtils_Event["focus"]) => void, details?: object, useDispatchToTriggerEvent?: boolean): void;
     /**
      * 当鼠标移入或移出元素时触发事件
      * @param element 当前元素
@@ -261,14 +261,14 @@ export declare class DOMUtilsEvent {
      *   console.log("移入/移除");
      * })
      */
-    hover(element: DOMUtilsTargetElementType, handler: (this: HTMLElement, event: DOMUtils_Event["hover"]) => void, option?: boolean | DOMUtilsEventListenerOption): void;
+    hover(element: DOMUtilsTargetElementType | Element | DocumentFragment | Node, handler: (this: HTMLElement, event: DOMUtils_Event["hover"]) => void, option?: boolean | DOMUtilsEventListenerOption): void;
     /**
      * 当动画结束时触发事件
      * @param element 监听的元素
      * @param handler 触发的回调函数
      * @param option 配置项，这里默认配置once为true
      */
-    animationend(element: HTMLElement | string, handler: (this: HTMLElement, event: DOMUtils_Event["animationend"]) => void, option?: boolean | DOMUtilsEventListenerOption): {
+    animationend(element: HTMLElement | string | Element | DocumentFragment, handler: (this: HTMLElement, event: DOMUtils_Event["animationend"]) => void, option?: boolean | DOMUtilsEventListenerOption): {
         off(): void;
     } | undefined;
     /**
@@ -277,7 +277,7 @@ export declare class DOMUtilsEvent {
      * @param handler 触发的回调函数
      * @param option 配置项，这里默认配置once为true
      */
-    transitionend(element: HTMLElement | string, handler: (this: HTMLElement, event: DOMUtils_Event["transitionend"]) => void, option?: boolean | DOMUtilsEventListenerOption): {
+    transitionend(element: HTMLElement | string | Element | DocumentFragment, handler: (this: HTMLElement, event: DOMUtils_Event["transitionend"]) => void, option?: boolean | DOMUtilsEventListenerOption): {
         off(): void;
     } | undefined;
     /**
@@ -295,7 +295,7 @@ export declare class DOMUtilsEvent {
      *   console.log("按键松开");
      * })
      */
-    keyup(element: DOMUtilsTargetElementType | Window | typeof globalThis, handler: (this: HTMLElement, event: DOMUtils_Event["keyup"]) => void, option?: boolean | DOMUtilsEventListenerOption): void;
+    keyup(element: DOMUtilsTargetElementType | Element | DocumentFragment | Window | Node | typeof globalThis, handler: (this: HTMLElement, event: DOMUtils_Event["keyup"]) => void, option?: boolean | DOMUtilsEventListenerOption): void;
     /**
      * 当按键按下时触发事件
      * keydown - > keypress - > keyup
@@ -311,7 +311,7 @@ export declare class DOMUtilsEvent {
      *   console.log("按键按下");
      * })
      */
-    keydown(element: DOMUtilsTargetElementType | Window | typeof globalThis, handler: (this: HTMLElement, event: DOMUtils_Event["keydown"]) => void, option?: boolean | DOMUtilsEventListenerOption): void;
+    keydown(element: DOMUtilsTargetElementType | Element | DocumentFragment | Window | Node | typeof globalThis, handler: (this: HTMLElement, event: DOMUtils_Event["keydown"]) => void, option?: boolean | DOMUtilsEventListenerOption): void;
     /**
      * 当按键按下时触发事件
      * keydown - > keypress - > keyup
@@ -327,7 +327,7 @@ export declare class DOMUtilsEvent {
      *   console.log("按键按下");
      * })
      */
-    keypress(element: DOMUtilsTargetElementType | Window | typeof globalThis, handler: (this: HTMLElement, event: DOMUtils_Event["keypress"]) => void, option?: boolean | DOMUtilsEventListenerOption): void;
+    keypress(element: DOMUtilsTargetElementType | Element | DocumentFragment | Window | Node | typeof globalThis, handler: (this: HTMLElement, event: DOMUtils_Event["keypress"]) => void, option?: boolean | DOMUtilsEventListenerOption): void;
     /**
      * 监听某个元素键盘按键事件或window全局按键事件
      * 按下有值的键时触发，按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件，再触发keypress事件。
@@ -391,7 +391,7 @@ export declare class DOMUtilsEvent {
       搜索		170
       收藏		171
      **/
-    listenKeyboard(element: DOMUtilsTargetElementType | Window | Node | typeof globalThis, eventName: "keyup" | "keypress" | "keydown" | undefined, callback: (keyName: string, keyValue: number, otherCodeList: string[], event: KeyboardEvent) => void, options?: DOMUtilsEventListenerOption | boolean): {
+    listenKeyboard(element: DOMUtilsTargetElementType | Element | DocumentFragment | Window | Node | typeof globalThis, eventName: "keyup" | "keypress" | "keydown" | undefined, callback: (keyName: string, keyValue: number, otherCodeList: string[], event: KeyboardEvent) => void, options?: DOMUtilsEventListenerOption | boolean): {
         removeListen(): void;
     };
     /**

package/dist/types/src/WindowApi.d.ts

@@ -10,4 +10,8 @@ export declare class WindowApi {
     get globalThis(): typeof globalThis | Window;
     get self(): Window & typeof globalThis;
     get top(): Window;
+    get setTimeout(): typeof setTimeout;
+    get clearTimeout(): typeof clearTimeout;
+    get setInterval(): typeof setInterval;
+    get clearInterval(): typeof clearInterval;
 }

package/dist/types/src/types/WindowApi.d.ts

@@ -7,4 +7,8 @@ export type WindowApiOption = {
 	globalThis?: typeof globalThis | Window;
 	self?: Window & typeof globalThis;
 	top: Window;
+	setTimeout: typeof setTimeout;
+	clearTimeout: typeof clearTimeout;
+	setInterval: typeof setInterval;
+	clearInterval: typeof clearInterval;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@whitesev/domutils",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "type": "module",
   "description": "使用js重新对jQuery的部分函数进行了仿写",
   "main": "dist/index.cjs.js",

package/src/DOMUtils.ts

@@ -295,7 +295,7 @@ class DOMUtils extends DOMUtilsEvent {
 	 * DOMUtils.text("a.xx","abcd")
 	 * DOMUtils.text("a.xx",document.querySelector("b"))
 	 * */
-	text(element: DOMUtilsTargetElementType): string;
+	text(element: DOMUtilsTargetElementType | Element | DocumentFragment | Node): string;
 	/**
 	 * 设置元素的文本内容
 	 * @param element 目标元素
@@ -308,10 +308,10 @@ class DOMUtils extends DOMUtilsEvent {
 	 * DOMUtils.text("a.xx",document.querySelector("b"))
 	 * */
 	text(
-		element: DOMUtilsTargetElementType | DocumentFragment,
+		element: DOMUtilsTargetElementType | Element | DocumentFragment | Node,
 		text: string | HTMLElement | Element | number
 	): void;
-	text(element: DOMUtilsTargetElementType | DocumentFragment, text?: any) {
+	text(element: DOMUtilsTargetElementType | Element | DocumentFragment | Node, text?: any) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
 			element = DOMUtilsContext.selectorAll(element);
@@ -713,7 +713,13 @@ class DOMUtils extends DOMUtilsEvent {
 		if (typeof newElement === "string") {
 			newElement = DOMUtilsContext.parseHTML(newElement, false, false);
 		}
-		element!.parentElement!.replaceChild(newElement as Node, element);
+		let $parent = element.parentElement;
+		if ($parent) {
+			$parent.replaceChild(newElement as Node, element);
+		} else {
+			DOMUtilsContext.after(element, newElement as HTMLElement);
+			element.remove();
+		}
 	}
 	/**
 	 * 给元素添加class
@@ -962,7 +968,7 @@ class DOMUtils extends DOMUtilsEvent {
 	 * DOMUtils.remove(document.querySelectorAll("a.xx"))
 	 * DOMUtils.remove("a.xx")
 	 * */
-	remove(element: DOMUtilsTargetElementType) {
+	remove(element: DOMUtilsTargetElementType | Element) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
 			element = DOMUtilsContext.selectorAll(element);
@@ -976,7 +982,13 @@ class DOMUtils extends DOMUtilsEvent {
 			});
 			return;
 		}
-		element.remove();
+		if (typeof element.remove === "function") {
+			element.remove();
+		} else if (element.parentElement) {
+			element.parentElement.removeChild(element);
+		} else if (element.parentNode) {
+			element.parentNode.removeChild(element);
+		}
 	}
 	/**
 	 * 移除元素的所有子元素
@@ -986,7 +998,7 @@ class DOMUtils extends DOMUtilsEvent {
 	 * DOMUtils.empty(document.querySelector("a.xx"))
 	 * DOMUtils.empty("a.xx")
 	 * */
-	empty(element: DOMUtilsTargetElementType) {
+	empty(element: DOMUtilsTargetElementType | Element) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
 			element = DOMUtilsContext.selectorAll(element);
@@ -1001,7 +1013,11 @@ class DOMUtils extends DOMUtilsEvent {
 			});
 			return;
 		}
-		DOMUtilsContext.html(element, "");
+		if (element.innerHTML) {
+			element.innerHTML = "";
+		} else if (element.textContent) {
+			element.textContent = "";
+		}
 	}
 	/**
 	 * 获取元素相对于文档的偏移坐标（加上文档的滚动条）
@@ -1496,7 +1512,7 @@ class DOMUtils extends DOMUtilsEvent {
 	 * DOMUtils.parent("a.xx")
 	 * > <div ...>....</div>
 	 */
-	parent(element: HTMLElement | NodeList | string | HTMLElement[]) {
+	parent(element: HTMLElement | Element | Node | NodeList | string | HTMLElement[]) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
 			element = DOMUtilsContext.selector<HTMLElement>(element)!;

package/src/DOMUtilsCommonUtils.ts

@@ -12,6 +12,10 @@ const DOMUtilsCommonUtils = {
 		document: document,
 		window: window,
 		top: top!,
+		setTimeout: setTimeout,
+		clearTimeout: clearTimeout,
+		setInterval: setInterval,
+		clearInterval: clearInterval,
 	}),
 	/**
 	 * 判断元素是否已显示或已连接
@@ -142,7 +146,7 @@ const DOMUtilsCommonUtils = {
 		try {
 			return WorkerSetTimeout(callback, timeout);
 		} catch (error) {
-			return globalThis.setTimeout(callback, timeout);
+			return this.windowApi.setTimeout(callback, timeout);
 		}
 	},
 	/**
@@ -155,7 +159,7 @@ const DOMUtilsCommonUtils = {
 			}
 		} catch (error) {
 		} finally {
-			globalThis.clearTimeout(timeId);
+			this.windowApi.clearTimeout(timeId);
 		}
 	},
 	/**
@@ -165,7 +169,7 @@ const DOMUtilsCommonUtils = {
 		try {
 			return WorkerSetInterval(callback, timeout);
 		} catch (error) {
-			return globalThis.setInterval(callback, timeout);
+			return this.windowApi.setInterval(callback, timeout);
 		}
 	},
 	/**
@@ -178,7 +182,7 @@ const DOMUtilsCommonUtils = {
 			}
 		} catch (error) {
 		} finally {
-			globalThis.clearInterval(timeId);
+			this.windowApi.clearInterval(timeId);
 		}
 	},
 	/**

package/src/DOMUtilsEvent.ts

@@ -728,7 +728,14 @@ export class DOMUtilsEvent {
 	 * DOMUtils.trigger("a.xx",["click","tap","hover"])
 	 */
 	trigger(
-		element: DOMUtilsTargetElementType | any[] | typeof globalThis | Window | Document,
+		element:
+			| DOMUtilsTargetElementType
+			| Element
+			| DocumentFragment
+			| any[]
+			| typeof globalThis
+			| Window
+			| Document,
 		eventType: string,
 		details?: object,
 		useDispatchToTriggerEvent?: boolean
@@ -835,7 +842,7 @@ export class DOMUtilsEvent {
 	 * })
 	 * */
 	click(
-		element: DOMUtilsTargetElementType | typeof globalThis | Window,
+		element: DOMUtilsTargetElementType | Element | DocumentFragment | typeof globalThis | Window,
 		handler?: (this: HTMLElement, event: DOMUtils_Event["click"]) => void,
 		details?: any,
 		useDispatchToTriggerEvent?: boolean
@@ -875,14 +882,14 @@ export class DOMUtilsEvent {
 	 * })
 	 * */
 	blur(
-		element: DOMUtilsTargetElementType | typeof globalThis | Window,
+		element: DOMUtilsTargetElementType | Element | DocumentFragment | typeof globalThis | Window,
 		handler?: (this: HTMLElement, event: DOMUtils_Event["blur"]) => void,
 		details?: object,
 		useDispatchToTriggerEvent?: boolean
 	) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsContext.selectorAll<HTMLElement>(element);
+			element = DOMUtilsContext.selectorAll(element);
 		}
 		if (element == null) {
 			return;
@@ -915,14 +922,14 @@ export class DOMUtilsEvent {
 	 * })
 	 * */
 	focus(
-		element: DOMUtilsTargetElementType | typeof globalThis | Window,
+		element: DOMUtilsTargetElementType | Element | DocumentFragment | typeof globalThis | Window,
 		handler?: (this: HTMLElement, event: DOMUtils_Event["focus"]) => void,
 		details?: object,
 		useDispatchToTriggerEvent?: boolean
 	) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsContext.selectorAll<HTMLElement>(element);
+			element = DOMUtilsContext.selectorAll(element);
 		}
 		if (element == null) {
 			return;
@@ -955,13 +962,13 @@ export class DOMUtilsEvent {
 	 * })
 	 */
 	hover(
-		element: DOMUtilsTargetElementType,
+		element: DOMUtilsTargetElementType | Element | DocumentFragment | Node,
 		handler: (this: HTMLElement, event: DOMUtils_Event["hover"]) => void,
 		option?: boolean | DOMUtilsEventListenerOption
 	) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsContext.selectorAll<HTMLElement>(element);
+			element = DOMUtilsContext.selectorAll(element);
 		}
 		if (element == null) {
 			return;
@@ -983,13 +990,13 @@ export class DOMUtilsEvent {
 	 * @param option 配置项，这里默认配置once为true
 	 */
 	animationend(
-		element: HTMLElement | string,
+		element: HTMLElement | string | Element | DocumentFragment,
 		handler: (this: HTMLElement, event: DOMUtils_Event["animationend"]) => void,
 		option?: boolean | DOMUtilsEventListenerOption
 	) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsContext.selector<HTMLElement>(element)!;
+			element = DOMUtilsContext.selector(element)!;
 		}
 		if (element == null) {
 			return;
@@ -1022,13 +1029,13 @@ export class DOMUtilsEvent {
 	 * @param option 配置项，这里默认配置once为true
 	 */
 	transitionend(
-		element: HTMLElement | string,
+		element: HTMLElement | string | Element | DocumentFragment,
 		handler: (this: HTMLElement, event: DOMUtils_Event["transitionend"]) => void,
 		option?: boolean | DOMUtilsEventListenerOption
 	) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsContext.selector<HTMLElement>(element)!;
+			element = DOMUtilsContext.selector(element)!;
 		}
 		if (element == null) {
 			return;
@@ -1070,7 +1077,7 @@ export class DOMUtilsEvent {
 	 * })
 	 */
 	keyup(
-		element: DOMUtilsTargetElementType | Window | typeof globalThis,
+		element: DOMUtilsTargetElementType | Element | DocumentFragment | Window | Node | typeof globalThis,
 		handler: (this: HTMLElement, event: DOMUtils_Event["keyup"]) => void,
 		option?: boolean | DOMUtilsEventListenerOption
 	) {
@@ -1106,7 +1113,7 @@ export class DOMUtilsEvent {
 	 * })
 	 */
 	keydown(
-		element: DOMUtilsTargetElementType | Window | typeof globalThis,
+		element: DOMUtilsTargetElementType | Element | DocumentFragment | Window | Node | typeof globalThis,
 		handler: (this: HTMLElement, event: DOMUtils_Event["keydown"]) => void,
 		option?: boolean | DOMUtilsEventListenerOption
 	) {
@@ -1142,7 +1149,7 @@ export class DOMUtilsEvent {
 	 * })
 	 */
 	keypress(
-		element: DOMUtilsTargetElementType | Window | typeof globalThis,
+		element: DOMUtilsTargetElementType | Element | DocumentFragment | Window | Node | typeof globalThis,
 		handler: (this: HTMLElement, event: DOMUtils_Event["keypress"]) => void,
 		option?: boolean | DOMUtilsEventListenerOption
 	) {
@@ -1226,7 +1233,7 @@ export class DOMUtilsEvent {
       收藏		171
      **/
 	listenKeyboard(
-		element: DOMUtilsTargetElementType | Window | Node | typeof globalThis,
+		element: DOMUtilsTargetElementType | Element | DocumentFragment | Window | Node | typeof globalThis,
 		eventName: "keyup" | "keypress" | "keydown" = "keypress",
 		callback: (keyName: string, keyValue: number, otherCodeList: string[], event: KeyboardEvent) => void,
 		options?: DOMUtilsEventListenerOption | boolean

package/src/WindowApi.ts

@@ -8,6 +8,10 @@ export class WindowApi {
 		globalThis: globalThis,
 		self: self,
 		top: top!,
+		setTimeout: globalThis.setTimeout,
+		clearTimeout: globalThis.clearTimeout,
+		setInterval: globalThis.setInterval,
+		clearInterval: globalThis.clearInterval,
 	};
 	/** 使用的配置 */
 	private api: Required<WindowApiOption>;
@@ -41,4 +45,16 @@ export class WindowApi {
 	get top() {
 		return this.api.top;
 	}
+	get setTimeout() {
+		return this.api.setTimeout;
+	}
+	get clearTimeout() {
+		return this.api.clearTimeout;
+	}
+	get setInterval() {
+		return this.api.setInterval;
+	}
+	get clearInterval() {
+		return this.api.clearInterval;
+	}
 }

package/src/types/WindowApi.d.ts

@@ -7,4 +7,8 @@ export type WindowApiOption = {
 	globalThis?: typeof globalThis | Window;
 	self?: Window & typeof globalThis;
 	top: Window;
+	setTimeout: typeof setTimeout;
+	clearTimeout: typeof clearTimeout;
+	setInterval: typeof setInterval;
+	clearInterval: typeof clearInterval;
 };