@whitesev/domutils 1.5.5 → 1.5.7

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

@@ -2,11 +2,6 @@ import { DOMUtilsEvent } from "./DOMUtilsEvent";
 import type { DOMUtilsCreateElementAttributesMap } from "./types/DOMUtilsEvent";
 import { ParseHTMLReturnType, type DOMUtilsTargetElementType } from "./types/global";
 import type { WindowApiOption } from "./types/WindowApi";
-/**
- * 判断是否是元素列表
- * @param $ele
- */
-export declare const isNodeList: ($ele: any) => $ele is any[] | NodeList;
 declare class DOMUtils extends DOMUtilsEvent {
     constructor(option?: WindowApiOption);
     /** 版本号 */
@@ -72,7 +67,7 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.css("a.xx","display");
      * > "none"
      * */
-    css(element: DOMUtilsTargetElementType, property: keyof CSSStyleDeclaration): string;
+    css(element: DOMUtilsTargetElementType, property: keyof Omit<CSSStyleDeclaration, "zIndex"> | "z-index"): string;
     /**
      * 获取元素的样式属性值
      * @param element 目标元素
@@ -100,7 +95,7 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.css(document.querySelector("a.xx"),"top","10px");
      * DOMUtils.css(document.querySelector("a.xx"),"top",10);
      * */
-    css(element: DOMUtilsTargetElementType, property: keyof CSSStyleDeclaration & string, value: string | number): string;
+    css(element: DOMUtilsTargetElementType, property: (keyof Omit<CSSStyleDeclaration, "zIndex"> | "z-index") & string, value: string | number): string;
     /**
      * 设置元素的样式属性
      * @param element 目标元素
@@ -116,7 +111,9 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.css(document.querySelector("a.xx"),{ top: 10 });
      * */
     css(element: DOMUtilsTargetElementType, property: {
-        [P in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[P];
+        [P in keyof Omit<CSSStyleDeclaration, "zIndex">]?: CSSStyleDeclaration[P];
+    } | {
+        "z-index": string | number;
     } | {
         [key: string]: string | number;
     }): string;

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

@@ -60,5 +60,10 @@ declare const DOMUtilsCommonUtils: {
      * 配合 .setInterval 使用
      */
     clearInterval(timeId: number | undefined): void;
+    /**
+     * 判断是否是元素列表
+     * @param $ele
+     */
+    isNodeList($ele: any): $ele is any[] | NodeList;
 };
 export { DOMUtilsCommonUtils };

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

@@ -417,4 +417,13 @@ export declare class DOMUtilsEvent {
      */
     selectorAll<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K][];
     selectorAll<E extends Element = Element>(selector: string): E[];
+    /**
+     * 匹配元素，可使用以下的额外语法
+     */
+    matches($el: HTMLElement | Element | null | undefined, selector: string): boolean;
+    /**
+     * 根据选择器获取上层元素，可使用以下的额外语法
+     */
+    closest<K extends keyof HTMLElementTagNameMap>($el: HTMLElement | Element, selector: string): HTMLElementTagNameMap[K] | null;
+    closest<E extends Element = Element>($el: HTMLElement | Element, selector: string): E | null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/domutils",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "description": "使用js重新对jQuery的部分函数进行了仿写",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/DOMUtils.ts

@@ -7,20 +7,12 @@ import {
 } from "./types/global";
 import type { WindowApiOption } from "./types/WindowApi";
 
-/**
- * 判断是否是元素列表
- * @param $ele
- */
-export const isNodeList = ($ele: any): $ele is any[] | NodeList => {
-	return Array.isArray($ele) || $ele instanceof NodeList;
-};
-
 class DOMUtils extends DOMUtilsEvent {
 	constructor(option?: WindowApiOption) {
 		super(option);
 	}
 	/** 版本号 */
-	version = "2025.5.26";
+	version = "2025.5.30";
 	/**
 	 * 获取元素的属性值
 	 * @param element 目标元素
@@ -55,7 +47,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			if (attrValue == null) {
 				// 获取属性
 				return DOMUtilsContext.attr(
@@ -155,7 +147,7 @@ class DOMUtils extends DOMUtilsEvent {
 	 * */
 	css(
 		element: DOMUtilsTargetElementType,
-		property: keyof CSSStyleDeclaration
+		property: keyof Omit<CSSStyleDeclaration, "zIndex"> | "z-index"
 	): string;
 	/**
 	 * 获取元素的样式属性值
@@ -186,7 +178,7 @@ class DOMUtils extends DOMUtilsEvent {
 	 * */
 	css(
 		element: DOMUtilsTargetElementType,
-		property: keyof CSSStyleDeclaration & string,
+		property: (keyof Omit<CSSStyleDeclaration, "zIndex"> | "z-index") & string,
 		value: string | number
 	): string;
 	/**
@@ -207,7 +199,13 @@ class DOMUtils extends DOMUtilsEvent {
 		element: DOMUtilsTargetElementType,
 		property:
 			| {
-					[P in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[P];
+					[P in keyof Omit<
+						CSSStyleDeclaration,
+						"zIndex"
+					>]?: CSSStyleDeclaration[P];
+			  }
+			| {
+					"z-index": string | number;
 			  }
 			| {
 					[key: string]: string | number;
@@ -216,10 +214,10 @@ class DOMUtils extends DOMUtilsEvent {
 	css(
 		element: DOMUtilsTargetElementType,
 		property:
-			| keyof CSSStyleDeclaration
+			| keyof Omit<CSSStyleDeclaration, "zIndex">
 			| string
 			| {
-					[P in keyof CSSStyleDeclaration]?:
+					[P in keyof Omit<CSSStyleDeclaration, "zIndex">]?:
 						| string
 						| number
 						| CSSStyleDeclaration[P];
@@ -258,7 +256,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			if (typeof property === "string") {
 				if (value == null) {
 					// 获取属性
@@ -350,7 +348,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			if (text == null) {
 				// 获取
 				return DOMUtilsContext.text(element[0] as HTMLElement);
@@ -411,7 +409,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			if (html == null) {
 				// 获取
 				return DOMUtilsContext.html(element[0] as HTMLElement);
@@ -550,7 +548,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			if (value == null) {
 				// 获取
 				return DOMUtilsContext.val(element[0] as HTMLInputElement);
@@ -620,7 +618,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			if (propValue == null) {
 				// 获取
 				return DOMUtilsContext.prop(element[0] as HTMLElement, propName);
@@ -659,7 +657,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.removeAttr($ele as HTMLElement, attrName);
@@ -688,7 +686,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.removeClass($ele as HTMLElement, className);
@@ -724,7 +722,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.removeProp($ele as HTMLElement, propName);
@@ -753,7 +751,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.replaceWith($ele as HTMLElement, newElement);
@@ -782,7 +780,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.addClass($ele as HTMLElement, className);
@@ -815,7 +813,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return false;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			let flag = true;
 			for (let index = 0; index < element.length; index++) {
 				const $ele = element[index] as HTMLElement;
@@ -862,7 +860,7 @@ class DOMUtils extends DOMUtilsEvent {
 			return;
 		}
 
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.append($ele as HTMLElement, content);
@@ -911,7 +909,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.prepend($ele as HTMLElement, content);
@@ -949,7 +947,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.after($ele as HTMLElement, content);
@@ -989,7 +987,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.before($ele as HTMLElement, content);
@@ -1027,7 +1025,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			element.forEach(($ele) => {
 				DOMUtilsContext.remove($ele as HTMLElement);
 			});
@@ -1051,7 +1049,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.empty($ele as HTMLElement);
@@ -1419,7 +1417,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.animate(
@@ -1490,7 +1488,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.wrap($ele as HTMLElement, wrapperHTML);
@@ -1630,7 +1628,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			let resultArray: HTMLElement[] = [];
 			element.forEach(($ele) => {
 				resultArray.push(DOMUtilsContext.parent($ele as HTMLElement));
@@ -1854,7 +1852,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (typeof element === "string") {
 			element = DOMUtilsContext.selectorAll(element);
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.fadeIn($ele as HTMLElement, duration, callback);
@@ -1907,7 +1905,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (typeof element === "string") {
 			element = DOMUtilsContext.selectorAll(element);
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.fadeOut($ele as HTMLElement, duration, callback);
@@ -1951,7 +1949,7 @@ class DOMUtils extends DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.toggle($ele as HTMLElement);

package/src/DOMUtilsCommonUtils.ts

@@ -184,5 +184,12 @@ const DOMUtilsCommonUtils = {
 			globalThis.clearInterval(timeId);
 		}
 	},
+	/**
+	 * 判断是否是元素列表
+	 * @param $ele
+	 */
+	isNodeList($ele: any): $ele is any[] | NodeList {
+		return Array.isArray($ele) || $ele instanceof NodeList;
+	},
 };
 export { DOMUtilsCommonUtils };

package/src/DOMUtilsEvent.ts

@@ -1,4 +1,3 @@
-import { isNodeList } from "./DOMUtils";
 import { DOMUtilsCommonUtils } from "./DOMUtilsCommonUtils";
 import { DOMUtilsData } from "./DOMUtilsData";
 import { OriginPrototype } from "./DOMUtilsOriginPrototype";
@@ -279,13 +278,15 @@ export class DOMUtilsEvent {
 							: elementItem;
 					let findValue = selectorList.find((selectorItem) => {
 						// 判断目标元素是否匹配选择器
-						if (eventTarget?.matches(selectorItem)) {
+						if (DOMUtilsContext.matches(eventTarget, selectorItem)) {
 							/* 当前目标可以被selector所匹配到 */
 							return true;
 						}
 						/* 在上层与主元素之间寻找可以被selector所匹配到的 */
-						let $closestMatches =
-							eventTarget?.closest<HTMLElement>(selectorItem);
+						let $closestMatches = DOMUtilsContext.closest<HTMLElement>(
+							eventTarget,
+							selectorItem
+						);
 						if ($closestMatches && totalParent?.contains($closestMatches)) {
 							eventTarget = $closestMatches;
 							return true;
@@ -910,7 +911,7 @@ export class DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.click(
@@ -960,7 +961,7 @@ export class DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.focus(
@@ -1015,7 +1016,7 @@ export class DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.focus(
@@ -1064,7 +1065,7 @@ export class DOMUtilsEvent {
 		if (element == null) {
 			return;
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.hover($ele as HTMLElement, handler, option);
@@ -1101,7 +1102,7 @@ export class DOMUtilsEvent {
 		if (typeof element === "string") {
 			element = DOMUtilsContext.selectorAll(element);
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.keyup($ele as HTMLElement, handler, option);
@@ -1137,7 +1138,7 @@ export class DOMUtilsEvent {
 		if (typeof element === "string") {
 			element = DOMUtilsContext.selectorAll(element);
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.keydown($ele as HTMLElement, handler, option);
@@ -1173,7 +1174,7 @@ export class DOMUtilsEvent {
 		if (typeof element === "string") {
 			element = DOMUtilsContext.selectorAll(element);
 		}
-		if (isNodeList(element)) {
+		if (DOMUtilsCommonUtils.isNodeList(element)) {
 			// 设置
 			element.forEach(($ele) => {
 				DOMUtilsContext.keypress($ele as HTMLElement, handler, option);
@@ -1394,4 +1395,132 @@ export class DOMUtilsEvent {
 			);
 		}
 	}
+	/**
+	 * 匹配元素，可使用以下的额外语法
+	 */
+	matches(
+		$el: HTMLElement | Element | null | undefined,
+		selector: string
+	): boolean {
+		selector = selector.trim();
+		if ($el == null) {
+			return false;
+		}
+
+		if (selector.match(/[^\s]{1}:empty$/gi)) {
+			// empty 语法
+			selector = selector.replace(/:empty$/gi, "");
+			return $el.matches(selector) && $el?.innerHTML?.trim() === "";
+		} else if (
+			selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
+			selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)
+		) {
+			// contains 语法
+			let textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
+			let text = textMatch![2];
+			selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
+			// @ts-ignore
+			let content = $el?.textContent || $el?.innerText;
+			if (typeof content !== "string") {
+				content = "";
+			}
+			return $el.matches(selector) && content?.includes(text);
+		} else if (
+			selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
+			selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)
+		) {
+			// regexp 语法
+			let textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
+			let pattern = textMatch![2];
+			let flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
+			let flags = "";
+			if (flagMatch) {
+				pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
+				flags = flagMatch[3];
+			}
+			let regexp = new RegExp(pattern, flags);
+			selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
+			// @ts-ignore
+			let content = $el?.textContent || $el?.innerText;
+			if (typeof content !== "string") {
+				content = "";
+			}
+			return $el.matches(selector) && Boolean(content?.match(regexp));
+		} else {
+			// 普通语法
+			return $el.matches(selector);
+		}
+	}
+	/**
+	 * 根据选择器获取上层元素，可使用以下的额外语法
+	 */
+	closest<K extends keyof HTMLElementTagNameMap>(
+		$el: HTMLElement | Element,
+		selector: string
+	): HTMLElementTagNameMap[K] | null;
+	closest<E extends Element = Element>(
+		$el: HTMLElement | Element,
+		selector: string
+	): E | null;
+	closest<E extends Element = Element>(
+		$el: HTMLElement | Element,
+		selector: string
+	): E | null {
+		selector = selector.trim();
+
+		if (selector.match(/[^\s]{1}:empty$/gi)) {
+			// empty 语法
+			selector = selector.replace(/:empty$/gi, "");
+			let $closest = $el?.closest<E>(selector);
+			if ($closest && $closest?.innerHTML?.trim() === "") {
+				return $closest;
+			}
+			return null;
+		} else if (
+			selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
+			selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)
+		) {
+			// contains 语法
+			let textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
+			let text = textMatch![2];
+			selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
+			let $closest = $el?.closest<E>(selector);
+			if ($closest) {
+				// @ts-ignore
+				let content = $el?.textContent || $el?.innerText;
+				if (typeof content === "string" && content.includes(text)) {
+					return $closest;
+				}
+			}
+			return null;
+		} else if (
+			selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
+			selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)
+		) {
+			// regexp 语法
+			let textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
+			let pattern = textMatch![2];
+			let flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
+			let flags = "";
+			if (flagMatch) {
+				pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
+				flags = flagMatch[3];
+			}
+			let regexp = new RegExp(pattern, flags);
+			selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
+			let $closest = $el?.closest<E>(selector);
+			if ($closest) {
+				// @ts-ignore
+				let content = $el?.textContent || $el?.innerText;
+				if (typeof content === "string" && content.match(regexp)) {
+					return $closest;
+				}
+			}
+			return null;
+		} else {
+			// 普通语法
+			let $closest = $el?.closest<E>(selector);
+			return $closest;
+		}
+	}
 }