@whitesev/domutils 1.5.8 → 1.5.10

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

@@ -42,7 +42,7 @@ export declare class DOMUtilsEvent {
      *    console.log("事件触发",event)
      * })
      */
-    on<T extends Event>(element: DOMUtilsElementEventType, eventType: string, callback: (this: HTMLElement, event: T) => void, option?: DOMUtilsEventListenerOption | boolean): void;
+    on<T extends Event>(element: DOMUtilsElementEventType, eventType: string | string[], callback: (this: HTMLElement, event: T) => void, option?: DOMUtilsEventListenerOption | boolean): void;
     /**
      * 绑定事件
      * @param element 需要绑定的元素|元素数组|window
@@ -55,16 +55,16 @@ export declare class DOMUtilsEvent {
      * + passive 表示事件监听器是否不会调用preventDefault()。默认为false
      * @example
      * // 监听元素a.xx的click、tap、hover事件
-     * DOMUtils.on(document.querySelector("a.xx"),"click tap hover",(event)=>{
-     *    console.log("事件触发",event)
+     * DOMUtils.on(document.querySelector("a.xx"),"click tap hover",(event, selectorTarget)=>{
+     *    console.log("事件触发", event, selectorTarget)
      * })
-     * DOMUtils.on("a.xx",["click","tap","hover"],(event)=>{
-     *    console.log("事件触发",event)
+     * DOMUtils.on("a.xx",["click","tap","hover"],(event, selectorTarget)=>{
+     *    console.log("事件触发", event, selectorTarget)
      * })
      * @example
      * // 监听全局document下的子元素a.xx的click事件
-     * DOMUtils.on(document,"click tap hover","a.xx",(event)=>{
-     *    console.log("事件触发",event)
+     * DOMUtils.on(document,"click tap hover","a.xx",(event, selectorTarget)=>{
+     *    console.log("事件触发", event, selectorTarget)
      * })
      */
     on<T extends DOMUtils_EventType>(element: DOMUtilsElementEventType, eventType: T | T[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: DOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: DOMUtilsEventListenerOption | boolean): void;
@@ -80,19 +80,19 @@ export declare class DOMUtilsEvent {
      * + passive 表示事件监听器是否不会调用preventDefault()。默认为false
      * @example
      * // 监听元素a.xx的click、tap、hover事件
-     * DOMUtils.on(document.querySelector("a.xx"),"click tap hover",(event)=>{
-     *    console.log("事件触发",event)
+     * DOMUtils.on(document.querySelector("a.xx"),"click tap hover",(event, selectorTarget)=>{
+     *    console.log("事件触发", event, selectorTarget)
      * })
-     * DOMUtils.on("a.xx",["click","tap","hover"],(event)=>{
-     *    console.log("事件触发",event)
+     * DOMUtils.on("a.xx",["click","tap","hover"],(event, selectorTarget)=>{
+     *    console.log("事件触发", event, selectorTarget)
      * })
      * @example
      * // 监听全局document下的子元素a.xx的click事件
-     * DOMUtils.on(document,"click tap hover","a.xx",(event)=>{
-     *    console.log("事件触发",event)
+     * DOMUtils.on(document,"click tap hover","a.xx",(event, selectorTarget)=>{
+     *    console.log("事件触发", event, selectorTarget)
      * })
      */
-    on<T extends Event>(element: DOMUtilsElementEventType, eventType: string, selector: string | string[] | (() => string | string[]) | undefined | null, callback: (this: HTMLElement, event: T, selectorTarget: HTMLElement) => void, option?: DOMUtilsEventListenerOption | boolean): void;
+    on<T extends Event>(element: DOMUtilsElementEventType, eventType: string | string[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: T, selectorTarget: HTMLElement) => void, option?: DOMUtilsEventListenerOption | boolean): void;
     /**
      * 取消绑定事件
      * @param element 需要取消绑定的元素|元素数组
@@ -106,7 +106,7 @@ export declare class DOMUtilsEvent {
      * DOMUtils.off(document.querySelector("a.xx"),"click")
      * DOMUtils.off("a.xx","click")
      */
-    off<T extends DOMUtils_EventType>(element: DOMUtilsElementEventType, eventType: T | T[], callback?: (this: HTMLElement, event: DOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: boolean | EventListenerOptions, filter?: (value: DOMUtilsEventListenerOptionsAttribute, index: number, array: DOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
+    off<T extends DOMUtils_EventType>(element: DOMUtilsElementEventType, eventType: T | T[], callback?: (this: HTMLElement, event: DOMUtils_Event[T]) => void, option?: EventListenerOptions | boolean, filter?: (value: DOMUtilsEventListenerOptionsAttribute, index: number, array: DOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
     /**
      * 取消绑定事件
      * @param element 需要取消绑定的元素|元素数组
@@ -120,7 +120,7 @@ export declare class DOMUtilsEvent {
      * DOMUtils.off(document.querySelector("a.xx"),"click")
      * DOMUtils.off("a.xx","click")
      */
-    off<T extends Event>(element: DOMUtilsElementEventType, eventType: string, callback?: (this: HTMLElement, event: T, selectorTarget: HTMLElement) => void, option?: boolean | EventListenerOptions, filter?: (value: DOMUtilsEventListenerOptionsAttribute, index: number, array: DOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
+    off<T extends Event>(element: DOMUtilsElementEventType, eventType: string | string[], callback?: (this: HTMLElement, event: T) => void, option?: EventListenerOptions | boolean, filter?: (value: DOMUtilsEventListenerOptionsAttribute, index: number, array: DOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
     /**
      * 取消绑定事件
      * @param element 需要取消绑定的元素|元素数组
@@ -135,7 +135,7 @@ export declare class DOMUtilsEvent {
      * DOMUtils.off(document.querySelector("a.xx"),"click tap hover")
      * DOMUtils.off("a.xx",["click","tap","hover"])
      */
-    off<T extends DOMUtils_EventType>(element: DOMUtilsElementEventType, eventType: T | T[], selector?: DOMUtilsEventListenerOptionsAttribute["selector"] | undefined, callback?: (this: HTMLElement, event: DOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: boolean | EventListenerOptions, filter?: (value: DOMUtilsEventListenerOptionsAttribute, index: number, array: DOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
+    off<T extends DOMUtils_EventType>(element: DOMUtilsElementEventType, eventType: T | T[], selector?: string | string[] | undefined | null, callback?: (this: HTMLElement, event: DOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: EventListenerOptions | boolean, filter?: (value: DOMUtilsEventListenerOptionsAttribute, index: number, array: DOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
     /**
      * 取消绑定事件
      * @param element 需要取消绑定的元素|元素数组
@@ -150,7 +150,7 @@ export declare class DOMUtilsEvent {
      * DOMUtils.off(document.querySelector("a.xx"),"click tap hover")
      * DOMUtils.off("a.xx",["click","tap","hover"])
      */
-    off<T extends Event>(element: DOMUtilsElementEventType, eventType: string, selector?: DOMUtilsEventListenerOptionsAttribute["selector"] | undefined, callback?: (this: HTMLElement, event: T, selectorTarget: HTMLElement) => void, option?: boolean | EventListenerOptions, filter?: (value: DOMUtilsEventListenerOptionsAttribute, index: number, array: DOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
+    off<T extends Event>(element: DOMUtilsElementEventType, eventType: string | string[], selector?: string | string[] | undefined | null, callback?: (this: HTMLElement, event: T, selectorTarget: HTMLElement) => void, option?: EventListenerOptions | boolean, filter?: (value: DOMUtilsEventListenerOptionsAttribute, index: number, array: DOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
     /**
      * 取消绑定所有的事件
      * @param element 需要取消绑定的元素|元素数组
@@ -383,6 +383,7 @@ export declare class DOMUtilsEvent {
      * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
      * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
      * @param selector 选择器
+     * @param parent 指定父元素
      * @example
      * DOMUtils.selector("div:contains('测试')")
      * > div.xxx
@@ -393,8 +394,8 @@ export declare class DOMUtilsEvent {
      * DOMUtils.selector("div:regexp('^xxxx$')")
      * > div.xxx
      */
-    selector<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | undefined;
-    selector<E extends Element = Element>(selector: string): E | undefined;
+    selector<K extends keyof HTMLElementTagNameMap>(selector: K, parent?: Element | Document | DocumentFragment | ShadowRoot): HTMLElementTagNameMap[K] | undefined;
+    selector<E extends Element = Element>(selector: string, parent?: Element | Document | DocumentFragment | ShadowRoot): E | undefined;
     /**
      * 选择器，可使用以下的额外语法
      *
@@ -402,6 +403,7 @@ export declare class DOMUtilsEvent {
      * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
      * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
      * @param selector 选择器
+     * @param parent 指定父元素
      * @example
      * DOMUtils.selectorAll("div:contains('测试')")
      * > [div.xxx]
@@ -415,8 +417,8 @@ export declare class DOMUtilsEvent {
      * DOMUtils.selectorAll("div:regexp(/^xxx/ig)")
      * > [div.xxx]
      */
-    selectorAll<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K][];
-    selectorAll<E extends Element = Element>(selector: string): E[];
+    selectorAll<K extends keyof HTMLElementTagNameMap>(selector: K, parent?: Element | Document | DocumentFragment | ShadowRoot): HTMLElementTagNameMap[K][];
+    selectorAll<E extends Element = Element>(selector: string, parent?: Element | Document | DocumentFragment | ShadowRoot): E[];
     /**
      * 匹配元素，可使用以下的额外语法
      *

package/package.json

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

package/src/DOMUtils.ts

@@ -12,7 +12,7 @@ class DOMUtils extends DOMUtilsEvent {
 		super(option);
 	}
 	/** 版本号 */
-	version = "2025.5.30";
+	version = "2025.6.7";
 	/**
 	 * 获取元素的属性值
 	 * @param element 目标元素
@@ -1110,12 +1110,13 @@ class DOMUtils extends DOMUtilsEvent {
 	width(
 		element: HTMLElement | string | Window | typeof globalThis | Document,
 		isShow: boolean = false
-	) {
+	): number {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
 			element = DOMUtilsContext.selector<HTMLElement>(element)!;
 		}
 		if (element == null) {
+			// @ts-ignore
 			return;
 		}
 		if (DOMUtilsCommonUtils.isWin(element)) {
@@ -1213,7 +1214,7 @@ class DOMUtils extends DOMUtilsEvent {
 	height(
 		element: HTMLElement | string | Window | typeof globalThis | Document,
 		isShow: boolean = false
-	) {
+	): number {
 		let DOMUtilsContext = this;
 		if (DOMUtilsCommonUtils.isWin(element)) {
 			return DOMUtilsContext.windowApi.window.document.documentElement
@@ -1293,9 +1294,9 @@ class DOMUtils extends DOMUtilsEvent {
 	}
 	/**
 	 * 获取元素的外部宽度（包括边框和外边距）
-	 * @param {HTMLElement|string} element 要获取外部宽度的元素
-	 * @param {boolean} [isShow=false] 是否已进行isShow，避免爆堆栈
-	 * @returns {number} 元素的外部宽度，单位为像素
+	 * @param element 要获取外部宽度的元素
+	 * @param [isShow=false] 是否已进行isShow，避免爆堆栈
+	 * @returns 元素的外部宽度，单位为像素
 	 * @example
 	 * // 获取元素a.xx的外部宽度
 	 * DOMUtils.outerWidth(document.querySelector("a.xx"))
@@ -1312,7 +1313,7 @@ class DOMUtils extends DOMUtilsEvent {
 	outerWidth(
 		element: HTMLElement | string | Window | typeof globalThis | Document,
 		isShow: boolean = false
-	) {
+	): number {
 		let DOMUtilsContext = this;
 		if (DOMUtilsCommonUtils.isWin(element)) {
 			return DOMUtilsContext.windowApi.window.innerWidth;

package/src/DOMUtilsEvent.ts

@@ -61,7 +61,7 @@ export class DOMUtilsEvent {
 	 */
 	on<T extends Event>(
 		element: DOMUtilsElementEventType,
-		eventType: string,
+		eventType: string | string[],
 		callback: (this: HTMLElement, event: T) => void,
 		option?: DOMUtilsEventListenerOption | boolean
 	): void;
@@ -77,16 +77,16 @@ export class DOMUtilsEvent {
 	 * + passive 表示事件监听器是否不会调用preventDefault()。默认为false
 	 * @example
 	 * // 监听元素a.xx的click、tap、hover事件
-	 * DOMUtils.on(document.querySelector("a.xx"),"click tap hover",(event)=>{
-	 *    console.log("事件触发",event)
+	 * DOMUtils.on(document.querySelector("a.xx"),"click tap hover",(event, selectorTarget)=>{
+	 *    console.log("事件触发", event, selectorTarget)
 	 * })
-	 * DOMUtils.on("a.xx",["click","tap","hover"],(event)=>{
-	 *    console.log("事件触发",event)
+	 * DOMUtils.on("a.xx",["click","tap","hover"],(event, selectorTarget)=>{
+	 *    console.log("事件触发", event, selectorTarget)
 	 * })
 	 * @example
 	 * // 监听全局document下的子元素a.xx的click事件
-	 * DOMUtils.on(document,"click tap hover","a.xx",(event)=>{
-	 *    console.log("事件触发",event)
+	 * DOMUtils.on(document,"click tap hover","a.xx",(event, selectorTarget)=>{
+	 *    console.log("事件触发", event, selectorTarget)
 	 * })
 	 */
 	on<T extends DOMUtils_EventType>(
@@ -112,22 +112,22 @@ export class DOMUtilsEvent {
 	 * + passive 表示事件监听器是否不会调用preventDefault()。默认为false
 	 * @example
 	 * // 监听元素a.xx的click、tap、hover事件
-	 * DOMUtils.on(document.querySelector("a.xx"),"click tap hover",(event)=>{
-	 *    console.log("事件触发",event)
+	 * DOMUtils.on(document.querySelector("a.xx"),"click tap hover",(event, selectorTarget)=>{
+	 *    console.log("事件触发", event, selectorTarget)
 	 * })
-	 * DOMUtils.on("a.xx",["click","tap","hover"],(event)=>{
-	 *    console.log("事件触发",event)
+	 * DOMUtils.on("a.xx",["click","tap","hover"],(event, selectorTarget)=>{
+	 *    console.log("事件触发", event, selectorTarget)
 	 * })
 	 * @example
 	 * // 监听全局document下的子元素a.xx的click事件
-	 * DOMUtils.on(document,"click tap hover","a.xx",(event)=>{
-	 *    console.log("事件触发",event)
+	 * DOMUtils.on(document,"click tap hover","a.xx",(event, selectorTarget)=>{
+	 *    console.log("事件触发", event, selectorTarget)
 	 * })
 	 */
 	on<T extends Event>(
 		element: DOMUtilsElementEventType,
-		eventType: string,
-		selector: string | string[] | (() => string | string[]) | undefined | null,
+		eventType: string | string[],
+		selector: string | string[] | undefined | null,
 		callback: (
 			this: HTMLElement,
 			event: T,
@@ -146,11 +146,11 @@ export class DOMUtilsEvent {
 			| Element
 			| null
 			| typeof globalThis,
-		eventType: DOMUtils_EventType | DOMUtils_EventType[] | string,
+		eventType: DOMUtils_EventType | DOMUtils_EventType[] | string | string[],
 		selector:
 			| string
-			| undefined
 			| string[]
+			| undefined
 			| ((this: HTMLElement, event: T, selectorTarget: HTMLElement) => void)
 			| null,
 		callback?:
@@ -212,14 +212,26 @@ export class DOMUtilsEvent {
 		// 事件名
 		let eventTypeList: string[] = [];
 		if (Array.isArray(eventType)) {
-			eventTypeList = eventTypeList.concat(eventType as string[]);
+			eventTypeList = eventTypeList.concat(
+				eventType.filter(
+					(eventTypeItem) =>
+						typeof eventTypeItem === "string" && eventTypeItem.toString() !== ""
+				)
+			);
 		} else if (typeof eventType === "string") {
-			eventTypeList = eventTypeList.concat(eventType.split(" "));
+			eventTypeList = eventTypeList.concat(
+				eventType.split(" ").filter((eventTypeItem) => eventTypeItem !== "")
+			);
 		}
 		// 子元素选择器
 		let selectorList: string[] = [];
 		if (Array.isArray(selector)) {
-			selectorList = selectorList.concat(selector);
+			selectorList = selectorList.concat(
+				selector.filter(
+					(selectorItem) =>
+						typeof selectorItem === "string" && selectorItem.toString() !== ""
+				)
+			);
 		} else if (typeof selector === "string") {
 			selectorList.push(selector);
 		}
@@ -237,11 +249,12 @@ export class DOMUtilsEvent {
 			isComposedPath: false,
 		};
 		if (typeof selector === "function") {
-			/* 这是为没有selector的情况 */
+			// 这是为没有selector的情况
+			// 那么它就是callback
 			listenerCallBack = selector as any;
 			listenerOption = getOption(args, 3, listenerOption);
 		} else {
-			/* 这是存在selector的情况 */
+			// 这是存在selector的情况
 			listenerOption = getOption(args, 4, listenerOption);
 		}
 		/**
@@ -270,12 +283,15 @@ export class DOMUtilsEvent {
 					let eventTarget = listenerOption.isComposedPath
 						? (event.composedPath()[0] as HTMLElement)
 						: (event.target as HTMLElement);
-					let totalParent =
-						DOMUtilsCommonUtils.isWin(elementItem) ||
-						// @ts-ignore
-						elementItem === DOMUtilsContext.windowApi.document
-							? DOMUtilsContext.windowApi.document.documentElement
-							: elementItem;
+					let totalParent = elementItem;
+					if (DOMUtilsCommonUtils.isWin(totalParent)) {
+						if (
+							totalParent ===
+							(DOMUtilsContext.windowApi.document as any as HTMLElement)
+						) {
+							totalParent = DOMUtilsContext.windowApi.document.documentElement;
+						}
+					}
 					let findValue = selectorList.find((selectorItem) => {
 						// 判断目标元素是否匹配选择器
 						if (DOMUtilsContext.matches(eventTarget, selectorItem)) {
@@ -322,8 +338,7 @@ export class DOMUtilsEvent {
 				/* 获取对象上的事件 */
 				let elementEvents: {
 					[k: string]: DOMUtilsEventListenerOptionsAttribute[];
-					// @ts-ignore
-				} = elementItem[DOMUtilsData.SymbolEvents] || {};
+				} = Reflect.get(elementItem, DOMUtilsData.SymbolEvents) || {};
 				/* 初始化对象上的xx事件 */
 				elementEvents[eventName] = elementEvents[eventName] || [];
 				elementEvents[eventName].push({
@@ -333,8 +348,7 @@ export class DOMUtilsEvent {
 					originCallBack: listenerCallBack,
 				});
 				/* 覆盖事件 */
-				// @ts-ignore
-				elementItem[DOMUtilsData.SymbolEvents] = elementEvents;
+				Reflect.set(elementItem, DOMUtilsData.SymbolEvents, elementEvents);
 			});
 		});
 	}
@@ -354,12 +368,8 @@ export class DOMUtilsEvent {
 	off<T extends DOMUtils_EventType>(
 		element: DOMUtilsElementEventType,
 		eventType: T | T[],
-		callback?: (
-			this: HTMLElement,
-			event: DOMUtils_Event[T],
-			selectorTarget: HTMLElement
-		) => void,
-		option?: boolean | EventListenerOptions,
+		callback?: (this: HTMLElement, event: DOMUtils_Event[T]) => void,
+		option?: EventListenerOptions | boolean,
 		filter?: (
 			value: DOMUtilsEventListenerOptionsAttribute,
 			index: number,
@@ -381,13 +391,9 @@ export class DOMUtilsEvent {
 	 */
 	off<T extends Event>(
 		element: DOMUtilsElementEventType,
-		eventType: string,
-		callback?: (
-			this: HTMLElement,
-			event: T,
-			selectorTarget: HTMLElement
-		) => void,
-		option?: boolean | EventListenerOptions,
+		eventType: string | string[],
+		callback?: (this: HTMLElement, event: T) => void,
+		option?: EventListenerOptions | boolean,
 		filter?: (
 			value: DOMUtilsEventListenerOptionsAttribute,
 			index: number,
@@ -411,13 +417,13 @@ export class DOMUtilsEvent {
 	off<T extends DOMUtils_EventType>(
 		element: DOMUtilsElementEventType,
 		eventType: T | T[],
-		selector?: DOMUtilsEventListenerOptionsAttribute["selector"] | undefined,
+		selector?: string | string[] | undefined | null,
 		callback?: (
 			this: HTMLElement,
 			event: DOMUtils_Event[T],
 			selectorTarget: HTMLElement
 		) => void,
-		option?: boolean | EventListenerOptions,
+		option?: EventListenerOptions | boolean,
 		filter?: (
 			value: DOMUtilsEventListenerOptionsAttribute,
 			index: number,
@@ -440,14 +446,14 @@ export class DOMUtilsEvent {
 	 */
 	off<T extends Event>(
 		element: DOMUtilsElementEventType,
-		eventType: string,
-		selector?: DOMUtilsEventListenerOptionsAttribute["selector"] | undefined,
+		eventType: string | string[],
+		selector?: string | string[] | undefined | null,
 		callback?: (
 			this: HTMLElement,
 			event: T,
 			selectorTarget: HTMLElement
 		) => void,
-		option?: boolean | EventListenerOptions,
+		option?: EventListenerOptions | boolean,
 		filter?: (
 			value: DOMUtilsEventListenerOptionsAttribute,
 			index: number,
@@ -465,18 +471,20 @@ export class DOMUtilsEvent {
 			| Element
 			| null
 			| typeof globalThis,
-		eventType: DOMUtils_EventType | DOMUtils_EventType[] | string,
-		selector?:
-			| DOMUtilsEventListenerOptionsAttribute["selector"]
+		eventType: DOMUtils_EventType | DOMUtils_EventType[] | string | string[],
+		selector:
+			| string
+			| string[]
 			| undefined
-			| ((this: HTMLElement, event: T, selectorTarget: HTMLElement) => void),
+			| ((this: HTMLElement, event: T, selectorTarget: HTMLElement) => void)
+			| null,
 		callback?:
 			| ((this: HTMLElement, event: T, selectorTarget: HTMLElement) => void)
-			| boolean
-			| EventListenerOptions,
+			| EventListenerOptions
+			| boolean,
 		option?:
-			| boolean
 			| EventListenerOptions
+			| boolean
 			| ((
 					value: DOMUtilsEventListenerOptionsAttribute,
 					index: number,
@@ -499,7 +507,7 @@ export class DOMUtilsEvent {
 			startIndex: number,
 			option: EventListenerOptions
 		) {
-			let currentParam: boolean | EventListenerOptions = args1[startIndex];
+			let currentParam: EventListenerOptions | boolean = args1[startIndex];
 			if (typeof currentParam === "boolean") {
 				option.capture = currentParam;
 			} else if (
@@ -527,14 +535,26 @@ export class DOMUtilsEvent {
 		}
 		let eventTypeList: string[] = [];
 		if (Array.isArray(eventType)) {
-			eventTypeList = eventTypeList.concat(eventType as string[]);
+			eventTypeList = eventTypeList.concat(
+				eventType.filter(
+					(eventTypeItem) =>
+						typeof eventTypeItem === "string" && eventTypeItem.toString() !== ""
+				)
+			);
 		} else if (typeof eventType === "string") {
-			eventTypeList = eventTypeList.concat(eventType.split(" "));
+			eventTypeList = eventTypeList.concat(
+				eventType.split(" ").filter((eventTypeItem) => eventTypeItem !== "")
+			);
 		}
 		// 子元素选择器
 		let selectorList: string[] = [];
 		if (Array.isArray(selector)) {
-			selectorList = selectorList.concat(selector);
+			selectorList = selectorList.concat(
+				selector.filter(
+					(selectorItem) =>
+						typeof selectorItem === "string" && selectorItem.toString() !== ""
+				)
+			);
 		} else if (typeof selector === "string") {
 			selectorList.push(selector);
 		}
@@ -554,10 +574,12 @@ export class DOMUtilsEvent {
 			capture: false,
 		};
 		if (typeof selector === "function") {
-			/* 这是为没有selector的情况 */
+			// 这是为没有selector的情况
+			// 那么它就是callback
 			listenerCallBack = selector;
 			listenerOption = getOption(args, 3, listenerOption);
 		} else {
+			// 这是存在selector的情况
 			listenerOption = getOption(args, 4, listenerOption);
 		}
 		// 是否移除所有事件
@@ -574,11 +596,11 @@ export class DOMUtilsEvent {
 		}
 		elementList.forEach((elementItem) => {
 			/* 获取对象上的事件 */
-			// @ts-ignore
-			let elementEvents = elementItem[DOMUtilsData.SymbolEvents] || {};
+			let elementEvents: {
+				[key: string]: DOMUtilsEventListenerOptionsAttribute[];
+			} = Reflect.get(elementItem, DOMUtilsData.SymbolEvents) || {};
 			eventTypeList.forEach((eventName) => {
-				let handlers: DOMUtilsEventListenerOptionsAttribute[] =
-					elementEvents[eventName] || [];
+				let handlers = elementEvents[eventName] || [];
 				if (typeof filter === "function") {
 					handlers = handlers.filter(filter);
 				}
@@ -619,8 +641,7 @@ export class DOMUtilsEvent {
 					DOMUtilsCommonUtils.delete(elementEvents, eventType);
 				}
 			});
-			// @ts-ignore
-			elementItem[DOMUtilsData.SymbolEvents] = elementEvents;
+			Reflect.set(elementItem, DOMUtilsData.SymbolEvents, elementEvents);
 		});
 	}
 	/**
@@ -687,8 +708,8 @@ export class DOMUtilsEvent {
 							capture: handler["option"]["capture"],
 						});
 					}
-					// @ts-ignore
-					DOMUtilsCommonUtils.delete(elementItem[symbolEvents], eventName);
+					let events = Reflect.get(elementItem, symbolEvents);
+					DOMUtilsCommonUtils.delete(events, eventName);
 				});
 			});
 		});
@@ -1301,6 +1322,7 @@ export class DOMUtilsEvent {
 	 * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
 	 * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
 	 * @param selector 选择器
+	 * @param parent 指定父元素
 	 * @example
 	 * DOMUtils.selector("div:contains('测试')")
 	 * > div.xxx
@@ -1312,11 +1334,18 @@ export class DOMUtilsEvent {
 	 * > div.xxx
 	 */
 	selector<K extends keyof HTMLElementTagNameMap>(
-		selector: K
+		selector: K,
+		parent?: Element | Document | DocumentFragment | ShadowRoot
 	): HTMLElementTagNameMap[K] | undefined;
-	selector<E extends Element = Element>(selector: string): E | undefined;
-	selector<E extends Element = Element>(selector: string) {
-		return this.selectorAll<E>(selector)[0];
+	selector<E extends Element = Element>(
+		selector: string,
+		parent?: Element | Document | DocumentFragment | ShadowRoot
+	): E | undefined;
+	selector<E extends Element = Element>(
+		selector: string,
+		parent?: Element | Document | DocumentFragment | ShadowRoot
+	) {
+		return this.selectorAll<E>(selector, parent)[0];
 	}
 	/**
 	 * 选择器，可使用以下的额外语法
@@ -1325,6 +1354,7 @@ export class DOMUtilsEvent {
 	 * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
 	 * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
 	 * @param selector 选择器
+	 * @param parent 指定父元素
 	 * @example
 	 * DOMUtils.selectorAll("div:contains('测试')")
 	 * > [div.xxx]
@@ -1339,18 +1369,24 @@ export class DOMUtilsEvent {
 	 * > [div.xxx]
 	 */
 	selectorAll<K extends keyof HTMLElementTagNameMap>(
-		selector: K
+		selector: K,
+		parent?: Element | Document | DocumentFragment | ShadowRoot
 	): HTMLElementTagNameMap[K][];
-	selectorAll<E extends Element = Element>(selector: string): E[];
-	selectorAll<E extends Element = Element>(selector: string) {
+	selectorAll<E extends Element = Element>(
+		selector: string,
+		parent?: Element | Document | DocumentFragment | ShadowRoot
+	): E[];
+	selectorAll<E extends Element = Element>(
+		selector: string,
+		parent?: Element | Document | DocumentFragment | ShadowRoot
+	) {
 		const context = this;
+		parent = parent || context.windowApi.document;
 		selector = selector.trim();
 		if (selector.match(/[^\s]{1}:empty$/gi)) {
 			// empty 语法
 			selector = selector.replace(/:empty$/gi, "");
-			return Array.from(
-				context.windowApi.document.querySelectorAll<E>(selector)
-			).filter(($ele) => {
+			return Array.from(parent.querySelectorAll<E>(selector)).filter(($ele) => {
 				return $ele?.innerHTML?.trim() === "";
 			});
 		} else if (
@@ -1361,9 +1397,7 @@ export class DOMUtilsEvent {
 			let textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
 			let text = textMatch![2];
 			selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
-			return Array.from(
-				context.windowApi.document.querySelectorAll<E>(selector)
-			).filter(($ele) => {
+			return Array.from(parent.querySelectorAll<E>(selector)).filter(($ele) => {
 				// @ts-ignore
 				return ($ele?.textContent || $ele?.innerText)?.includes(text);
 			});
@@ -1382,17 +1416,13 @@ export class DOMUtilsEvent {
 			}
 			let regexp = new RegExp(pattern, flags);
 			selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
-			return Array.from(
-				context.windowApi.document.querySelectorAll<E>(selector)
-			).filter(($ele) => {
+			return Array.from(parent.querySelectorAll<E>(selector)).filter(($ele) => {
 				// @ts-ignore
 				return Boolean(($ele?.textContent || $ele?.innerText)?.match(regexp));
 			});
 		} else {
 			// 普通语法
-			return Array.from(
-				context.windowApi.document.querySelectorAll<E>(selector)
-			);
+			return Array.from(parent.querySelectorAll<E>(selector));
 		}
 	}
 	/**