@whitesev/domutils 1.3.7 → 1.4.0

package/src/DOMUtils.ts

@@ -1,13 +1,11 @@
 import { DOMUtilsCommonUtils } from "./DOMUtilsCommonUtils";
-import {
-	type DOMUtilsCreateElementAttributesMap,
-	DOMUtilsEvent,
-} from "./DOMUtilsEvent";
+import { DOMUtilsEvent } from "./DOMUtilsEvent";
+import type { DOMUtilsCreateElementAttributesMap } from "./types/DOMUtilsEvent";
 import {
 	ParseHTMLReturnType,
 	type DOMUtilsTargetElementType,
 } from "./types/global";
-import { type UtilsWindowApiOption } from "./WindowApi";
+import type { WindowApiOption } from "./types/WindowApi";
 
 /**
  * 判断是否是元素列表
@@ -18,11 +16,11 @@ export const isNodeList = ($ele: any): $ele is any[] | NodeList => {
 };
 
 class DOMUtils extends DOMUtilsEvent {
-	constructor(option?: UtilsWindowApiOption) {
+	constructor(option?: WindowApiOption) {
 		super(option);
 	}
 	/** 版本号 */
-	version = "2024.10.23";
+	version = "2024.11.6";
 	/**
 	 * 获取元素的属性值
 	 * @param element 目标元素
@@ -489,9 +487,10 @@ class DOMUtils extends DOMUtilsEvent {
 		element:
 			| HTMLInputElement
 			| HTMLTextAreaElement
+			| HTMLSelectElement
 			| string
-			| (HTMLInputElement | HTMLTextAreaElement)[]
-			| NodeListOf<HTMLInputElement | HTMLTextAreaElement>,
+			| (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)[]
+			| NodeListOf<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
 		value: string | boolean | number
 	): void;
 	/**
@@ -505,9 +504,10 @@ class DOMUtils extends DOMUtilsEvent {
 		element:
 			| HTMLInputElement
 			| HTMLTextAreaElement
+			| HTMLSelectElement
 			| string
-			| (HTMLInputElement | HTMLTextAreaElement)[]
-			| NodeListOf<HTMLInputElement | HTMLTextAreaElement>
+			| (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)[]
+			| NodeListOf<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
 	): string;
 	/**
 	 * 获取value属性值
@@ -521,16 +521,18 @@ class DOMUtils extends DOMUtilsEvent {
 		element:
 			| HTMLInputElement
 			| HTMLTextAreaElement
-			| (HTMLInputElement | HTMLTextAreaElement)[]
-			| NodeListOf<HTMLInputElement | HTMLTextAreaElement>
+			| HTMLSelectElement
+			| (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)[]
+			| NodeListOf<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
 	): boolean | string;
 	val(
 		element:
 			| HTMLInputElement
 			| HTMLTextAreaElement
+			| HTMLSelectElement
 			| string
-			| (HTMLInputElement | HTMLTextAreaElement)[]
-			| NodeListOf<HTMLInputElement | HTMLTextAreaElement>,
+			| (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)[]
+			| NodeListOf<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
 		value?: string | boolean | number
 	) {
 		let DOMUtilsContext = this;
@@ -785,6 +787,44 @@ class DOMUtils extends DOMUtilsEvent {
 			element.classList.add(itemClassName);
 		});
 	}
+	/**
+	 * 判断元素是否存在className
+	 * @param element
+	 * @param className
+	 */
+	hasClass(
+		element: DOMUtilsTargetElementType,
+		className: string | string[]
+	): boolean {
+		let DOMUtilsContext = this;
+		if (typeof element === "string") {
+			element = DOMUtilsContext.selectorAll(element);
+		}
+		if (element == null) {
+			return false;
+		}
+		if (isNodeList(element)) {
+			let flag = true;
+			for (let index = 0; index < element.length; index++) {
+				const $ele = element[index] as HTMLElement;
+				flag = flag && DOMUtilsContext.hasClass($ele, className);
+			}
+			return flag;
+		}
+		if (!element?.classList) {
+			return false;
+		}
+		if (!Array.isArray(className)) {
+			className = className.split(" ");
+		}
+		for (let index = 0; index < className.length; index++) {
+			const item = className[index].trim();
+			if (!element.classList.contains(item)) {
+				return false;
+			}
+		}
+		return true;
+	}
 	/**
 	 * 函数在元素内部末尾添加子元素或HTML字符串
 	 * @param element 目标元素
@@ -1008,9 +1048,7 @@ class DOMUtils extends DOMUtilsEvent {
 	offset(element: HTMLElement | string) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsContext.windowApi.document.querySelector(
-				element
-			) as HTMLElement;
+			element = DOMUtilsContext.selector(element) as HTMLElement;
 		}
 		if (element == null) {
 			return;
@@ -1053,8 +1091,7 @@ class DOMUtils extends DOMUtilsEvent {
 	) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element =
-				DOMUtilsContext.windowApi.document.querySelector<HTMLElement>(element)!;
+			element = DOMUtilsContext.selector<HTMLElement>(element)!;
 		}
 		if (element == null) {
 			return;
@@ -1161,9 +1198,7 @@ class DOMUtils extends DOMUtilsEvent {
 				.clientHeight;
 		}
 		if (typeof element === "string") {
-			element = DOMUtilsContext.windowApi.document.querySelector(
-				element
-			) as HTMLElement;
+			element = DOMUtilsContext.selector(element) as HTMLElement;
 		}
 		if (element == null) {
 			// @ts-ignore
@@ -1261,9 +1296,7 @@ class DOMUtils extends DOMUtilsEvent {
 			return DOMUtilsContext.windowApi.window.innerWidth;
 		}
 		if (typeof element === "string") {
-			element = DOMUtilsContext.windowApi.document.querySelector(
-				element
-			) as HTMLElement;
+			element = DOMUtilsContext.selector(element) as HTMLElement;
 		}
 		if (element == null) {
 			// @ts-ignore
@@ -1312,9 +1345,7 @@ class DOMUtils extends DOMUtilsEvent {
 			return DOMUtilsContext.windowApi.window.innerHeight;
 		}
 		if (typeof element === "string") {
-			element = DOMUtilsContext.windowApi.document.querySelector(
-				element
-			) as HTMLElement;
+			element = DOMUtilsContext.selector(element) as HTMLElement;
 		}
 		if (element == null) {
 			// @ts-ignore
@@ -1469,9 +1500,7 @@ class DOMUtils extends DOMUtilsEvent {
 	prev(element: HTMLElement | string) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsContext.windowApi.document.querySelector(
-				element
-			) as HTMLElement;
+			element = DOMUtilsContext.selector(element) as HTMLElement;
 		}
 		if (element == null) {
 			return;
@@ -1493,9 +1522,7 @@ class DOMUtils extends DOMUtilsEvent {
 	next(element: HTMLElement | string) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsContext.windowApi.document.querySelector(
-				element
-			) as HTMLElement;
+			element = DOMUtilsContext.selector(element) as HTMLElement;
 		}
 		if (element == null) {
 			return;
@@ -1529,9 +1556,7 @@ class DOMUtils extends DOMUtilsEvent {
 	siblings(element: HTMLElement | string) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsContext.windowApi.document.querySelector(
-				element
-			) as HTMLElement;
+			element = DOMUtilsContext.selector(element) as HTMLElement;
 		}
 		if (element == null) {
 			return;
@@ -1576,18 +1601,15 @@ class DOMUtils extends DOMUtilsEvent {
 	parent(element: HTMLElement | NodeList | string | HTMLElement[]) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsContext.windowApi.document.querySelector(
-				element
-			) as HTMLElement;
+			element = DOMUtilsContext.selector<HTMLElement>(element)!;
 		}
 		if (element == null) {
 			return;
 		}
-		if (element instanceof NodeList || element instanceof Array) {
-			element = element as HTMLElement[];
+		if (isNodeList(element)) {
 			let resultArray: HTMLElement[] = [];
-			element.forEach((eleItem) => {
-				resultArray.push(DOMUtilsContext.parent(eleItem));
+			element.forEach(($ele) => {
+				resultArray.push(DOMUtilsContext.parent($ele as HTMLElement));
 			});
 			return resultArray;
 		} else {
@@ -1927,7 +1949,7 @@ class DOMUtils extends DOMUtilsEvent {
 	 * @param option
 	 * @returns
 	 */
-	createDOMUtils(option?: UtilsWindowApiOption) {
+	createDOMUtils(option?: WindowApiOption) {
 		return new DOMUtils(option);
 	}
 	/**

package/src/DOMUtilsCommonUtils.ts

@@ -1,11 +1,12 @@
-import { UtilsWindowApiOption } from "./WindowApi";
+import { WindowApi } from "./WindowApi";
 
 /** 通用工具类 */
 const DOMUtilsCommonUtils = {
-	windowApi: {
-		window: window,
+	windowApi: new WindowApi({
 		document: document,
-	} as UtilsWindowApiOption,
+		window: window,
+		top: top!,
+	}),
 	/**
 	 * 判断元素是否已显示或已连接
 	 * @param element

package/src/DOMUtilsData.ts

@@ -1,6 +1,6 @@
 /* 数据 */
 const DOMUtilsData = {
-	/** .on绑定的事件 */
+	/** .on添加在元素存储的事件 */
 	SymbolEvents: Symbol(
 		"events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
 	),

package/src/DOMUtilsEvent.ts

@@ -2,251 +2,19 @@ import { isNodeList } from "./DOMUtils";
 import { DOMUtilsCommonUtils } from "./DOMUtilsCommonUtils";
 import { DOMUtilsData } from "./DOMUtilsData";
 import { OriginPrototype } from "./DOMUtilsOriginPrototype";
+import type {
+	DOMUtils_Event,
+	DOMUtils_EventType,
+	DOMUtilsElementEventType,
+	DOMUtilsEventListenerOptionsAttribute,
+} from "./types/DOMUtilsEvent";
 import type { DOMUtilsTargetElementType } from "./types/global";
-import { UtilsWindowApiOption, WindowApi } from "./WindowApi";
-
-export type DOMUtilsEventObject<T extends Node> = Event & {
-	target: T;
-};
-
-export declare type DOMUtilsCreateElementAttributesMap = {
-	style?: string;
-	id?: string;
-	class?: string;
-	"data-"?: string;
-	type?: string;
-	[key: string]: any;
-};
-/**
- * 鼠标事件
- * + https://blog.csdn.net/weixin_68658847/article/details/126939879
- */
-
-export interface DOMUtils_MouseEvent {
-	click: MouseEvent | PointerEvent;
-	contextmenu: MouseEvent | PointerEvent;
-	dblclick: MouseEvent | PointerEvent;
-	mousedown: MouseEvent | PointerEvent;
-	mouseenter: MouseEvent | PointerEvent;
-	mouseleave: MouseEvent | PointerEvent;
-	mousemove: MouseEvent | PointerEvent;
-	mouseover: MouseEvent | PointerEvent;
-	mouseout: MouseEvent | PointerEvent;
-	mouseup: MouseEvent | PointerEvent;
-	hover: MouseEvent;
-}
-export type DOMUtils_MouseEventType = keyof DOMUtils_MouseEvent;
-/**
- * 鼠标事件
- */
-export interface DOMUtils_KeyboardEvent {
-	keydown: KeyboardEvent;
-	keypress: KeyboardEvent;
-	keyup: KeyboardEvent;
-}
-export type DOMUtils_KeyboardEventType = keyof DOMUtils_KeyboardEvent;
-/**
- * 框架/对象事件
- */
-export interface DOMUtils_Frame_Object_Event {
-	abort: Event;
-	beforeunload: Event;
-	error: Event;
-	hashchange: Event;
-	load: Event;
-	pageshow: Event;
-	pagehide: Event;
-	resize: Event;
-	scroll: Event;
-	unload: Event;
-}
-export type DOMUtils_Frame_Object_EventType = keyof DOMUtils_Frame_Object_Event;
-/**
- * 表单事件
- */
-export interface DOMUtils_FormEvent {
-	blur: Event;
-	change: Event;
-	focus: Event;
-	focusin: Event;
-	focusout: Event;
-	input: Event;
-	reset: Event;
-	search: Event;
-}
-export type DOMUtils_FormEventType = keyof DOMUtils_FormEvent;
-
-/**
- * 剪贴板事件
- */
-export interface DOMUtils_ClipboardEvent {
-	copy: ClipboardEvent;
-	cut: ClipboardEvent;
-	paste: ClipboardEvent;
-}
-export type DOMUtils_ClipboardEventType = keyof DOMUtils_ClipboardEvent;
-
-/**
- * 打印事件
- */
-export interface DOMUtils_PrintEvent {
-	afterprint: Event;
-	beforeprint: Event;
-}
-export type DOMUtils_PrintEventType = keyof DOMUtils_PrintEvent;
-
-/**
- * 拖动事件
- */
-export interface DOMUtils_DragEvent {
-	drag: DragEvent;
-	dragend: DragEvent;
-	dragenter: DragEvent;
-	dragleave: DragEvent;
-	dragover: DragEvent;
-	dragstart: DragEvent;
-	drop: DragEvent;
-}
-export type DOMUtils_DragEventType = keyof DOMUtils_DragEvent;
-
-/**
- * 多媒体（Media）事件
- */
-export interface DOMUtils_MediaEvent {
-	abort: Event;
-	canplay: Event;
-	canplaythrough: Event;
-	durationchange: Event;
-	emptied: Event;
-	ended: Event;
-	error: Event;
-	loadeddata: Event;
-	loadedmetadata: Event;
-	loadstart: Event;
-	pause: Event;
-	play: Event;
-	playing: Event;
-	progress: Event;
-	ratechange: Event;
-	seeked: Event;
-	seeking: Event;
-	stalled: Event;
-	suspend: Event;
-	timeupdate: Event;
-	volumechange: Event;
-	waiting: Event;
-}
-export type DOMUtils_MediaEventType = keyof DOMUtils_MediaEvent;
-
-/**
- * 动画事件
- */
-export interface DOMUtils_AnimationEvent {
-	animationend: AnimationEvent;
-	animationiteration: AnimationEvent;
-	animationstart: AnimationEvent;
-}
-export type DOMUtils_AnimationEventType = keyof DOMUtils_AnimationEvent;
-
-/**
- * 过渡事件
- */
-export interface DOMUtils_TransitionEvent {
-	transitionend: TransitionEvent;
-}
-export type DOMUtils_TransitionEventType = keyof DOMUtils_TransitionEvent;
-
-/**
- * 触摸事件
- */
-export interface DOMUtils_TouchEvent {
-	touchstart: TouchEvent;
-	touchmove: TouchEvent;
-	touchend: TouchEvent;
-	touchcancel: TouchEvent;
-	touchenter: TouchEvent;
-	touchleave: TouchEvent;
-}
-export type DOMUtils_TouchEventType = keyof DOMUtils_TouchEvent;
-/**
- * 其它事件
- */
-export interface DOMUtils_OtherEvent {
-	message: Event;
-	online: Event;
-	offline: Event;
-	popstate: Event;
-	show: Event;
-	storage: Event;
-	toggle: Event;
-	wheel: Event;
-	propertychange: Event;
-	fullscreenchange: Event;
-	DOMContentLoaded: Event;
-}
-export type DOMUtils_OtherEventType = keyof DOMUtils_OtherEvent;
-
-/**
- * 全部事件
- */
-export declare type DOMUtils_Event = DOMUtils_MouseEvent &
-	DOMUtils_KeyboardEvent &
-	DOMUtils_Frame_Object_Event &
-	DOMUtils_FormEvent &
-	DOMUtils_ClipboardEvent &
-	DOMUtils_PrintEvent &
-	DOMUtils_DragEvent &
-	DOMUtils_MediaEvent &
-	DOMUtils_AnimationEvent &
-	DOMUtils_TransitionEvent &
-	DOMUtils_TouchEvent &
-	DOMUtils_OtherEvent;
-
-/**
- * 事件类型
- */
-export declare type DOMUtils_EventType = keyof DOMUtils_Event;
-
-/**
- * 元素上的events属性
- */
-export declare interface DOMUtilsEventListenerOptionsAttribute {
-	/**
-	 * 自定义的ownCallBack
-	 */
-	callback: () => void;
-	/**
-	 * 属性配置
-	 */
-	option: AddEventListenerOptions;
-	/**
-	 * 用户添加的事件
-	 */
-	originCallBack: () => void;
-	/**
-	 * 子元素选择器
-	 */
-	selector?: string;
-}
-
-export declare type DOMUtilsElementEventType =
-	| HTMLElement
-	| string
-	| NodeList
-	| (HTMLElement | Window | Document | Element | typeof globalThis)[]
-	| Window
-	| Document
-	| Element
-	| null
-	| typeof globalThis
-	| ShadowRoot
-	| EventTarget
-	| ChildNode
-	| Node;
+import type { WindowApiOption } from "./types/WindowApi";
+import { WindowApi } from "./WindowApi";
 
 export class DOMUtilsEvent {
-	windowApi: UtilsWindowApiOption;
-	constructor(windowApiOption?: UtilsWindowApiOption) {
+	windowApi: typeof WindowApi.prototype;
+	constructor(windowApiOption?: WindowApiOption) {
 		this.windowApi = new WindowApi(windowApiOption);
 	}
 	/**
@@ -967,9 +735,7 @@ export class DOMUtilsEvent {
 	) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsContext.windowApi.document.querySelector(
-				element
-			) as HTMLElement;
+			element = DOMUtilsContext.selectorAll(element);
 		}
 		if (element == null) {
 			return;
@@ -1086,9 +852,7 @@ export class DOMUtilsEvent {
 	) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsContext.windowApi.document.querySelector(
-				element
-			) as HTMLElement;
+			element = DOMUtilsContext.selectorAll(element);
 		}
 		if (element == null) {
 			return;

package/src/WindowApi.ts

@@ -1,17 +1,8 @@
-/**
- * 配置类型
- */
-export type UtilsWindowApiOption = {
-	document: Document;
-	window: Window & typeof globalThis;
-	globalThis: typeof globalThis | Window;
-	self: Window & typeof globalThis;
-	top: Window;
-};
+import type { WindowApiOption } from "./types/WindowApi";
 
 export class WindowApi {
 	/** 默认的配置 */
-	private defaultApi: UtilsWindowApiOption = {
+	private defaultApi: Required<WindowApiOption> = {
 		document: document,
 		window: window,
 		globalThis: globalThis,
@@ -19,11 +10,20 @@ export class WindowApi {
 		top: top!,
 	};
 	/** 使用的配置 */
-	private api: UtilsWindowApiOption;
-	constructor(option?: UtilsWindowApiOption) {
+	private api: Required<WindowApiOption>;
+	constructor(option?: WindowApiOption) {
+		if (option) {
+			if (option.globalThis == null) {
+				option.globalThis = option.window;
+			}
+			if (option.self == null) {
+				option.self = option.window;
+			}
+		}
 		if (!option) {
 			option = Object.assign({}, this.defaultApi);
 		}
+		// @ts-ignore
 		this.api = Object.assign({}, option);
 	}
 	get document() {