DOMUtils

使用js重新对jQuery的部分函数进行了仿写

当前为 2025-06-06 提交的版本,查看 最新版本

此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.gf.qytechs.cn/scripts/465772/1602861/DOMUtils.js

  1. (function (global, factory) {
  2. typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  3. typeof define === 'function' && define.amd ? define(factory) :
  4. (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DOMUtils = factory());
  5. })(this, (function () { 'use strict';
  6.  
  7. class WindowApi {
  8. /** 默认的配置 */
  9. defaultApi = {
  10. document: document,
  11. window: window,
  12. globalThis: globalThis,
  13. self: self,
  14. top: top,
  15. };
  16. /** 使用的配置 */
  17. api;
  18. constructor(option) {
  19. if (option) {
  20. if (option.globalThis == null) {
  21. option.globalThis = option.window;
  22. }
  23. if (option.self == null) {
  24. option.self = option.window;
  25. }
  26. }
  27. if (!option) {
  28. option = Object.assign({}, this.defaultApi);
  29. }
  30. // @ts-ignore
  31. this.api = Object.assign({}, option);
  32. }
  33. get document() {
  34. return this.api.document;
  35. }
  36. get window() {
  37. return this.api.window;
  38. }
  39. get globalThis() {
  40. return this.api.globalThis;
  41. }
  42. get self() {
  43. return this.api.self;
  44. }
  45. get top() {
  46. return this.api.top;
  47. }
  48. }
  49.  
  50. const createCache = (lastNumberWeakMap) => {
  51. return (collection, nextNumber) => {
  52. lastNumberWeakMap.set(collection, nextNumber);
  53. return nextNumber;
  54. };
  55. };
  56.  
  57. /*
  58. * The value of the constant Number.MAX_SAFE_INTEGER equals (2 ** 53 - 1) but it
  59. * is fairly new.
  60. */
  61. const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER === undefined ? 9007199254740991 : Number.MAX_SAFE_INTEGER;
  62. const TWO_TO_THE_POWER_OF_TWENTY_NINE = 536870912;
  63. const TWO_TO_THE_POWER_OF_THIRTY = TWO_TO_THE_POWER_OF_TWENTY_NINE * 2;
  64. const createGenerateUniqueNumber = (cache, lastNumberWeakMap) => {
  65. return (collection) => {
  66. const lastNumber = lastNumberWeakMap.get(collection);
  67. /*
  68. * Let's try the cheapest algorithm first. It might fail to produce a new
  69. * number, but it is so cheap that it is okay to take the risk. Just
  70. * increase the last number by one or reset it to 0 if we reached the upper
  71. * bound of SMIs (which stands for small integers). When the last number is
  72. * unknown it is assumed that the collection contains zero based consecutive
  73. * numbers.
  74. */
  75. let nextNumber = lastNumber === undefined ? collection.size : lastNumber < TWO_TO_THE_POWER_OF_THIRTY ? lastNumber + 1 : 0;
  76. if (!collection.has(nextNumber)) {
  77. return cache(collection, nextNumber);
  78. }
  79. /*
  80. * If there are less than half of 2 ** 30 numbers stored in the collection,
  81. * the chance to generate a new random number in the range from 0 to 2 ** 30
  82. * is at least 50%. It's benifitial to use only SMIs because they perform
  83. * much better in any environment based on V8.
  84. */
  85. if (collection.size < TWO_TO_THE_POWER_OF_TWENTY_NINE) {
  86. while (collection.has(nextNumber)) {
  87. nextNumber = Math.floor(Math.random() * TWO_TO_THE_POWER_OF_THIRTY);
  88. }
  89. return cache(collection, nextNumber);
  90. }
  91. // Quickly check if there is a theoretical chance to generate a new number.
  92. if (collection.size > MAX_SAFE_INTEGER) {
  93. throw new Error('Congratulations, you created a collection of unique numbers which uses all available integers!');
  94. }
  95. // Otherwise use the full scale of safely usable integers.
  96. while (collection.has(nextNumber)) {
  97. nextNumber = Math.floor(Math.random() * MAX_SAFE_INTEGER);
  98. }
  99. return cache(collection, nextNumber);
  100. };
  101. };
  102.  
  103. const LAST_NUMBER_WEAK_MAP = new WeakMap();
  104. const cache = createCache(LAST_NUMBER_WEAK_MAP);
  105. const generateUniqueNumber = createGenerateUniqueNumber(cache, LAST_NUMBER_WEAK_MAP);
  106.  
  107. const isCallNotification = (message) => {
  108. return message.method !== undefined && message.method === 'call';
  109. };
  110.  
  111. const isClearResponse = (message) => {
  112. return typeof message.id === 'number' && typeof message.result === 'boolean';
  113. };
  114.  
  115. const load = (url) => {
  116. // Prefilling the Maps with a function indexed by zero is necessary to be compliant with the specification.
  117. const scheduledIntervalFunctions = new Map([[0, () => { }]]); // tslint:disable-line no-empty
  118. const scheduledTimeoutFunctions = new Map([[0, () => { }]]); // tslint:disable-line no-empty
  119. const unrespondedRequests = new Map();
  120. const worker = new Worker(url);
  121. worker.addEventListener('message', ({ data }) => {
  122. if (isCallNotification(data)) {
  123. const { params: { timerId, timerType } } = data;
  124. if (timerType === 'interval') {
  125. const idOrFunc = scheduledIntervalFunctions.get(timerId);
  126. if (typeof idOrFunc === undefined) {
  127. throw new Error('The timer is in an undefined state.');
  128. }
  129. if (typeof idOrFunc === 'number') {
  130. const timerIdAndTimerType = unrespondedRequests.get(idOrFunc);
  131. if (timerIdAndTimerType === undefined ||
  132. timerIdAndTimerType.timerId !== timerId ||
  133. timerIdAndTimerType.timerType !== timerType) {
  134. throw new Error('The timer is in an undefined state.');
  135. }
  136. }
  137. else if (typeof idOrFunc === 'function') {
  138. idOrFunc();
  139. }
  140. }
  141. else if (timerType === 'timeout') {
  142. const idOrFunc = scheduledTimeoutFunctions.get(timerId);
  143. if (typeof idOrFunc === undefined) {
  144. throw new Error('The timer is in an undefined state.');
  145. }
  146. if (typeof idOrFunc === 'number') {
  147. const timerIdAndTimerType = unrespondedRequests.get(idOrFunc);
  148. if (timerIdAndTimerType === undefined ||
  149. timerIdAndTimerType.timerId !== timerId ||
  150. timerIdAndTimerType.timerType !== timerType) {
  151. throw new Error('The timer is in an undefined state.');
  152. }
  153. }
  154. else if (typeof idOrFunc === 'function') {
  155. idOrFunc();
  156. // A timeout can be savely deleted because it is only called once.
  157. scheduledTimeoutFunctions.delete(timerId);
  158. }
  159. }
  160. }
  161. else if (isClearResponse(data)) {
  162. const { id } = data;
  163. const timerIdAndTimerType = unrespondedRequests.get(id);
  164. if (timerIdAndTimerType === undefined) {
  165. throw new Error('The timer is in an undefined state.');
  166. }
  167. const { timerId, timerType } = timerIdAndTimerType;
  168. unrespondedRequests.delete(id);
  169. if (timerType === 'interval') {
  170. scheduledIntervalFunctions.delete(timerId);
  171. }
  172. else {
  173. scheduledTimeoutFunctions.delete(timerId);
  174. }
  175. }
  176. else {
  177. const { error: { message } } = data;
  178. throw new Error(message);
  179. }
  180. });
  181. const clearInterval = (timerId) => {
  182. if (typeof scheduledIntervalFunctions.get(timerId) === 'function') {
  183. const id = generateUniqueNumber(unrespondedRequests);
  184. unrespondedRequests.set(id, { timerId, timerType: 'interval' });
  185. scheduledIntervalFunctions.set(timerId, id);
  186. worker.postMessage({
  187. id,
  188. method: 'clear',
  189. params: { timerId, timerType: 'interval' }
  190. });
  191. }
  192. };
  193. const clearTimeout = (timerId) => {
  194. if (typeof scheduledTimeoutFunctions.get(timerId) === 'function') {
  195. const id = generateUniqueNumber(unrespondedRequests);
  196. unrespondedRequests.set(id, { timerId, timerType: 'timeout' });
  197. scheduledTimeoutFunctions.set(timerId, id);
  198. worker.postMessage({
  199. id,
  200. method: 'clear',
  201. params: { timerId, timerType: 'timeout' }
  202. });
  203. }
  204. };
  205. const setInterval = (func, delay = 0, ...args) => {
  206. const timerId = generateUniqueNumber(scheduledIntervalFunctions);
  207. scheduledIntervalFunctions.set(timerId, () => {
  208. func(...args);
  209. // Doublecheck if the interval should still be rescheduled because it could have been cleared inside of func().
  210. if (typeof scheduledIntervalFunctions.get(timerId) === 'function') {
  211. worker.postMessage({
  212. id: null,
  213. method: 'set',
  214. params: {
  215. delay,
  216. now: performance.timeOrigin + performance.now(),
  217. timerId,
  218. timerType: 'interval'
  219. }
  220. });
  221. }
  222. });
  223. worker.postMessage({
  224. id: null,
  225. method: 'set',
  226. params: {
  227. delay,
  228. now: performance.timeOrigin + performance.now(),
  229. timerId,
  230. timerType: 'interval'
  231. }
  232. });
  233. return timerId;
  234. };
  235. const setTimeout = (func, delay = 0, ...args) => {
  236. const timerId = generateUniqueNumber(scheduledTimeoutFunctions);
  237. scheduledTimeoutFunctions.set(timerId, () => func(...args));
  238. worker.postMessage({
  239. id: null,
  240. method: 'set',
  241. params: {
  242. delay,
  243. now: performance.timeOrigin + performance.now(),
  244. timerId,
  245. timerType: 'timeout'
  246. }
  247. });
  248. return timerId;
  249. };
  250. return {
  251. clearInterval,
  252. clearTimeout,
  253. setInterval,
  254. setTimeout
  255. };
  256. };
  257.  
  258. const createLoadOrReturnBroker = (loadBroker, worker) => {
  259. let broker = null;
  260. return () => {
  261. if (broker !== null) {
  262. return broker;
  263. }
  264. const blob = new Blob([worker], { type: 'application/javascript; charset=utf-8' });
  265. const url = URL.createObjectURL(blob);
  266. broker = loadBroker(url);
  267. // Bug #1: Edge up until v18 didn't like the URL to be revoked directly.
  268. setTimeout(() => URL.revokeObjectURL(url));
  269. return broker;
  270. };
  271. };
  272.  
  273. // This is the minified and stringified code of the worker-timers-worker package.
  274. const worker = `(()=>{"use strict";const e=new Map,t=new Map,r=t=>{const r=e.get(t);return void 0!==r&&(clearTimeout(r),e.delete(t),!0)},s=e=>{const r=t.get(e);return void 0!==r&&(clearTimeout(r),t.delete(e),!0)},o=(e,t)=>{const r=performance.now(),s=e+t-r-performance.timeOrigin;return{expected:r+s,remainingDelay:s}},i=(e,t,r,s)=>{const o=r-performance.now();o>0?e.set(t,setTimeout(i,o,e,t,r,s)):(e.delete(t),postMessage({id:null,method:"call",params:{timerId:t,timerType:s}}))};addEventListener("message",(({data:n})=>{try{if("clear"===n.method){const{id:e,params:{timerId:t,timerType:o}}=n;if("interval"===o)postMessage({id:e,result:r(t)});else{if("timeout"!==o)throw new Error('The given type "'.concat(o,'" is not supported'));postMessage({id:e,result:s(t)})}}else{if("set"!==n.method)throw new Error('The given method "'.concat(n.method,'" is not supported'));{const{params:{delay:r,now:s,timerId:a,timerType:m}}=n;if("interval"===m)((t,r,s)=>{const{expected:n,remainingDelay:a}=o(t,s);e.set(r,setTimeout(i,a,e,r,n,"interval"))})(r,a,s);else{if("timeout"!==m)throw new Error('The given type "'.concat(m,'" is not supported'));((e,r,s)=>{const{expected:n,remainingDelay:a}=o(e,s);t.set(r,setTimeout(i,a,t,r,n,"timeout"))})(r,a,s)}}}}catch(e){postMessage({error:{message:e.message},id:n.id,result:null})}}))})();`; // tslint:disable-line:max-line-length
  275.  
  276. const loadOrReturnBroker = createLoadOrReturnBroker(load, worker);
  277. const clearInterval = (timerId) => loadOrReturnBroker().clearInterval(timerId);
  278. const clearTimeout = (timerId) => loadOrReturnBroker().clearTimeout(timerId);
  279. const setInterval = (...args) => loadOrReturnBroker().setInterval(...args);
  280. const setTimeout$1 = (...args) => loadOrReturnBroker().setTimeout(...args);
  281.  
  282. /** 通用工具类 */
  283. const DOMUtilsCommonUtils = {
  284. windowApi: new WindowApi({
  285. document: document,
  286. window: window,
  287. top: top,
  288. }),
  289. /**
  290. * 判断元素是否已显示或已连接
  291. * @param element
  292. */
  293. isShow(element) {
  294. return Boolean(element.getClientRects().length);
  295. },
  296. /**
  297. * 获取安全的html
  298. */
  299. getSafeHTML(text) {
  300. // @ts-ignore
  301. if (globalThis.trustedTypes) {
  302. // @ts-ignore
  303. const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
  304. createHTML: (html) => html,
  305. });
  306. return policy.createHTML(text);
  307. }
  308. else {
  309. return text;
  310. }
  311. },
  312. /**
  313. * 在CSP策略下设置innerHTML
  314. * @param $el 元素
  315. * @param text 文本
  316. */
  317. setSafeHTML($el, text) {
  318. // 创建 TrustedHTML 策略(需 CSP 允许)
  319. $el.innerHTML = this.getSafeHTML(text);
  320. },
  321. /**
  322. * 用于显示元素并获取它的高度宽度等其它属性
  323. * @param element
  324. */
  325. showElement(element) {
  326. let dupNode = element.cloneNode(true);
  327. dupNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
  328. this.windowApi.document.documentElement.appendChild(dupNode);
  329. return {
  330. /**
  331. * 恢复修改的style
  332. */
  333. recovery() {
  334. dupNode.remove();
  335. },
  336. };
  337. },
  338. /**
  339. * 获取元素上的Float格式的属性px
  340. * @param element
  341. * @param styleName style名
  342. */
  343. getStyleValue(element, styleName) {
  344. let view = null;
  345. let styles = null;
  346. if (element instanceof CSSStyleDeclaration) {
  347. /* 直接就获取了style属性 */
  348. styles = element;
  349. }
  350. else {
  351. view = element.ownerDocument.defaultView;
  352. if (!view || !view.opener) {
  353. view = window;
  354. }
  355. styles = view.getComputedStyle(element);
  356. }
  357. let value = parseFloat(styles[styleName]);
  358. if (isNaN(value)) {
  359. return 0;
  360. }
  361. else {
  362. return value;
  363. }
  364. },
  365. /**
  366. * 判断是否是window,例如window、self、globalThis
  367. * @param target
  368. */
  369. isWin(target) {
  370. if (typeof target !== "object") {
  371. return false;
  372. }
  373. if (target instanceof Node) {
  374. return false;
  375. }
  376. if (target === globalThis) {
  377. return true;
  378. }
  379. if (target === window) {
  380. return true;
  381. }
  382. if (target === self) {
  383. return true;
  384. }
  385. if (target === globalThis) {
  386. return true;
  387. }
  388. if (target === window) {
  389. return true;
  390. }
  391. if (target === self) {
  392. return true;
  393. }
  394. if (typeof unsafeWindow !== "undefined" && target === unsafeWindow) {
  395. return true;
  396. }
  397. if (target?.Math?.toString() !== "[object Math]") {
  398. return false;
  399. }
  400. return true;
  401. },
  402. /**
  403. * 删除对象上的属性
  404. * @param target
  405. * @param propName
  406. */
  407. delete(target, propName) {
  408. if (typeof Reflect === "object" && Reflect.deleteProperty) {
  409. Reflect.deleteProperty(target, propName);
  410. }
  411. else {
  412. delete target[propName];
  413. }
  414. },
  415. /**
  416. * 自动使用 Worker 执行 setTimeout
  417. */
  418. setTimeout(callback, timeout = 0) {
  419. try {
  420. return setTimeout$1(callback, timeout);
  421. }
  422. catch (error) {
  423. return globalThis.setTimeout(callback, timeout);
  424. }
  425. },
  426. /**
  427. * 配合 .setTimeout 使用
  428. */
  429. clearTimeout(timeId) {
  430. try {
  431. if (timeId != null) {
  432. clearTimeout(timeId);
  433. }
  434. }
  435. catch (error) {
  436. }
  437. finally {
  438. globalThis.clearTimeout(timeId);
  439. }
  440. },
  441. /**
  442. * 自动使用 Worker 执行 setInterval
  443. */
  444. setInterval(callback, timeout = 0) {
  445. try {
  446. return setInterval(callback, timeout);
  447. }
  448. catch (error) {
  449. return globalThis.setInterval(callback, timeout);
  450. }
  451. },
  452. /**
  453. * 配合 .setInterval 使用
  454. */
  455. clearInterval(timeId) {
  456. try {
  457. if (timeId != null) {
  458. clearInterval(timeId);
  459. }
  460. }
  461. catch (error) {
  462. }
  463. finally {
  464. globalThis.clearInterval(timeId);
  465. }
  466. },
  467. /**
  468. * 判断是否是元素列表
  469. * @param $ele
  470. */
  471. isNodeList($ele) {
  472. return Array.isArray($ele) || $ele instanceof NodeList;
  473. },
  474. };
  475.  
  476. /* 数据 */
  477. const DOMUtilsData = {
  478. /** .on添加在元素存储的事件 */
  479. SymbolEvents: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
  480. };
  481.  
  482. const OriginPrototype = {
  483. Object: {
  484. defineProperty: Object.defineProperty,
  485. },
  486. };
  487.  
  488. class DOMUtilsEvent {
  489. windowApi;
  490. constructor(windowApiOption) {
  491. this.windowApi = new WindowApi(windowApiOption);
  492. }
  493. on(element, eventType, selector, callback, option) {
  494. /**
  495. * 获取option配置
  496. * @param args
  497. * @param startIndex
  498. * @param option
  499. */
  500. function getOption(args, startIndex, option) {
  501. let currentParam = args[startIndex];
  502. if (typeof currentParam === "boolean") {
  503. option.capture = currentParam;
  504. if (typeof args[startIndex + 1] === "boolean") {
  505. option.once = args[startIndex + 1];
  506. }
  507. if (typeof args[startIndex + 2] === "boolean") {
  508. option.passive = args[startIndex + 2];
  509. }
  510. }
  511. else if (typeof currentParam === "object" &&
  512. ("capture" in currentParam ||
  513. "once" in currentParam ||
  514. "passive" in currentParam ||
  515. "isComposedPath" in currentParam)) {
  516. option.capture = currentParam.capture;
  517. option.once = currentParam.once;
  518. option.passive = currentParam.passive;
  519. option.isComposedPath = currentParam.isComposedPath;
  520. }
  521. return option;
  522. }
  523. let DOMUtilsContext = this;
  524. let args = arguments;
  525. if (typeof element === "string") {
  526. element = DOMUtilsContext.selectorAll(element);
  527. }
  528. if (element == null) {
  529. return;
  530. }
  531. let elementList = [];
  532. if (element instanceof NodeList || Array.isArray(element)) {
  533. element = element;
  534. elementList = [...element];
  535. }
  536. else {
  537. elementList.push(element);
  538. }
  539. // 事件名
  540. let eventTypeList = [];
  541. if (Array.isArray(eventType)) {
  542. eventTypeList = eventTypeList.concat(eventType.filter((eventTypeItem) => typeof eventTypeItem === "string" && eventTypeItem.toString() !== ""));
  543. }
  544. else if (typeof eventType === "string") {
  545. eventTypeList = eventTypeList.concat(eventType.split(" ").filter((eventTypeItem) => eventTypeItem !== ""));
  546. }
  547. // 子元素选择器
  548. let selectorList = [];
  549. if (Array.isArray(selector)) {
  550. selectorList = selectorList.concat(selector.filter((selectorItem) => typeof selectorItem === "string" && selectorItem.toString() !== ""));
  551. }
  552. else if (typeof selector === "string") {
  553. selectorList.push(selector);
  554. }
  555. // 事件回调
  556. let listenerCallBack = callback;
  557. // 事件配置
  558. let listenerOption = {
  559. capture: false,
  560. once: false,
  561. passive: false,
  562. isComposedPath: false,
  563. };
  564. if (typeof selector === "function") {
  565. // 这是为没有selector的情况
  566. // 那么它就是callback
  567. listenerCallBack = selector;
  568. listenerOption = getOption(args, 3, listenerOption);
  569. }
  570. else {
  571. // 这是存在selector的情况
  572. listenerOption = getOption(args, 4, listenerOption);
  573. }
  574. /**
  575. * 如果是once,那么删除该监听和元素上的事件和监听
  576. */
  577. function checkOptionOnceToRemoveEventListener() {
  578. if (listenerOption.once) {
  579. DOMUtilsContext.off(element, eventType, selector, callback, option);
  580. }
  581. }
  582. elementList.forEach((elementItem) => {
  583. /**
  584. * 事件回调
  585. * @param event
  586. */
  587. function domUtilsEventCallBack(event) {
  588. if (selectorList.length) {
  589. /* 存在子元素选择器 */
  590. // 这时候的this和target都是子元素选择器的元素
  591. let eventTarget = listenerOption.isComposedPath
  592. ? event.composedPath()[0]
  593. : event.target;
  594. let totalParent = elementItem;
  595. if (DOMUtilsCommonUtils.isWin(totalParent)) {
  596. if (totalParent ===
  597. DOMUtilsContext.windowApi.document) {
  598. totalParent = DOMUtilsContext.windowApi.document.documentElement;
  599. }
  600. }
  601. let findValue = selectorList.find((selectorItem) => {
  602. // 判断目标元素是否匹配选择器
  603. if (DOMUtilsContext.matches(eventTarget, selectorItem)) {
  604. /* 当前目标可以被selector所匹配到 */
  605. return true;
  606. }
  607. /* 在上层与主元素之间寻找可以被selector所匹配到的 */
  608. let $closestMatches = DOMUtilsContext.closest(eventTarget, selectorItem);
  609. if ($closestMatches && totalParent?.contains($closestMatches)) {
  610. eventTarget = $closestMatches;
  611. return true;
  612. }
  613. return false;
  614. });
  615. if (findValue) {
  616. // 这里尝试使用defineProperty修改event的target值
  617. try {
  618. OriginPrototype.Object.defineProperty(event, "target", {
  619. get() {
  620. return eventTarget;
  621. },
  622. });
  623. }
  624. catch (error) { }
  625. listenerCallBack.call(eventTarget, event, eventTarget);
  626. checkOptionOnceToRemoveEventListener();
  627. }
  628. }
  629. else {
  630. // 这时候的this指向监听的元素
  631. listenerCallBack.call(elementItem, event);
  632. checkOptionOnceToRemoveEventListener();
  633. }
  634. }
  635. /* 遍历事件名设置元素事件 */
  636. eventTypeList.forEach((eventName) => {
  637. elementItem.addEventListener(eventName, domUtilsEventCallBack, listenerOption);
  638. /* 获取对象上的事件 */
  639. let elementEvents = Reflect.get(elementItem, DOMUtilsData.SymbolEvents) || {};
  640. /* 初始化对象上的xx事件 */
  641. elementEvents[eventName] = elementEvents[eventName] || [];
  642. elementEvents[eventName].push({
  643. selector: selectorList,
  644. option: listenerOption,
  645. callback: domUtilsEventCallBack,
  646. originCallBack: listenerCallBack,
  647. });
  648. /* 覆盖事件 */
  649. Reflect.set(elementItem, DOMUtilsData.SymbolEvents, elementEvents);
  650. });
  651. });
  652. }
  653. off(element, eventType, selector, callback, option, filter) {
  654. /**
  655. * 获取option配置
  656. * @param args1
  657. * @param startIndex
  658. * @param option
  659. */
  660. function getOption(args1, startIndex, option) {
  661. let currentParam = args1[startIndex];
  662. if (typeof currentParam === "boolean") {
  663. option.capture = currentParam;
  664. }
  665. else if (typeof currentParam === "object" &&
  666. "capture" in currentParam) {
  667. option.capture = currentParam.capture;
  668. }
  669. return option;
  670. }
  671. let DOMUtilsContext = this;
  672. let args = arguments;
  673. if (typeof element === "string") {
  674. element = DOMUtilsContext.selectorAll(element);
  675. }
  676. if (element == null) {
  677. return;
  678. }
  679. let elementList = [];
  680. if (element instanceof NodeList || Array.isArray(element)) {
  681. element = element;
  682. elementList = [...element];
  683. }
  684. else {
  685. elementList.push(element);
  686. }
  687. let eventTypeList = [];
  688. if (Array.isArray(eventType)) {
  689. eventTypeList = eventTypeList.concat(eventType.filter((eventTypeItem) => typeof eventTypeItem === "string" && eventTypeItem.toString() !== ""));
  690. }
  691. else if (typeof eventType === "string") {
  692. eventTypeList = eventTypeList.concat(eventType.split(" ").filter((eventTypeItem) => eventTypeItem !== ""));
  693. }
  694. // 子元素选择器
  695. let selectorList = [];
  696. if (Array.isArray(selector)) {
  697. selectorList = selectorList.concat(selector.filter((selectorItem) => typeof selectorItem === "string" && selectorItem.toString() !== ""));
  698. }
  699. else if (typeof selector === "string") {
  700. selectorList.push(selector);
  701. }
  702. /**
  703. * 事件的回调函数
  704. */
  705. let listenerCallBack = callback;
  706. /**
  707. * 事件的配置
  708. */
  709. let listenerOption = {
  710. capture: false,
  711. };
  712. if (typeof selector === "function") {
  713. // 这是为没有selector的情况
  714. // 那么它就是callback
  715. listenerCallBack = selector;
  716. listenerOption = getOption(args, 3, listenerOption);
  717. }
  718. else {
  719. // 这是存在selector的情况
  720. listenerOption = getOption(args, 4, listenerOption);
  721. }
  722. // 是否移除所有事件
  723. let isRemoveAll = false;
  724. if (args.length === 2) {
  725. // 目标函数、事件名
  726. isRemoveAll = true;
  727. }
  728. else if ((args.length === 3 && typeof args[2] === "string") ||
  729. Array.isArray(args[2])) {
  730. // 目标函数、事件名、子元素选择器
  731. isRemoveAll = true;
  732. }
  733. elementList.forEach((elementItem) => {
  734. /* 获取对象上的事件 */
  735. let elementEvents = Reflect.get(elementItem, DOMUtilsData.SymbolEvents) || {};
  736. eventTypeList.forEach((eventName) => {
  737. let handlers = elementEvents[eventName] || [];
  738. if (typeof filter === "function") {
  739. handlers = handlers.filter(filter);
  740. }
  741. for (let index = 0; index < handlers.length; index++) {
  742. let handler = handlers[index];
  743. let flag = true;
  744. if (flag &&
  745. listenerCallBack &&
  746. handler.originCallBack !== listenerCallBack) {
  747. // callback不同
  748. flag = false;
  749. }
  750. if (flag && selectorList.length && Array.isArray(handler.selector)) {
  751. if (JSON.stringify(handler.selector) !== JSON.stringify(selectorList)) {
  752. // 子元素选择器不同
  753. flag = false;
  754. }
  755. }
  756. if (flag && listenerOption.capture !== handler.option.capture) {
  757. // 事件的配置项不同
  758. flag = false;
  759. }
  760. if (flag || isRemoveAll) {
  761. elementItem.removeEventListener(eventName, handler.callback, handler.option);
  762. handlers.splice(index--, 1);
  763. }
  764. }
  765. if (handlers.length === 0) {
  766. /* 如果没有任意的handler,那么删除该属性 */
  767. DOMUtilsCommonUtils.delete(elementEvents, eventType);
  768. }
  769. });
  770. Reflect.set(elementItem, DOMUtilsData.SymbolEvents, elementEvents);
  771. });
  772. }
  773. /**
  774. * 取消绑定所有的事件
  775. * @param element 需要取消绑定的元素|元素数组
  776. * @param eventType (可选)需要取消监听的事件
  777. */
  778. offAll(element, eventType) {
  779. let DOMUtilsContext = this;
  780. if (typeof element === "string") {
  781. element = DOMUtilsContext.selectorAll(element);
  782. }
  783. if (element == null) {
  784. return;
  785. }
  786. let elementList = [];
  787. if (element instanceof NodeList || Array.isArray(element)) {
  788. elementList = [...element];
  789. }
  790. else {
  791. elementList.push(element);
  792. }
  793. let eventTypeList = [];
  794. if (Array.isArray(eventType)) {
  795. eventTypeList = eventTypeList.concat(eventType);
  796. }
  797. else if (typeof eventType === "string") {
  798. eventTypeList = eventTypeList.concat(eventType.split(" "));
  799. }
  800. elementList.forEach((elementItem) => {
  801. Object.getOwnPropertySymbols(elementItem).forEach((symbolEvents) => {
  802. if (!symbolEvents.toString().startsWith("Symbol(events_")) {
  803. return;
  804. }
  805. let elementEvents = elementItem[symbolEvents] || {};
  806. let iterEventNameList = eventTypeList.length
  807. ? eventTypeList
  808. : Object.keys(elementEvents);
  809. iterEventNameList.forEach((eventName) => {
  810. let handlers = elementEvents[eventName];
  811. if (!handlers) {
  812. return;
  813. }
  814. for (const handler of handlers) {
  815. elementItem.removeEventListener(eventName, handler.callback, {
  816. capture: handler["option"]["capture"],
  817. });
  818. }
  819. let events = Reflect.get(elementItem, symbolEvents);
  820. DOMUtilsCommonUtils.delete(events, eventName);
  821. });
  822. });
  823. });
  824. }
  825. /**
  826. * 等待文档加载完成后执行指定的函数
  827. * @param callback 需要执行的函数
  828. * @example
  829. * DOMUtils.ready(function(){
  830. * console.log("文档加载完毕")
  831. * })
  832. */
  833. ready(callback) {
  834. if (typeof callback !== "function") {
  835. return;
  836. }
  837. let DOMUtilsContext = this;
  838. /**
  839. * 检测文档是否加载完毕
  840. */
  841. function checkDOMReadyState() {
  842. try {
  843. if (DOMUtilsContext.windowApi.document.readyState === "complete" ||
  844. (DOMUtilsContext.windowApi.document.readyState !== "loading" &&
  845. !DOMUtilsContext.windowApi.document.documentElement
  846. .doScroll)) {
  847. return true;
  848. }
  849. else {
  850. return false;
  851. }
  852. }
  853. catch (error) {
  854. return false;
  855. }
  856. }
  857. /**
  858. * 成功加载完毕后触发的回调函数
  859. */
  860. function completed() {
  861. removeDomReadyListener();
  862. callback();
  863. }
  864. let targetList = [
  865. {
  866. target: DOMUtilsContext.windowApi.document,
  867. eventType: "DOMContentLoaded",
  868. callback: completed,
  869. },
  870. {
  871. target: DOMUtilsContext.windowApi.window,
  872. eventType: "load",
  873. callback: completed,
  874. },
  875. ];
  876. /**
  877. * 添加监听
  878. */
  879. function addDomReadyListener() {
  880. for (let index = 0; index < targetList.length; index++) {
  881. let item = targetList[index];
  882. item.target.addEventListener(item.eventType, item.callback);
  883. }
  884. }
  885. /**
  886. * 移除监听
  887. */
  888. function removeDomReadyListener() {
  889. for (let index = 0; index < targetList.length; index++) {
  890. let item = targetList[index];
  891. item.target.removeEventListener(item.eventType, item.callback);
  892. }
  893. }
  894. if (checkDOMReadyState()) {
  895. /* 检查document状态 */
  896. DOMUtilsCommonUtils.setTimeout(callback);
  897. }
  898. else {
  899. /* 添加监听 */
  900. addDomReadyListener();
  901. }
  902. }
  903. /**
  904. * 主动触发事件
  905. * @param element 需要触发的元素|元素数组|window
  906. * @param eventType 需要触发的事件
  907. * @param details 赋予触发的Event的额外属性,如果是Event类型,那么将自动代替默认new的Event对象
  908. * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true
  909. * @example
  910. * // 触发元素a.xx的click事件
  911. * DOMUtils.trigger(document.querySelector("a.xx"),"click")
  912. * DOMUtils.trigger("a.xx","click")
  913. * // 触发元素a.xx的click、tap、hover事件
  914. * DOMUtils.trigger(document.querySelector("a.xx"),"click tap hover")
  915. * DOMUtils.trigger("a.xx",["click","tap","hover"])
  916. */
  917. trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
  918. let DOMUtilsContext = this;
  919. if (typeof element === "string") {
  920. element = DOMUtilsContext.selectorAll(element);
  921. }
  922. if (element == null) {
  923. return;
  924. }
  925. let elementList = [];
  926. if (element instanceof NodeList || Array.isArray(element)) {
  927. element = element;
  928. elementList = [...element];
  929. }
  930. else {
  931. elementList = [element];
  932. }
  933. let eventTypeList = [];
  934. if (Array.isArray(eventType)) {
  935. eventTypeList = eventType;
  936. }
  937. else if (typeof eventType === "string") {
  938. eventTypeList = eventType.split(" ");
  939. }
  940. elementList.forEach((elementItem) => {
  941. /* 获取对象上的事件 */
  942. let events = elementItem[DOMUtilsData.SymbolEvents] || {};
  943. eventTypeList.forEach((_eventType_) => {
  944. let event = null;
  945. if (details && details instanceof Event) {
  946. event = details;
  947. }
  948. else {
  949. event = new Event(_eventType_);
  950. if (details) {
  951. Object.keys(details).forEach((keyName) => {
  952. event[keyName] = details[keyName];
  953. });
  954. }
  955. }
  956. if (useDispatchToTriggerEvent == false && _eventType_ in events) {
  957. events[_eventType_].forEach((eventsItem) => {
  958. eventsItem.callback(event);
  959. });
  960. }
  961. else {
  962. elementItem.dispatchEvent(event);
  963. }
  964. });
  965. });
  966. }
  967. /**
  968. * 绑定或触发元素的click事件
  969. * @param element 目标元素
  970. * @param handler (可选)事件处理函数
  971. * @param details (可选)赋予触发的Event的额外属性
  972. * @param useDispatchToTriggerEvent (可选)是否使用dispatchEvent来触发事件,默认true
  973. * @example
  974. * // 触发元素a.xx的click事件
  975. * DOMUtils.click(document.querySelector("a.xx"))
  976. * DOMUtils.click("a.xx")
  977. * DOMUtils.click("a.xx",function(){
  978. * console.log("触发click事件成功")
  979. * })
  980. * */
  981. click(element, handler, details, useDispatchToTriggerEvent) {
  982. let DOMUtilsContext = this;
  983. if (typeof element === "string") {
  984. element = DOMUtilsContext.selectorAll(element);
  985. }
  986. if (element == null) {
  987. return;
  988. }
  989. if (DOMUtilsCommonUtils.isNodeList(element)) {
  990. // 设置
  991. element.forEach(($ele) => {
  992. DOMUtilsContext.click($ele, handler, details, useDispatchToTriggerEvent);
  993. });
  994. return;
  995. }
  996. if (handler == null) {
  997. DOMUtilsContext.trigger(element, "click", details, useDispatchToTriggerEvent);
  998. }
  999. else {
  1000. DOMUtilsContext.on(element, "click", null, handler);
  1001. }
  1002. }
  1003. /**
  1004. * 绑定或触发元素的blur事件
  1005. * @param element 目标元素
  1006. * @param handler (可选)事件处理函数
  1007. * @param details (可选)赋予触发的Event的额外属性
  1008. * @param useDispatchToTriggerEvent (可选)是否使用dispatchEvent来触发事件,默认true
  1009. * @example
  1010. * // 触发元素a.xx的blur事件
  1011. * DOMUtils.blur(document.querySelector("a.xx"))
  1012. * DOMUtils.blur("a.xx")
  1013. * DOMUtils.blur("a.xx",function(){
  1014. * console.log("触发blur事件成功")
  1015. * })
  1016. * */
  1017. blur(element, handler, details, useDispatchToTriggerEvent) {
  1018. let DOMUtilsContext = this;
  1019. if (typeof element === "string") {
  1020. element = DOMUtilsContext.selectorAll(element);
  1021. }
  1022. if (element == null) {
  1023. return;
  1024. }
  1025. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1026. // 设置
  1027. element.forEach(($ele) => {
  1028. DOMUtilsContext.focus($ele, handler, details, useDispatchToTriggerEvent);
  1029. });
  1030. return;
  1031. }
  1032. if (handler === null) {
  1033. DOMUtilsContext.trigger(element, "blur", details, useDispatchToTriggerEvent);
  1034. }
  1035. else {
  1036. DOMUtilsContext.on(element, "blur", null, handler);
  1037. }
  1038. }
  1039. /**
  1040. * 绑定或触发元素的focus事件
  1041. * @param element 目标元素
  1042. * @param handler (可选)事件处理函数
  1043. * @param details (可选)赋予触发的Event的额外属性
  1044. * @param useDispatchToTriggerEvent (可选)是否使用dispatchEvent来触发事件,默认true
  1045. * @example
  1046. * // 触发元素a.xx的focus事件
  1047. * DOMUtils.focus(document.querySelector("a.xx"))
  1048. * DOMUtils.focus("a.xx")
  1049. * DOMUtils.focus("a.xx",function(){
  1050. * console.log("触发focus事件成功")
  1051. * })
  1052. * */
  1053. focus(element, handler, details, useDispatchToTriggerEvent) {
  1054. let DOMUtilsContext = this;
  1055. if (typeof element === "string") {
  1056. element = DOMUtilsContext.selectorAll(element);
  1057. }
  1058. if (element == null) {
  1059. return;
  1060. }
  1061. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1062. // 设置
  1063. element.forEach(($ele) => {
  1064. DOMUtilsContext.focus($ele, handler, details, useDispatchToTriggerEvent);
  1065. });
  1066. return;
  1067. }
  1068. if (handler == null) {
  1069. DOMUtilsContext.trigger(element, "focus", details, useDispatchToTriggerEvent);
  1070. }
  1071. else {
  1072. DOMUtilsContext.on(element, "focus", null, handler);
  1073. }
  1074. }
  1075. /**
  1076. * 当鼠标移入或移出元素时触发事件
  1077. * @param element 当前元素
  1078. * @param handler 事件处理函数
  1079. * @param option 配置
  1080. * @example
  1081. * // 监听a.xx元素的移入或移出
  1082. * DOMUtils.hover(document.querySelector("a.xx"),()=>{
  1083. * console.log("移入/移除");
  1084. * })
  1085. * DOMUtils.hover("a.xx",()=>{
  1086. * console.log("移入/移除");
  1087. * })
  1088. */
  1089. hover(element, handler, option) {
  1090. let DOMUtilsContext = this;
  1091. if (typeof element === "string") {
  1092. element = DOMUtilsContext.selectorAll(element);
  1093. }
  1094. if (element == null) {
  1095. return;
  1096. }
  1097. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1098. // 设置
  1099. element.forEach(($ele) => {
  1100. DOMUtilsContext.hover($ele, handler, option);
  1101. });
  1102. return;
  1103. }
  1104. DOMUtilsContext.on(element, "mouseenter", null, handler, option);
  1105. DOMUtilsContext.on(element, "mouseleave", null, handler, option);
  1106. }
  1107. /**
  1108. * 当按键松开时触发事件
  1109. * keydown - > keypress - > keyup
  1110. * @param element 当前元素
  1111. * @param handler 事件处理函数
  1112. * @param option 配置
  1113. * @example
  1114. * // 监听a.xx元素的按键松开
  1115. * DOMUtils.keyup(document.querySelector("a.xx"),()=>{
  1116. * console.log("按键松开");
  1117. * })
  1118. * DOMUtils.keyup("a.xx",()=>{
  1119. * console.log("按键松开");
  1120. * })
  1121. */
  1122. keyup(element, handler, option) {
  1123. let DOMUtilsContext = this;
  1124. if (element == null) {
  1125. return;
  1126. }
  1127. if (typeof element === "string") {
  1128. element = DOMUtilsContext.selectorAll(element);
  1129. }
  1130. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1131. // 设置
  1132. element.forEach(($ele) => {
  1133. DOMUtilsContext.keyup($ele, handler, option);
  1134. });
  1135. return;
  1136. }
  1137. DOMUtilsContext.on(element, "keyup", null, handler, option);
  1138. }
  1139. /**
  1140. * 当按键按下时触发事件
  1141. * keydown - > keypress - > keyup
  1142. * @param element 目标
  1143. * @param handler 事件处理函数
  1144. * @param option 配置
  1145. * @example
  1146. * // 监听a.xx元素的按键按下
  1147. * DOMUtils.keydown(document.querySelector("a.xx"),()=>{
  1148. * console.log("按键按下");
  1149. * })
  1150. * DOMUtils.keydown("a.xx",()=>{
  1151. * console.log("按键按下");
  1152. * })
  1153. */
  1154. keydown(element, handler, option) {
  1155. let DOMUtilsContext = this;
  1156. if (element == null) {
  1157. return;
  1158. }
  1159. if (typeof element === "string") {
  1160. element = DOMUtilsContext.selectorAll(element);
  1161. }
  1162. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1163. // 设置
  1164. element.forEach(($ele) => {
  1165. DOMUtilsContext.keydown($ele, handler, option);
  1166. });
  1167. return;
  1168. }
  1169. DOMUtilsContext.on(element, "keydown", null, handler, option);
  1170. }
  1171. /**
  1172. * 当按键按下时触发事件
  1173. * keydown - > keypress - > keyup
  1174. * @param element 目标
  1175. * @param handler 事件处理函数
  1176. * @param option 配置
  1177. * @example
  1178. * // 监听a.xx元素的按键按下
  1179. * DOMUtils.keypress(document.querySelector("a.xx"),()=>{
  1180. * console.log("按键按下");
  1181. * })
  1182. * DOMUtils.keypress("a.xx",()=>{
  1183. * console.log("按键按下");
  1184. * })
  1185. */
  1186. keypress(element, handler, option) {
  1187. let DOMUtilsContext = this;
  1188. if (element == null) {
  1189. return;
  1190. }
  1191. if (typeof element === "string") {
  1192. element = DOMUtilsContext.selectorAll(element);
  1193. }
  1194. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1195. // 设置
  1196. element.forEach(($ele) => {
  1197. DOMUtilsContext.keypress($ele, handler, option);
  1198. });
  1199. return;
  1200. }
  1201. DOMUtilsContext.on(element, "keypress", null, handler, option);
  1202. }
  1203. /**
  1204. * 监听某个元素键盘按键事件或window全局按键事件
  1205. * 按下有值的键时触发,按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件,再触发keypress事件。
  1206. * @param element 需要监听的对象,可以是全局Window或者某个元素
  1207. * @param eventName 事件名,默认keypress
  1208. * @param callback 自己定义的回调事件,参数1为当前的key,参数2为组合按键,数组类型,包含ctrl、shift、alt和meta(win键或mac的cmd键)
  1209. * @param options 监听事件的配置
  1210. * @example
  1211. Utils.listenKeyboard(window,(keyName,keyValue,otherKey,event)=>{
  1212. if(keyName === "Enter"){
  1213. console.log("回车按键的值是:"+keyValue)
  1214. }
  1215. if(otherKey.indexOf("ctrl") && keyName === "Enter" ){
  1216. console.log("Ctrl和回车键");
  1217. }
  1218. })
  1219. * @example
  1220. 字母和数字键的键码值(keyCode)
  1221. 按键 键码 按键 键码 按键 键码 按键 键码
  1222. A 65 J 74 S 83 1 49
  1223. B 66 K 75 T 84 2 50
  1224. C 67 L 76 U 85 3 51
  1225. D 68 M 77 V 86 4 52
  1226. E 69 N 78 W 87 5 53
  1227. F 70 O 79 X 88 6 54
  1228. G 71 P 80 Y 89 7 55
  1229. H 72 Q 81 Z 90 8 56
  1230. I 73 R 82 0 48 9 57
  1231. 数字键盘上的键的键码值(keyCode)
  1232. 功能键键码值(keyCode)
  1233. 按键 键码 按键 键码 按键 键码 按键 键码
  1234. 0 96 8 104 F1 112 F7 118
  1235. 1 97 9 105 F2 113 F8 119
  1236. 2 98 * 106 F3 114 F9 120
  1237. 3 99 + 107 F4 115 F10 121
  1238. 4 100 Enter 108 F5 116 F11 122
  1239. 5 101 - 109 F6 117 F12 123
  1240. 6 102 . 110
  1241. 7 103 / 111
  1242. 控制键键码值(keyCode)
  1243. 按键 键码 按键 键码 按键 键码 按键 键码
  1244. BackSpace 8 Esc 27 → 39 -_ 189
  1245. Tab 9 Spacebar 32 ↓ 40 .> 190
  1246. Clear 12 Page Up 33 Insert 45 /? 191
  1247. Enter 13 Page Down 34 Delete 46 `~ 192
  1248. Shift 16 End 35 Num Lock 144 [{ 219
  1249. Control 17 Home 36 ;: 186 \| 220
  1250. Alt 18 ← 37 =+ 187 ]} 221
  1251. Cape Lock 20 ↑ 38 ,< 188 '" 222
  1252. 多媒体键码值(keyCode)
  1253. 按键 键码
  1254. 音量加 175
  1255. 音量减 174
  1256. 停止 179
  1257. 静音 173
  1258. 浏览器 172
  1259. 邮件 180
  1260. 搜索 170
  1261. 收藏 171
  1262. **/
  1263. listenKeyboard(element, eventName = "keypress", callback, options) {
  1264. let DOMUtilsContext = this;
  1265. if (typeof element === "string") {
  1266. element = DOMUtilsContext.selectorAll(element);
  1267. }
  1268. let keyboardEventCallBack = function (event) {
  1269. /** 键名 */
  1270. let keyName = event.key || event.code;
  1271. /** 键值 */
  1272. let keyValue = event.charCode || event.keyCode || event.which;
  1273. /** 组合键列表 */
  1274. let otherCodeList = [];
  1275. if (event.ctrlKey) {
  1276. otherCodeList.push("ctrl");
  1277. }
  1278. if (event.altKey) {
  1279. otherCodeList.push("alt");
  1280. }
  1281. if (event.metaKey) {
  1282. otherCodeList.push("meta");
  1283. }
  1284. if (event.shiftKey) {
  1285. otherCodeList.push("shift");
  1286. }
  1287. if (typeof callback === "function") {
  1288. callback(keyName, keyValue, otherCodeList, event);
  1289. }
  1290. };
  1291. DOMUtilsContext.on(element, eventName, keyboardEventCallBack, options);
  1292. return {
  1293. removeListen: () => {
  1294. DOMUtilsContext.off(element, eventName, keyboardEventCallBack, options);
  1295. },
  1296. };
  1297. }
  1298. selector(selector) {
  1299. return this.selectorAll(selector)[0];
  1300. }
  1301. selectorAll(selector) {
  1302. const context = this;
  1303. selector = selector.trim();
  1304. if (selector.match(/[^\s]{1}:empty$/gi)) {
  1305. // empty 语法
  1306. selector = selector.replace(/:empty$/gi, "");
  1307. return Array.from(context.windowApi.document.querySelectorAll(selector)).filter(($ele) => {
  1308. return $ele?.innerHTML?.trim() === "";
  1309. });
  1310. }
  1311. else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
  1312. selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
  1313. // contains 语法
  1314. let textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
  1315. let text = textMatch[2];
  1316. selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
  1317. return Array.from(context.windowApi.document.querySelectorAll(selector)).filter(($ele) => {
  1318. // @ts-ignore
  1319. return ($ele?.textContent || $ele?.innerText)?.includes(text);
  1320. });
  1321. }
  1322. else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
  1323. selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
  1324. // regexp 语法
  1325. let textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
  1326. let pattern = textMatch[2];
  1327. let flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
  1328. let flags = "";
  1329. if (flagMatch) {
  1330. pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
  1331. flags = flagMatch[3];
  1332. }
  1333. let regexp = new RegExp(pattern, flags);
  1334. selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
  1335. return Array.from(context.windowApi.document.querySelectorAll(selector)).filter(($ele) => {
  1336. // @ts-ignore
  1337. return Boolean(($ele?.textContent || $ele?.innerText)?.match(regexp));
  1338. });
  1339. }
  1340. else {
  1341. // 普通语法
  1342. return Array.from(context.windowApi.document.querySelectorAll(selector));
  1343. }
  1344. }
  1345. /**
  1346. * 匹配元素,可使用以下的额外语法
  1347. *
  1348. * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
  1349. * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
  1350. * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
  1351. * @param $el 元素
  1352. * @param selector 选择器
  1353. * @example
  1354. * DOMUtils.matches("div:contains('测试')")
  1355. * > true
  1356. * @example
  1357. * DOMUtils.matches("div:empty")
  1358. * > true
  1359. * @example
  1360. * DOMUtils.matches("div:regexp('^xxxx$')")
  1361. * > true
  1362. * @example
  1363. * DOMUtils.matches("div:regexp(/^xxx/ig)")
  1364. * > false
  1365. */
  1366. matches($el, selector) {
  1367. selector = selector.trim();
  1368. if ($el == null) {
  1369. return false;
  1370. }
  1371. if (selector.match(/[^\s]{1}:empty$/gi)) {
  1372. // empty 语法
  1373. selector = selector.replace(/:empty$/gi, "");
  1374. return $el.matches(selector) && $el?.innerHTML?.trim() === "";
  1375. }
  1376. else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
  1377. selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
  1378. // contains 语法
  1379. let textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
  1380. let text = textMatch[2];
  1381. selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
  1382. // @ts-ignore
  1383. let content = $el?.textContent || $el?.innerText;
  1384. if (typeof content !== "string") {
  1385. content = "";
  1386. }
  1387. return $el.matches(selector) && content?.includes(text);
  1388. }
  1389. else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
  1390. selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
  1391. // regexp 语法
  1392. let textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
  1393. let pattern = textMatch[2];
  1394. let flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
  1395. let flags = "";
  1396. if (flagMatch) {
  1397. pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
  1398. flags = flagMatch[3];
  1399. }
  1400. let regexp = new RegExp(pattern, flags);
  1401. selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
  1402. // @ts-ignore
  1403. let content = $el?.textContent || $el?.innerText;
  1404. if (typeof content !== "string") {
  1405. content = "";
  1406. }
  1407. return $el.matches(selector) && Boolean(content?.match(regexp));
  1408. }
  1409. else {
  1410. // 普通语法
  1411. return $el.matches(selector);
  1412. }
  1413. }
  1414. closest($el, selector) {
  1415. selector = selector.trim();
  1416. if (selector.match(/[^\s]{1}:empty$/gi)) {
  1417. // empty 语法
  1418. selector = selector.replace(/:empty$/gi, "");
  1419. let $closest = $el?.closest(selector);
  1420. if ($closest && $closest?.innerHTML?.trim() === "") {
  1421. return $closest;
  1422. }
  1423. return null;
  1424. }
  1425. else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
  1426. selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
  1427. // contains 语法
  1428. let textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
  1429. let text = textMatch[2];
  1430. selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
  1431. let $closest = $el?.closest(selector);
  1432. if ($closest) {
  1433. // @ts-ignore
  1434. let content = $el?.textContent || $el?.innerText;
  1435. if (typeof content === "string" && content.includes(text)) {
  1436. return $closest;
  1437. }
  1438. }
  1439. return null;
  1440. }
  1441. else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
  1442. selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
  1443. // regexp 语法
  1444. let textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
  1445. let pattern = textMatch[2];
  1446. let flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
  1447. let flags = "";
  1448. if (flagMatch) {
  1449. pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
  1450. flags = flagMatch[3];
  1451. }
  1452. let regexp = new RegExp(pattern, flags);
  1453. selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
  1454. let $closest = $el?.closest(selector);
  1455. if ($closest) {
  1456. // @ts-ignore
  1457. let content = $el?.textContent || $el?.innerText;
  1458. if (typeof content === "string" && content.match(regexp)) {
  1459. return $closest;
  1460. }
  1461. }
  1462. return null;
  1463. }
  1464. else {
  1465. // 普通语法
  1466. let $closest = $el?.closest(selector);
  1467. return $closest;
  1468. }
  1469. }
  1470. }
  1471.  
  1472. class DOMUtils extends DOMUtilsEvent {
  1473. constructor(option) {
  1474. super(option);
  1475. }
  1476. /** 版本号 */
  1477. version = "2025.6.6";
  1478. attr(element, attrName, attrValue) {
  1479. let DOMUtilsContext = this;
  1480. if (typeof element === "string") {
  1481. element = DOMUtilsContext.selectorAll(element);
  1482. }
  1483. if (element == null) {
  1484. return;
  1485. }
  1486. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1487. if (attrValue == null) {
  1488. // 获取属性
  1489. return DOMUtilsContext.attr(element[0], attrName, attrValue);
  1490. }
  1491. else {
  1492. // 设置属性
  1493. element.forEach(($ele) => {
  1494. DOMUtilsContext.attr($ele, attrName, attrValue);
  1495. });
  1496. return;
  1497. }
  1498. }
  1499. if (attrValue == null) {
  1500. return element.getAttribute(attrName);
  1501. }
  1502. else {
  1503. element.setAttribute(attrName, attrValue);
  1504. }
  1505. }
  1506. /**
  1507. * 创建元素
  1508. * @param tagName 标签名
  1509. * @param property 属性
  1510. * @param attributes 元素上的自定义属性
  1511. * @example
  1512. * // 创建一个DIV元素,且属性class为xxx
  1513. * DOMUtils.createElement("div",undefined,{ class:"xxx" });
  1514. * > <div class="xxx"></div>
  1515. * @example
  1516. * // 创建一个DIV元素
  1517. * DOMUtils.createElement("div");
  1518. * > <div></div>
  1519. * @example
  1520. * // 创建一个DIV元素
  1521. * DOMUtils.createElement("div","测试");
  1522. * > <div>测试</div>
  1523. */
  1524. createElement(
  1525. /** 元素名 */
  1526. tagName,
  1527. /** 属性 */
  1528. property,
  1529. /** 自定义属性 */
  1530. attributes) {
  1531. let DOMUtilsContext = this;
  1532. let tempElement = DOMUtilsContext.windowApi.document.createElement(tagName);
  1533. if (typeof property === "string") {
  1534. DOMUtilsContext.html(tempElement, property);
  1535. return tempElement;
  1536. }
  1537. if (property == null) {
  1538. property = {};
  1539. }
  1540. if (attributes == null) {
  1541. attributes = {};
  1542. }
  1543. Object.keys(property).forEach((key) => {
  1544. let value = property[key];
  1545. if (key === "innerHTML") {
  1546. DOMUtilsContext.html(tempElement, value);
  1547. return;
  1548. }
  1549. tempElement[key] = value;
  1550. });
  1551. Object.keys(attributes).forEach((key) => {
  1552. let value = attributes[key];
  1553. if (typeof value === "object") {
  1554. /* object转字符串 */
  1555. value = JSON.stringify(value);
  1556. }
  1557. else if (typeof value === "function") {
  1558. /* function转字符串 */
  1559. value = value.toString();
  1560. }
  1561. tempElement.setAttribute(key, value);
  1562. });
  1563. return tempElement;
  1564. }
  1565. css(element, property, value) {
  1566. let DOMUtilsContext = this;
  1567. /**
  1568. * 把纯数字没有px的加上
  1569. */
  1570. function handlePixe(propertyName, propertyValue) {
  1571. let allowAddPixe = [
  1572. "width",
  1573. "height",
  1574. "top",
  1575. "left",
  1576. "right",
  1577. "bottom",
  1578. "font-size",
  1579. ];
  1580. if (typeof propertyValue === "number") {
  1581. propertyValue = propertyValue.toString();
  1582. }
  1583. if (typeof propertyValue === "string" &&
  1584. allowAddPixe.includes(propertyName) &&
  1585. propertyValue.match(/[0-9]$/gi)) {
  1586. propertyValue = propertyValue + "px";
  1587. }
  1588. return propertyValue;
  1589. }
  1590. if (typeof element === "string") {
  1591. element = DOMUtilsContext.selectorAll(element);
  1592. }
  1593. if (element == null) {
  1594. return;
  1595. }
  1596. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1597. if (typeof property === "string") {
  1598. if (value == null) {
  1599. // 获取属性
  1600. return DOMUtilsContext.css(element[0], property);
  1601. }
  1602. else {
  1603. // 设置属性
  1604. element.forEach(($ele) => {
  1605. DOMUtilsContext.css($ele, property);
  1606. });
  1607. return;
  1608. }
  1609. }
  1610. else if (typeof property === "object") {
  1611. // 设置属性
  1612. element.forEach(($ele) => {
  1613. DOMUtilsContext.css($ele, property);
  1614. });
  1615. return;
  1616. }
  1617. else ;
  1618. return;
  1619. }
  1620. let setStyleProperty = (propertyName, propertyValue) => {
  1621. if (typeof propertyValue === "string" &&
  1622. propertyValue.trim().endsWith("!important")) {
  1623. propertyValue = propertyValue
  1624. .trim()
  1625. .replace(/!important$/gi, "")
  1626. .trim();
  1627. element.style.setProperty(propertyName, propertyValue, "important");
  1628. }
  1629. else {
  1630. propertyValue = handlePixe(propertyName, propertyValue);
  1631. element.style.setProperty(propertyName, propertyValue);
  1632. }
  1633. };
  1634. if (typeof property === "string") {
  1635. if (value == null) {
  1636. return DOMUtilsContext.windowApi.globalThis
  1637. .getComputedStyle(element)
  1638. .getPropertyValue(property);
  1639. }
  1640. else {
  1641. setStyleProperty(property, value);
  1642. }
  1643. }
  1644. else if (typeof property === "object") {
  1645. for (let prop in property) {
  1646. let value = property[prop];
  1647. setStyleProperty(prop, value);
  1648. }
  1649. }
  1650. else {
  1651. // 其他情况
  1652. throw new TypeError("property must be string or object");
  1653. }
  1654. }
  1655. text(element, text) {
  1656. let DOMUtilsContext = this;
  1657. if (typeof element === "string") {
  1658. element = DOMUtilsContext.selectorAll(element);
  1659. }
  1660. if (element == null) {
  1661. return;
  1662. }
  1663. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1664. if (text == null) {
  1665. // 获取
  1666. return DOMUtilsContext.text(element[0]);
  1667. }
  1668. else {
  1669. // 设置
  1670. element.forEach(($ele) => {
  1671. DOMUtilsContext.text($ele, text);
  1672. });
  1673. }
  1674. return;
  1675. }
  1676. if (text == null) {
  1677. return element.textContent || element.innerText;
  1678. }
  1679. else {
  1680. if (text instanceof Node) {
  1681. text = text.textContent || text.innerText;
  1682. }
  1683. if ("textContent" in element) {
  1684. element.textContent = text;
  1685. }
  1686. else if ("innerText" in element) {
  1687. element.innerText = text;
  1688. }
  1689. }
  1690. }
  1691. html(element, html) {
  1692. let DOMUtilsContext = this;
  1693. if (typeof element === "string") {
  1694. element = DOMUtilsContext.selectorAll(element);
  1695. }
  1696. if (element == null) {
  1697. return;
  1698. }
  1699. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1700. if (html == null) {
  1701. // 获取
  1702. return DOMUtilsContext.html(element[0]);
  1703. }
  1704. else {
  1705. // 设置
  1706. element.forEach(($ele) => {
  1707. DOMUtilsContext.html($ele, html);
  1708. });
  1709. }
  1710. return;
  1711. }
  1712. if (html == null) {
  1713. // 获取
  1714. return element.innerHTML;
  1715. }
  1716. else {
  1717. // 设置
  1718. if (html instanceof Element) {
  1719. html = html.innerHTML;
  1720. }
  1721. if ("innerHTML" in element) {
  1722. DOMUtilsCommonUtils.setSafeHTML(element, html);
  1723. }
  1724. }
  1725. }
  1726. /**
  1727. * 获取移动元素的transform偏移
  1728. */
  1729. getTransform(element, isShow = false) {
  1730. let DOMUtilsContext = this;
  1731. let transform_left = 0;
  1732. let transform_top = 0;
  1733. if (!(isShow || (!isShow && DOMUtilsCommonUtils.isShow(element)))) {
  1734. /* 未显示 */
  1735. let { recovery } = DOMUtilsCommonUtils.showElement(element);
  1736. let transformInfo = DOMUtilsContext.getTransform(element, true);
  1737. recovery();
  1738. return transformInfo;
  1739. }
  1740. let elementTransform = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element).transform;
  1741. if (elementTransform != null &&
  1742. elementTransform !== "none" &&
  1743. elementTransform !== "") {
  1744. let elementTransformSplit = elementTransform
  1745. .match(/\((.+)\)/)?.[1]
  1746. .split(",");
  1747. if (elementTransformSplit) {
  1748. transform_left = Math.abs(parseInt(elementTransformSplit[4]));
  1749. transform_top = Math.abs(parseInt(elementTransformSplit[5]));
  1750. }
  1751. else {
  1752. transform_left = 0;
  1753. transform_top = 0;
  1754. }
  1755. }
  1756. return {
  1757. transformLeft: transform_left,
  1758. transformTop: transform_top,
  1759. };
  1760. }
  1761. val(element, value) {
  1762. let DOMUtilsContext = this;
  1763. if (typeof element === "string") {
  1764. element = DOMUtilsContext.selectorAll(element);
  1765. }
  1766. if (element == null) {
  1767. return;
  1768. }
  1769. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1770. if (value == null) {
  1771. // 获取
  1772. return DOMUtilsContext.val(element[0]);
  1773. }
  1774. else {
  1775. // 设置
  1776. element.forEach(($ele) => {
  1777. DOMUtilsContext.val($ele, value);
  1778. });
  1779. }
  1780. return;
  1781. }
  1782. if (value == null) {
  1783. // 获取
  1784. if (element.localName === "input" &&
  1785. (element.type === "checkbox" || element.type === "radio")) {
  1786. return element.checked;
  1787. }
  1788. else {
  1789. return element.value;
  1790. }
  1791. }
  1792. else {
  1793. // 设置
  1794. if (element.localName === "input" &&
  1795. (element.type === "checkbox" || element.type === "radio")) {
  1796. element.checked = !!value;
  1797. }
  1798. else {
  1799. element.value = value;
  1800. }
  1801. }
  1802. }
  1803. prop(element, propName, propValue) {
  1804. let DOMUtilsContext = this;
  1805. if (typeof element === "string") {
  1806. element = DOMUtilsContext.selectorAll(element);
  1807. }
  1808. if (element == null) {
  1809. return;
  1810. }
  1811. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1812. if (propValue == null) {
  1813. // 获取
  1814. return DOMUtilsContext.prop(element[0], propName);
  1815. }
  1816. else {
  1817. // 设置
  1818. element.forEach(($ele) => {
  1819. DOMUtilsContext.prop($ele, propName, propValue);
  1820. });
  1821. }
  1822. return;
  1823. }
  1824. if (propValue == null) {
  1825. return Reflect.get(element, propName);
  1826. }
  1827. else {
  1828. if (element instanceof Element && propName === "innerHTML") {
  1829. DOMUtilsContext.html(element, propValue);
  1830. }
  1831. else {
  1832. Reflect.set(element, propName, propValue);
  1833. }
  1834. }
  1835. }
  1836. /**
  1837. * 移除元素的属性
  1838. * @param element 目标元素
  1839. * @param attrName 属性名
  1840. * @example
  1841. * // 移除元素a.xx的属性data-value
  1842. * DOMUtils.removeAttr(document.querySelector("a.xx"),"data-value")
  1843. * DOMUtils.removeAttr("a.xx","data-value")
  1844. * */
  1845. removeAttr(element, attrName) {
  1846. let DOMUtilsContext = this;
  1847. if (typeof element === "string") {
  1848. element = DOMUtilsContext.selectorAll(element);
  1849. }
  1850. if (element == null) {
  1851. return;
  1852. }
  1853. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1854. // 设置
  1855. element.forEach(($ele) => {
  1856. DOMUtilsContext.removeAttr($ele, attrName);
  1857. });
  1858. return;
  1859. }
  1860. element.removeAttribute(attrName);
  1861. }
  1862. /**
  1863. * 移除元素class名
  1864. * @param element 目标元素
  1865. * @param className 类名
  1866. * @example
  1867. * // 移除元素a.xx的className为xx
  1868. * DOMUtils.removeClass(document.querySelector("a.xx"),"xx")
  1869. * DOMUtils.removeClass("a.xx","xx")
  1870. */
  1871. removeClass(element, className) {
  1872. let DOMUtilsContext = this;
  1873. if (typeof element === "string") {
  1874. element = DOMUtilsContext.selectorAll(element);
  1875. }
  1876. if (element == null) {
  1877. return;
  1878. }
  1879. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1880. // 设置
  1881. element.forEach(($ele) => {
  1882. DOMUtilsContext.removeClass($ele, className);
  1883. });
  1884. return;
  1885. }
  1886. if (className == null) {
  1887. // 清空全部className
  1888. element.className = "";
  1889. }
  1890. else {
  1891. if (!Array.isArray(className)) {
  1892. className = className.split(" ");
  1893. }
  1894. className.forEach((itemClassName) => {
  1895. element.classList.remove(itemClassName);
  1896. });
  1897. }
  1898. }
  1899. /**
  1900. * 移除元素的属性
  1901. * @param element 目标元素
  1902. * @param propName 属性名
  1903. * @example
  1904. * // 移除元素a.xx的href属性
  1905. * DOMUtils.removeProp(document.querySelector("a.xx"),"href")
  1906. * DOMUtils.removeProp("a.xx","href")
  1907. * */
  1908. removeProp(element, propName) {
  1909. let DOMUtilsContext = this;
  1910. if (typeof element === "string") {
  1911. element = DOMUtilsContext.selectorAll(element);
  1912. }
  1913. if (element == null) {
  1914. return;
  1915. }
  1916. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1917. // 设置
  1918. element.forEach(($ele) => {
  1919. DOMUtilsContext.removeProp($ele, propName);
  1920. });
  1921. return;
  1922. }
  1923. DOMUtilsCommonUtils.delete(element, propName);
  1924. }
  1925. /**
  1926. * 将一个元素替换为另一个元素
  1927. * @param element 目标元素
  1928. * @param newElement 新元素
  1929. * @example
  1930. * // 替换元素a.xx为b.xx
  1931. * DOMUtils.replaceWith(document.querySelector("a.xx"),document.querySelector("b.xx"))
  1932. * DOMUtils.replaceWith("a.xx",'<b class="xx"></b>')
  1933. */
  1934. replaceWith(element, newElement) {
  1935. let DOMUtilsContext = this;
  1936. if (typeof element === "string") {
  1937. element = DOMUtilsContext.selectorAll(element);
  1938. }
  1939. if (element == null) {
  1940. return;
  1941. }
  1942. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1943. // 设置
  1944. element.forEach(($ele) => {
  1945. DOMUtilsContext.replaceWith($ele, newElement);
  1946. });
  1947. return;
  1948. }
  1949. if (typeof newElement === "string") {
  1950. newElement = DOMUtilsContext.parseHTML(newElement, false, false);
  1951. }
  1952. element.parentElement.replaceChild(newElement, element);
  1953. }
  1954. /**
  1955. * 给元素添加class
  1956. * @param element 目标元素
  1957. * @param className class名
  1958. * @example
  1959. * // 元素a.xx的className添加_vue_
  1960. * DOMUtils.addClass(document.querySelector("a.xx"),"_vue_")
  1961. * DOMUtils.addClass("a.xx","_vue_")
  1962. * */
  1963. addClass(element, className) {
  1964. let DOMUtilsContext = this;
  1965. if (typeof element === "string") {
  1966. element = DOMUtilsContext.selectorAll(element);
  1967. }
  1968. if (element == null) {
  1969. return;
  1970. }
  1971. if (DOMUtilsCommonUtils.isNodeList(element)) {
  1972. // 设置
  1973. element.forEach(($ele) => {
  1974. DOMUtilsContext.addClass($ele, className);
  1975. });
  1976. return;
  1977. }
  1978. if (!Array.isArray(className)) {
  1979. className = className.split(" ");
  1980. }
  1981. className.forEach((itemClassName) => {
  1982. if (itemClassName.trim() == "") {
  1983. return;
  1984. }
  1985. element.classList.add(itemClassName);
  1986. });
  1987. }
  1988. /**
  1989. * 判断元素是否存在className
  1990. * @param element
  1991. * @param className
  1992. */
  1993. hasClass(element, className) {
  1994. let DOMUtilsContext = this;
  1995. if (typeof element === "string") {
  1996. element = DOMUtilsContext.selectorAll(element);
  1997. }
  1998. if (element == null) {
  1999. return false;
  2000. }
  2001. if (DOMUtilsCommonUtils.isNodeList(element)) {
  2002. let flag = true;
  2003. for (let index = 0; index < element.length; index++) {
  2004. const $ele = element[index];
  2005. flag = flag && DOMUtilsContext.hasClass($ele, className);
  2006. }
  2007. return flag;
  2008. }
  2009. if (!element?.classList) {
  2010. return false;
  2011. }
  2012. if (!Array.isArray(className)) {
  2013. className = className.split(" ");
  2014. }
  2015. for (let index = 0; index < className.length; index++) {
  2016. const item = className[index].trim();
  2017. if (!element.classList.contains(item)) {
  2018. return false;
  2019. }
  2020. }
  2021. return true;
  2022. }
  2023. /**
  2024. * 函数在元素内部末尾添加子元素或HTML字符串
  2025. * @param element 目标元素
  2026. * @param content 子元素或HTML字符串
  2027. * @example
  2028. * // 元素a.xx的内部末尾添加一个元素
  2029. * DOMUtils.append(document.querySelector("a.xx"),document.querySelector("b.xx"))
  2030. * DOMUtils.append("a.xx","'<b class="xx"></b>")
  2031. * */
  2032. append(element, content) {
  2033. let DOMUtilsContext = this;
  2034. if (typeof element === "string") {
  2035. element = DOMUtilsContext.selectorAll(element);
  2036. }
  2037. if (element == null) {
  2038. return;
  2039. }
  2040. if (DOMUtilsCommonUtils.isNodeList(element)) {
  2041. // 设置
  2042. element.forEach(($ele) => {
  2043. DOMUtilsContext.append($ele, content);
  2044. });
  2045. return;
  2046. }
  2047. function elementAppendChild(ele, text) {
  2048. if (typeof content === "string") {
  2049. ele.insertAdjacentHTML("beforeend", DOMUtilsCommonUtils.getSafeHTML(text));
  2050. }
  2051. else {
  2052. ele.appendChild(text);
  2053. }
  2054. }
  2055. if (Array.isArray(content) || content instanceof NodeList) {
  2056. /* 数组 */
  2057. let fragment = DOMUtilsContext.windowApi.document.createDocumentFragment();
  2058. content.forEach((ele) => {
  2059. if (typeof ele === "string") {
  2060. ele = DOMUtilsContext.parseHTML(ele, true, false);
  2061. }
  2062. fragment.appendChild(ele);
  2063. });
  2064. element.appendChild(fragment);
  2065. }
  2066. else {
  2067. elementAppendChild(element, content);
  2068. }
  2069. }
  2070. /**
  2071. * 函数 在元素内部开头添加子元素或HTML字符串
  2072. * @param element 目标元素
  2073. * @param content 子元素或HTML字符串
  2074. * @example
  2075. * // 元素a.xx内部开头添加一个元素
  2076. * DOMUtils.prepend(document.querySelector("a.xx"),document.querySelector("b.xx"))
  2077. * DOMUtils.prepend("a.xx","'<b class="xx"></b>")
  2078. * */
  2079. prepend(element, content) {
  2080. let DOMUtilsContext = this;
  2081. if (typeof element === "string") {
  2082. element = DOMUtilsContext.selectorAll(element);
  2083. }
  2084. if (element == null) {
  2085. return;
  2086. }
  2087. if (DOMUtilsCommonUtils.isNodeList(element)) {
  2088. // 设置
  2089. element.forEach(($ele) => {
  2090. DOMUtilsContext.prepend($ele, content);
  2091. });
  2092. return;
  2093. }
  2094. if (typeof content === "string") {
  2095. element.insertAdjacentHTML("afterbegin", DOMUtilsCommonUtils.getSafeHTML(content));
  2096. }
  2097. else {
  2098. let $firstChild = element.firstChild;
  2099. if ($firstChild == null) {
  2100. element.prepend(content);
  2101. }
  2102. else {
  2103. element.insertBefore(content, element.firstChild);
  2104. }
  2105. }
  2106. }
  2107. /**
  2108. * 在元素后面添加兄弟元素或HTML字符串
  2109. * @param element 目标元素
  2110. * @param content 兄弟元素或HTML字符串
  2111. * @example
  2112. * // 元素a.xx后面添加一个元素
  2113. * DOMUtils.after(document.querySelector("a.xx"),document.querySelector("b.xx"))
  2114. * DOMUtils.after("a.xx","'<b class="xx"></b>")
  2115. * */
  2116. after(element, content) {
  2117. let DOMUtilsContext = this;
  2118. if (typeof element === "string") {
  2119. element = DOMUtilsContext.selectorAll(element);
  2120. }
  2121. if (element == null) {
  2122. return;
  2123. }
  2124. if (DOMUtilsCommonUtils.isNodeList(element)) {
  2125. // 设置
  2126. element.forEach(($ele) => {
  2127. DOMUtilsContext.after($ele, content);
  2128. });
  2129. return;
  2130. }
  2131. if (typeof content === "string") {
  2132. element.insertAdjacentHTML("afterend", DOMUtilsCommonUtils.getSafeHTML(content));
  2133. }
  2134. else {
  2135. let $parent = element.parentElement;
  2136. let $nextSlibling = element.nextSibling;
  2137. if (!$parent || $nextSlibling) {
  2138. // 任意一个不行
  2139. element.after(content);
  2140. }
  2141. else {
  2142. element.parentElement.insertBefore(content, element.nextSibling);
  2143. }
  2144. }
  2145. }
  2146. /**
  2147. * 在元素前面添加兄弟元素或HTML字符串
  2148. * @param element 目标元素
  2149. * @param content 兄弟元素或HTML字符串
  2150. * @example
  2151. * // 元素a.xx前面添加一个元素
  2152. * DOMUtils.before(document.querySelector("a.xx"),document.querySelector("b.xx"))
  2153. * DOMUtils.before("a.xx","'<b class="xx"></b>")
  2154. * */
  2155. before(element, content) {
  2156. let DOMUtilsContext = this;
  2157. if (typeof element === "string") {
  2158. element = DOMUtilsContext.selectorAll(element);
  2159. }
  2160. if (element == null) {
  2161. return;
  2162. }
  2163. if (DOMUtilsCommonUtils.isNodeList(element)) {
  2164. // 设置
  2165. element.forEach(($ele) => {
  2166. DOMUtilsContext.before($ele, content);
  2167. });
  2168. return;
  2169. }
  2170. if (typeof content === "string") {
  2171. element.insertAdjacentHTML("beforebegin", DOMUtilsCommonUtils.getSafeHTML(content));
  2172. }
  2173. else {
  2174. let $parent = element.parentElement;
  2175. if (!$parent) {
  2176. element.before(content);
  2177. }
  2178. else {
  2179. $parent.insertBefore(content, element);
  2180. }
  2181. }
  2182. }
  2183. /**
  2184. * 移除元素
  2185. * @param element 目标元素
  2186. * @example
  2187. * // 元素a.xx前面添加一个元素
  2188. * DOMUtils.remove(document.querySelector("a.xx"))
  2189. * DOMUtils.remove(document.querySelectorAll("a.xx"))
  2190. * DOMUtils.remove("a.xx")
  2191. * */
  2192. remove(element) {
  2193. let DOMUtilsContext = this;
  2194. if (typeof element === "string") {
  2195. element = DOMUtilsContext.selectorAll(element);
  2196. }
  2197. if (element == null) {
  2198. return;
  2199. }
  2200. if (DOMUtilsCommonUtils.isNodeList(element)) {
  2201. element.forEach(($ele) => {
  2202. DOMUtilsContext.remove($ele);
  2203. });
  2204. return;
  2205. }
  2206. element.remove();
  2207. }
  2208. /**
  2209. * 移除元素的所有子元素
  2210. * @param element 目标元素
  2211. * @example
  2212. * // 移除元素a.xx元素的所有子元素
  2213. * DOMUtils.empty(document.querySelector("a.xx"))
  2214. * DOMUtils.empty("a.xx")
  2215. * */
  2216. empty(element) {
  2217. let DOMUtilsContext = this;
  2218. if (typeof element === "string") {
  2219. element = DOMUtilsContext.selectorAll(element);
  2220. }
  2221. if (element == null) {
  2222. return;
  2223. }
  2224. if (DOMUtilsCommonUtils.isNodeList(element)) {
  2225. // 设置
  2226. element.forEach(($ele) => {
  2227. DOMUtilsContext.empty($ele);
  2228. });
  2229. return;
  2230. }
  2231. DOMUtilsContext.html(element, "");
  2232. }
  2233. /**
  2234. * 获取元素相对于文档的偏移坐标(加上文档的滚动条)
  2235. * @param element 目标元素
  2236. * @example
  2237. * // 获取元素a.xx的对于文档的偏移坐标
  2238. * DOMUtils.offset(document.querySelector("a.xx"))
  2239. * DOMUtils.offset("a.xx")
  2240. * > 0
  2241. */
  2242. offset(element) {
  2243. let DOMUtilsContext = this;
  2244. if (typeof element === "string") {
  2245. element = DOMUtilsContext.selector(element);
  2246. }
  2247. if (element == null) {
  2248. return;
  2249. }
  2250. let rect = element.getBoundingClientRect();
  2251. return {
  2252. /** y轴偏移 */
  2253. top: rect.top + DOMUtilsContext.windowApi.globalThis.scrollY,
  2254. /** x轴偏移 */
  2255. left: rect.left + DOMUtilsContext.windowApi.globalThis.scrollX,
  2256. };
  2257. }
  2258. width(element, isShow = false) {
  2259. let DOMUtilsContext = this;
  2260. if (typeof element === "string") {
  2261. element = DOMUtilsContext.selector(element);
  2262. }
  2263. if (element == null) {
  2264. // @ts-ignore
  2265. return;
  2266. }
  2267. if (DOMUtilsCommonUtils.isWin(element)) {
  2268. return DOMUtilsContext.windowApi.window.document.documentElement
  2269. .clientWidth;
  2270. }
  2271. if (element.nodeType === 9) {
  2272. /* Document文档节点 */
  2273. element = element;
  2274. return Math.max(element.body.scrollWidth, element.documentElement.scrollWidth, element.body.offsetWidth, element.documentElement.offsetWidth, element.documentElement.clientWidth);
  2275. }
  2276. if (isShow ||
  2277. (!isShow && DOMUtilsCommonUtils.isShow(element))) {
  2278. /* 已显示 */
  2279. /* 不从style中获取对应的宽度,因为可能使用了class定义了width !important */
  2280. element = element;
  2281. /* 如果element.style.width为空 则从css里面获取是否定义了width信息如果定义了 则读取css里面定义的宽度width */
  2282. if (parseFloat(DOMUtilsCommonUtils.getStyleValue(element, "width").toString()) > 0) {
  2283. return parseFloat(DOMUtilsCommonUtils.getStyleValue(element, "width").toString());
  2284. }
  2285. /* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetWidth来进行计算 */
  2286. if (element.offsetWidth > 0) {
  2287. let borderLeftWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderLeftWidth");
  2288. let borderRightWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderRightWidth");
  2289. let paddingLeft = DOMUtilsCommonUtils.getStyleValue(element, "paddingLeft");
  2290. let paddingRight = DOMUtilsCommonUtils.getStyleValue(element, "paddingRight");
  2291. let backHeight = parseFloat(element.offsetWidth.toString()) -
  2292. parseFloat(borderLeftWidth.toString()) -
  2293. parseFloat(borderRightWidth.toString()) -
  2294. parseFloat(paddingLeft.toString()) -
  2295. parseFloat(paddingRight.toString());
  2296. return parseFloat(backHeight.toString());
  2297. }
  2298. return 0;
  2299. }
  2300. else {
  2301. /* 未显示 */
  2302. element = element;
  2303. let { recovery } = DOMUtilsCommonUtils.showElement(element);
  2304. let width = DOMUtilsContext.width(element, true);
  2305. recovery();
  2306. return width;
  2307. }
  2308. }
  2309. height(element, isShow = false) {
  2310. let DOMUtilsContext = this;
  2311. if (DOMUtilsCommonUtils.isWin(element)) {
  2312. return DOMUtilsContext.windowApi.window.document.documentElement
  2313. .clientHeight;
  2314. }
  2315. if (typeof element === "string") {
  2316. element = DOMUtilsContext.selector(element);
  2317. }
  2318. if (element == null) {
  2319. // @ts-ignore
  2320. return;
  2321. }
  2322. if (element.nodeType === 9) {
  2323. element = element;
  2324. /* Document文档节点 */
  2325. return Math.max(element.body.scrollHeight, element.documentElement.scrollHeight, element.body.offsetHeight, element.documentElement.offsetHeight, element.documentElement.clientHeight);
  2326. }
  2327. if (isShow ||
  2328. (!isShow && DOMUtilsCommonUtils.isShow(element))) {
  2329. element = element;
  2330. /* 已显示 */
  2331. /* 从style中获取对应的高度,因为可能使用了class定义了width !important */
  2332. /* 如果element.style.height为空 则从css里面获取是否定义了height信息如果定义了 则读取css里面定义的高度height */
  2333. if (parseFloat(DOMUtilsCommonUtils.getStyleValue(element, "height").toString()) > 0) {
  2334. return parseFloat(DOMUtilsCommonUtils.getStyleValue(element, "height").toString());
  2335. }
  2336. /* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetHeight来进行计算 */
  2337. if (element.offsetHeight > 0) {
  2338. let borderTopWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderTopWidth");
  2339. let borderBottomWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderBottomWidth");
  2340. let paddingTop = DOMUtilsCommonUtils.getStyleValue(element, "paddingTop");
  2341. let paddingBottom = DOMUtilsCommonUtils.getStyleValue(element, "paddingBottom");
  2342. let backHeight = parseFloat(element.offsetHeight.toString()) -
  2343. parseFloat(borderTopWidth.toString()) -
  2344. parseFloat(borderBottomWidth.toString()) -
  2345. parseFloat(paddingTop.toString()) -
  2346. parseFloat(paddingBottom.toString());
  2347. return parseFloat(backHeight.toString());
  2348. }
  2349. return 0;
  2350. }
  2351. else {
  2352. /* 未显示 */
  2353. element = element;
  2354. let { recovery } = DOMUtilsCommonUtils.showElement(element);
  2355. let height = DOMUtilsContext.height(element, true);
  2356. recovery();
  2357. return height;
  2358. }
  2359. }
  2360. outerWidth(element, isShow = false) {
  2361. let DOMUtilsContext = this;
  2362. if (DOMUtilsCommonUtils.isWin(element)) {
  2363. return DOMUtilsContext.windowApi.window.innerWidth;
  2364. }
  2365. if (typeof element === "string") {
  2366. element = DOMUtilsContext.selector(element);
  2367. }
  2368. if (element == null) {
  2369. // @ts-ignore
  2370. return;
  2371. }
  2372. element = element;
  2373. if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
  2374. let style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
  2375. let marginLeft = DOMUtilsCommonUtils.getStyleValue(style, "marginLeft");
  2376. let marginRight = DOMUtilsCommonUtils.getStyleValue(style, "marginRight");
  2377. return element.offsetWidth + marginLeft + marginRight;
  2378. }
  2379. else {
  2380. let { recovery } = DOMUtilsCommonUtils.showElement(element);
  2381. let outerWidth = DOMUtilsContext.outerWidth(element, true);
  2382. recovery();
  2383. return outerWidth;
  2384. }
  2385. }
  2386. outerHeight(element, isShow = false) {
  2387. let DOMUtilsContext = this;
  2388. if (DOMUtilsCommonUtils.isWin(element)) {
  2389. return DOMUtilsContext.windowApi.window.innerHeight;
  2390. }
  2391. if (typeof element === "string") {
  2392. element = DOMUtilsContext.selector(element);
  2393. }
  2394. if (element == null) {
  2395. // @ts-ignore
  2396. return;
  2397. }
  2398. element = element;
  2399. if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
  2400. let style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
  2401. let marginTop = DOMUtilsCommonUtils.getStyleValue(style, "marginTop");
  2402. let marginBottom = DOMUtilsCommonUtils.getStyleValue(style, "marginBottom");
  2403. return element.offsetHeight + marginTop + marginBottom;
  2404. }
  2405. else {
  2406. let { recovery } = DOMUtilsCommonUtils.showElement(element);
  2407. let outerHeight = DOMUtilsContext.outerHeight(element, true);
  2408. recovery();
  2409. return outerHeight;
  2410. }
  2411. }
  2412. /**
  2413. * 在一定时间内改变元素的样式属性,实现动画效果
  2414. * @param element 需要进行动画的元素
  2415. * @param styles 动画结束时元素的样式属性
  2416. * @param duration 动画持续时间,单位为毫秒
  2417. * @param callback 动画结束后执行的函数
  2418. * @example
  2419. * // 监听元素a.xx的从显示变为隐藏
  2420. * DOMUtils.animate(document.querySelector("a.xx"),{ top:100},1000,function(){
  2421. * console.log("已往上位移100px")
  2422. * })
  2423. */
  2424. animate(element, styles, duration = 1000, callback = null) {
  2425. let DOMUtilsContext = this;
  2426. if (typeof element === "string") {
  2427. element = DOMUtilsContext.selectorAll(element);
  2428. }
  2429. if (element == null) {
  2430. return;
  2431. }
  2432. if (DOMUtilsCommonUtils.isNodeList(element)) {
  2433. // 设置
  2434. element.forEach(($ele) => {
  2435. DOMUtilsContext.animate($ele, styles, duration, callback);
  2436. });
  2437. return;
  2438. }
  2439. if (typeof duration !== "number" || duration <= 0) {
  2440. throw new TypeError("duration must be a positive number");
  2441. }
  2442. if (typeof callback !== "function" && callback !== undefined) {
  2443. throw new TypeError("callback must be a function or null");
  2444. }
  2445. if (typeof styles !== "object" || styles === undefined) {
  2446. throw new TypeError("styles must be an object");
  2447. }
  2448. if (Object.keys(styles).length === 0) {
  2449. throw new Error("styles must contain at least one property");
  2450. }
  2451. let start = performance.now();
  2452. let from = {};
  2453. let to = {};
  2454. for (let prop in styles) {
  2455. from[prop] =
  2456. element.style[prop] ||
  2457. DOMUtilsContext.windowApi.globalThis.getComputedStyle(element)[prop];
  2458. to[prop] = styles[prop];
  2459. }
  2460. let timer = DOMUtilsCommonUtils.setInterval(function () {
  2461. let timePassed = performance.now() - start;
  2462. let progress = timePassed / duration;
  2463. if (progress > 1) {
  2464. progress = 1;
  2465. }
  2466. for (let prop in styles) {
  2467. element.style[prop] =
  2468. from[prop] + (to[prop] - from[prop]) * progress + "px";
  2469. }
  2470. if (progress === 1) {
  2471. DOMUtilsCommonUtils.clearInterval(timer);
  2472. if (callback) {
  2473. callback();
  2474. }
  2475. }
  2476. }, 10);
  2477. }
  2478. /**
  2479. * 将一个元素包裹在指定的HTML元素中
  2480. * @param element 要包裹的元素
  2481. * @param wrapperHTML 要包裹的HTML元素的字符串表示形式
  2482. * @example
  2483. * // 将a.xx元素外面包裹一层div
  2484. * DOMUtils.wrap(document.querySelector("a.xx"),"<div></div>")
  2485. */
  2486. wrap(element, wrapperHTML) {
  2487. let DOMUtilsContext = this;
  2488. if (typeof element === "string") {
  2489. element = DOMUtilsContext.selectorAll(element);
  2490. }
  2491. if (element == null) {
  2492. return;
  2493. }
  2494. if (DOMUtilsCommonUtils.isNodeList(element)) {
  2495. // 设置
  2496. element.forEach(($ele) => {
  2497. DOMUtilsContext.wrap($ele, wrapperHTML);
  2498. });
  2499. return;
  2500. }
  2501. element = element;
  2502. // 创建一个新的div元素,并将wrapperHTML作为其innerHTML
  2503. let wrapper = DOMUtilsContext.windowApi.document.createElement("div");
  2504. DOMUtilsContext.html(wrapper, wrapperHTML);
  2505. let wrapperFirstChild = wrapper.firstChild;
  2506. // 将要包裹的元素插入目标元素前面
  2507. let parentElement = element.parentElement;
  2508. parentElement.insertBefore(wrapperFirstChild, element);
  2509. // 将要包裹的元素移动到wrapper中
  2510. wrapperFirstChild.appendChild(element);
  2511. }
  2512. prev(element) {
  2513. let DOMUtilsContext = this;
  2514. if (typeof element === "string") {
  2515. element = DOMUtilsContext.selector(element);
  2516. }
  2517. if (element == null) {
  2518. return;
  2519. }
  2520. return element.previousElementSibling;
  2521. }
  2522. next(element) {
  2523. let DOMUtilsContext = this;
  2524. if (typeof element === "string") {
  2525. element = DOMUtilsContext.selector(element);
  2526. }
  2527. if (element == null) {
  2528. return;
  2529. }
  2530. return element.nextElementSibling;
  2531. }
  2532. /**
  2533. * 取消挂载在window下的DOMUtils并返回DOMUtils
  2534. * @example
  2535. * let DOMUtils = window.DOMUtils.noConflict()
  2536. */
  2537. noConflict() {
  2538. let DOMUtilsContext = this;
  2539. if (DOMUtilsContext.windowApi.window.DOMUtils) {
  2540. DOMUtilsCommonUtils.delete(window, "DOMUtils");
  2541. }
  2542. DOMUtilsContext.windowApi.window.DOMUtils = this;
  2543. return this;
  2544. }
  2545. siblings(element) {
  2546. let DOMUtilsContext = this;
  2547. if (typeof element === "string") {
  2548. element = DOMUtilsContext.selector(element);
  2549. }
  2550. if (element == null) {
  2551. return;
  2552. }
  2553. return Array.from(element.parentElement
  2554. .children).filter((child) => child !== element);
  2555. }
  2556. /**
  2557. * 获取当前元素的父元素
  2558. * @param element 当前元素
  2559. * @returns 父元素
  2560. * @example
  2561. * // 获取a.xx元素的父元素
  2562. * DOMUtils.parent(document.querySelector("a.xx"))
  2563. * DOMUtils.parent("a.xx")
  2564. * > <div ...>....</div>
  2565. */
  2566. parent(element) {
  2567. let DOMUtilsContext = this;
  2568. if (typeof element === "string") {
  2569. element = DOMUtilsContext.selector(element);
  2570. }
  2571. if (element == null) {
  2572. return;
  2573. }
  2574. if (DOMUtilsCommonUtils.isNodeList(element)) {
  2575. let resultArray = [];
  2576. element.forEach(($ele) => {
  2577. resultArray.push(DOMUtilsContext.parent($ele));
  2578. });
  2579. return resultArray;
  2580. }
  2581. else {
  2582. return element.parentElement;
  2583. }
  2584. }
  2585. parseHTML(html, useParser = false, isComplete = false) {
  2586. let DOMUtilsContext = this;
  2587. // 去除html前后的空格
  2588. html = html.trim();
  2589. function parseHTMLByDOMParser() {
  2590. let parser = new DOMParser();
  2591. if (isComplete) {
  2592. return parser.parseFromString(html, "text/html");
  2593. }
  2594. else {
  2595. return parser.parseFromString(html, "text/html").body.firstChild;
  2596. }
  2597. }
  2598. function parseHTMLByCreateDom() {
  2599. let tempDIV = DOMUtilsContext.windowApi.document.createElement("div");
  2600. DOMUtilsContext.html(tempDIV, html);
  2601. if (isComplete) {
  2602. return tempDIV;
  2603. }
  2604. else {
  2605. return tempDIV.firstChild;
  2606. }
  2607. }
  2608. if (useParser) {
  2609. return parseHTMLByDOMParser();
  2610. }
  2611. else {
  2612. return parseHTMLByCreateDom();
  2613. }
  2614. }
  2615. /**
  2616. * 序列化表单元素
  2617. * @param $form 表单元素
  2618. * @example
  2619. * DOMUtils.serialize(document.querySelector("form"))
  2620. * > xxx=xxx&aaa=
  2621. */
  2622. serialize($form) {
  2623. const elements = $form.elements;
  2624. let serializedArray = [];
  2625. for (let i = 0; i < elements.length; i++) {
  2626. const element = elements[i];
  2627. if (element.name &&
  2628. !element.disabled &&
  2629. (element.checked ||
  2630. [
  2631. "text",
  2632. "hidden",
  2633. "password",
  2634. "textarea",
  2635. "select-one",
  2636. "select-multiple",
  2637. ].includes(element.type))) {
  2638. if (element.type === "select-multiple") {
  2639. for (let j = 0; j < element.options.length; j++) {
  2640. if (element.options[j].selected) {
  2641. serializedArray.push({
  2642. name: element.name,
  2643. value: element.options[j].value,
  2644. });
  2645. }
  2646. }
  2647. }
  2648. else {
  2649. serializedArray.push({ name: element.name, value: element.value });
  2650. }
  2651. }
  2652. }
  2653. return serializedArray
  2654. .map((item) => `${encodeURIComponent(item.name)}=${encodeURIComponent(item.value)}`)
  2655. .join("&");
  2656. }
  2657. /**
  2658. * 显示元素
  2659. * @param target 当前元素
  2660. * @param checkVisiblie 是否检测元素是否显示
  2661. * + true (默认)如果检测到还未显示,则强制使用display: unset !important;
  2662. * + false 不检测,直接设置display属性为空
  2663. * @example
  2664. * // 显示a.xx元素
  2665. * DOMUtils.show(document.querySelector("a.xx"))
  2666. * DOMUtils.show(document.querySelectorAll("a.xx"))
  2667. * DOMUtils.show("a.xx")
  2668. */
  2669. show(target, checkVisiblie = true) {
  2670. let DOMUtilsContext = this;
  2671. if (target == null) {
  2672. return;
  2673. }
  2674. if (typeof target === "string") {
  2675. target = DOMUtilsContext.selectorAll(target);
  2676. }
  2677. if (target instanceof NodeList || target instanceof Array) {
  2678. target = target;
  2679. for (const element of target) {
  2680. DOMUtilsContext.show(element, checkVisiblie);
  2681. }
  2682. }
  2683. else {
  2684. target = target;
  2685. target.style.display = "";
  2686. if (checkVisiblie) {
  2687. if (!DOMUtilsCommonUtils.isShow(target)) {
  2688. /* 仍然是不显示,尝试使用强覆盖 */
  2689. target.style.setProperty("display", "unset", "important");
  2690. }
  2691. }
  2692. }
  2693. }
  2694. /**
  2695. * 隐藏元素
  2696. * @param target 当前元素
  2697. * @param checkVisiblie 是否检测元素是否显示
  2698. * + true (默认)如果检测到显示,则强制使用display: none !important;
  2699. * + false 不检测,直接设置display属性为none
  2700. * @example
  2701. * // 隐藏a.xx元素
  2702. * DOMUtils.hide(document.querySelector("a.xx"))
  2703. * DOMUtils.hide(document.querySelectorAll("a.xx"))
  2704. * DOMUtils.hide("a.xx")
  2705. */
  2706. hide(target, checkVisiblie = true) {
  2707. let DOMUtilsContext = this;
  2708. if (target == null) {
  2709. return;
  2710. }
  2711. if (typeof target === "string") {
  2712. target = DOMUtilsContext.selectorAll(target);
  2713. }
  2714. if (target instanceof NodeList || target instanceof Array) {
  2715. target = target;
  2716. for (const element of target) {
  2717. DOMUtilsContext.hide(element, checkVisiblie);
  2718. }
  2719. }
  2720. else {
  2721. target = target;
  2722. target.style.display = "none";
  2723. if (checkVisiblie) {
  2724. if (DOMUtilsCommonUtils.isShow(target)) {
  2725. /* 仍然是显示,尝试使用强覆盖 */
  2726. target.style.setProperty("display", "none", "important");
  2727. }
  2728. }
  2729. }
  2730. }
  2731. /**
  2732. * 淡入元素
  2733. * @param element 当前元素
  2734. * @param duration 动画持续时间(毫秒),默认400毫秒
  2735. * @param callback 动画结束的回调
  2736. * @example
  2737. * // 元素a.xx淡入
  2738. * DOMUtils.fadeIn(document.querySelector("a.xx"),2500,()=>{
  2739. * console.log("淡入完毕");
  2740. * })
  2741. * DOMUtils.fadeIn("a.xx",undefined,()=>{
  2742. * console.log("淡入完毕");
  2743. * })
  2744. */
  2745. fadeIn(element, duration = 400, callback) {
  2746. if (element == null) {
  2747. return;
  2748. }
  2749. let DOMUtilsContext = this;
  2750. if (typeof element === "string") {
  2751. element = DOMUtilsContext.selectorAll(element);
  2752. }
  2753. if (DOMUtilsCommonUtils.isNodeList(element)) {
  2754. // 设置
  2755. element.forEach(($ele) => {
  2756. DOMUtilsContext.fadeIn($ele, duration, callback);
  2757. });
  2758. return;
  2759. }
  2760. element.style.opacity = "0";
  2761. element.style.display = "";
  2762. let start = null;
  2763. let timer = null;
  2764. function step(timestamp) {
  2765. if (!start)
  2766. start = timestamp;
  2767. let progress = timestamp - start;
  2768. element = element;
  2769. element.style.opacity = Math.min(progress / duration, 1).toString();
  2770. if (progress < duration) {
  2771. DOMUtilsContext.windowApi.window.requestAnimationFrame(step);
  2772. }
  2773. else {
  2774. if (callback && typeof callback === "function") {
  2775. callback();
  2776. }
  2777. DOMUtilsContext.windowApi.window.cancelAnimationFrame(timer);
  2778. }
  2779. }
  2780. timer = DOMUtilsContext.windowApi.window.requestAnimationFrame(step);
  2781. }
  2782. /**
  2783. * 淡出元素
  2784. * @param element 当前元素
  2785. * @param duration 动画持续时间(毫秒),默认400毫秒
  2786. * @param callback 动画结束的回调
  2787. * @example
  2788. * // 元素a.xx淡出
  2789. * DOMUtils.fadeOut(document.querySelector("a.xx"),2500,()=>{
  2790. * console.log("淡出完毕");
  2791. * })
  2792. * DOMUtils.fadeOut("a.xx",undefined,()=>{
  2793. * console.log("淡出完毕");
  2794. * })
  2795. */
  2796. fadeOut(element, duration = 400, callback) {
  2797. let DOMUtilsContext = this;
  2798. if (element == null) {
  2799. return;
  2800. }
  2801. if (typeof element === "string") {
  2802. element = DOMUtilsContext.selectorAll(element);
  2803. }
  2804. if (DOMUtilsCommonUtils.isNodeList(element)) {
  2805. // 设置
  2806. element.forEach(($ele) => {
  2807. DOMUtilsContext.fadeOut($ele, duration, callback);
  2808. });
  2809. return;
  2810. }
  2811. element.style.opacity = "1";
  2812. let start = null;
  2813. let timer = null;
  2814. function step(timestamp) {
  2815. if (!start)
  2816. start = timestamp;
  2817. let progress = timestamp - start;
  2818. element = element;
  2819. element.style.opacity = Math.max(1 - progress / duration, 0).toString();
  2820. if (progress < duration) {
  2821. DOMUtilsContext.windowApi.window.requestAnimationFrame(step);
  2822. }
  2823. else {
  2824. element.style.display = "none";
  2825. if (typeof callback === "function") {
  2826. callback();
  2827. }
  2828. DOMUtilsContext.windowApi.window.cancelAnimationFrame(timer);
  2829. }
  2830. }
  2831. timer = DOMUtilsContext.windowApi.window.requestAnimationFrame(step);
  2832. }
  2833. /**
  2834. * 切换元素的显示和隐藏状态
  2835. * @param element 当前元素
  2836. * @param checkVisiblie 是否检测元素是否显示
  2837. * @example
  2838. * // 如果元素a.xx当前是隐藏,则显示,如果是显示,则隐藏
  2839. * DOMUtils.toggle(document.querySelector("a.xx"))
  2840. * DOMUtils.toggle("a.xx")
  2841. */
  2842. toggle(element, checkVisiblie) {
  2843. let DOMUtilsContext = this;
  2844. if (typeof element === "string") {
  2845. element = DOMUtilsContext.selectorAll(element);
  2846. }
  2847. if (element == null) {
  2848. return;
  2849. }
  2850. if (DOMUtilsCommonUtils.isNodeList(element)) {
  2851. // 设置
  2852. element.forEach(($ele) => {
  2853. DOMUtilsContext.toggle($ele);
  2854. });
  2855. return;
  2856. }
  2857. if (DOMUtilsContext.windowApi.globalThis
  2858. .getComputedStyle(element)
  2859. .getPropertyValue("display") === "none") {
  2860. DOMUtilsContext.show(element, checkVisiblie);
  2861. }
  2862. else {
  2863. DOMUtilsContext.hide(element, checkVisiblie);
  2864. }
  2865. }
  2866. /**
  2867. * 创建一个新的DOMUtils实例
  2868. * @param option
  2869. * @returns
  2870. */
  2871. createDOMUtils(option) {
  2872. return new DOMUtils(option);
  2873. }
  2874. /**
  2875. * 获取文字的位置信息
  2876. * @param $input 输入框
  2877. * @param selectionStart 起始位置
  2878. * @param selectionEnd 结束位置
  2879. * @example
  2880. * DOMUtils.getTextBoundingRect(document.querySelector("input"));
  2881. */
  2882. getTextBoundingRect($input, selectionStart, selectionEnd) {
  2883. let DOMUtilsContext = this;
  2884. // Basic parameter validation
  2885. if (!$input || !("value" in $input))
  2886. return $input;
  2887. if (selectionStart == null) {
  2888. selectionStart = $input.selectionStart || 0;
  2889. }
  2890. if (selectionEnd == null) {
  2891. selectionEnd = $input.selectionEnd || 0;
  2892. }
  2893. if (typeof selectionStart == "string")
  2894. selectionStart = parseFloat(selectionStart);
  2895. if (typeof selectionStart != "number" || isNaN(selectionStart)) {
  2896. selectionStart = 0;
  2897. }
  2898. if (selectionStart < 0)
  2899. selectionStart = 0;
  2900. else
  2901. selectionStart = Math.min($input.value.length, selectionStart);
  2902. if (typeof selectionEnd == "string")
  2903. selectionEnd = parseFloat(selectionEnd);
  2904. if (typeof selectionEnd != "number" ||
  2905. isNaN(selectionEnd) ||
  2906. selectionEnd < selectionStart) {
  2907. selectionEnd = selectionStart;
  2908. }
  2909. if (selectionEnd < 0)
  2910. selectionEnd = 0;
  2911. else
  2912. selectionEnd = Math.min($input.value.length, selectionEnd);
  2913. // If available (thus IE), use the createTextRange method
  2914. // @ts-ignore
  2915. if (typeof $input.createTextRange == "function") {
  2916. let range = $input.createTextRange();
  2917. range.collapse(true);
  2918. range.moveStart("character", selectionStart);
  2919. range.moveEnd("character", selectionEnd - selectionStart);
  2920. return range.getBoundingClientRect();
  2921. }
  2922. // createTextRange is not supported, create a fake text range
  2923. let offset = getInputOffset(), topPos = offset.top, leftPos = offset.left, width = getInputCSS("width", true), height = getInputCSS("height", true);
  2924. // Styles to simulate a node in an input field
  2925. let cssDefaultStyles = "white-space:pre;padding:0;margin:0;", listOfModifiers = [
  2926. "direction",
  2927. "font-family",
  2928. "font-size",
  2929. "font-size-adjust",
  2930. "font-variant",
  2931. "font-weight",
  2932. "font-style",
  2933. "letter-spacing",
  2934. "line-height",
  2935. "text-align",
  2936. "text-indent",
  2937. "text-transform",
  2938. "word-wrap",
  2939. "word-spacing",
  2940. ];
  2941. topPos += getInputCSS("padding-top", true);
  2942. topPos += getInputCSS("border-top-width", true);
  2943. leftPos += getInputCSS("padding-left", true);
  2944. leftPos += getInputCSS("border-left-width", true);
  2945. leftPos += 1; //Seems to be necessary
  2946. for (let index = 0; index < listOfModifiers.length; index++) {
  2947. let property = listOfModifiers[index];
  2948. // @ts-ignore
  2949. cssDefaultStyles += property + ":" + getInputCSS(property) + ";";
  2950. }
  2951. // End of CSS variable checks
  2952. // 不能为空,不然获取不到高度
  2953. let text = $input.value || "G", textLen = text.length, fakeClone = DOMUtilsContext.windowApi.document.createElement("div");
  2954. if (selectionStart > 0)
  2955. appendPart(0, selectionStart);
  2956. var fakeRange = appendPart(selectionStart, selectionEnd);
  2957. if (textLen > selectionEnd)
  2958. appendPart(selectionEnd, textLen);
  2959. // Styles to inherit the font styles of the element
  2960. fakeClone.style.cssText = cssDefaultStyles;
  2961. // Styles to position the text node at the desired position
  2962. fakeClone.style.position = "absolute";
  2963. fakeClone.style.top = topPos + "px";
  2964. fakeClone.style.left = leftPos + "px";
  2965. fakeClone.style.width = width + "px";
  2966. fakeClone.style.height = height + "px";
  2967. DOMUtilsContext.windowApi.document.body.appendChild(fakeClone);
  2968. var returnValue = fakeRange.getBoundingClientRect(); //Get rect
  2969. fakeClone?.parentNode?.removeChild(fakeClone); //Remove temp
  2970. return returnValue;
  2971. // Local functions for readability of the previous code
  2972. /**
  2973. *
  2974. * @param start
  2975. * @param end
  2976. * @returns
  2977. */
  2978. function appendPart(start, end) {
  2979. var span = DOMUtilsContext.windowApi.document.createElement("span");
  2980. span.style.cssText = cssDefaultStyles; //Force styles to prevent unexpected results
  2981. span.textContent = text.substring(start, end);
  2982. fakeClone.appendChild(span);
  2983. return span;
  2984. }
  2985. // Computing offset position
  2986. function getInputOffset() {
  2987. let body = DOMUtilsContext.windowApi.document.body, win = DOMUtilsContext.windowApi.document.defaultView, docElem = DOMUtilsContext.windowApi.document.documentElement, $box = DOMUtilsContext.windowApi.document.createElement("div");
  2988. $box.style.paddingLeft = $box.style.width = "1px";
  2989. body.appendChild($box);
  2990. var isBoxModel = $box.offsetWidth == 2;
  2991. body.removeChild($box);
  2992. let $boxRect = $input.getBoundingClientRect();
  2993. var clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0, scrollTop = win.pageYOffset ||
  2994. (isBoxModel && docElem.scrollTop) ||
  2995. body.scrollTop, scrollLeft = win.pageXOffset ||
  2996. (isBoxModel && docElem.scrollLeft) ||
  2997. body.scrollLeft;
  2998. return {
  2999. top: $boxRect.top + scrollTop - clientTop,
  3000. left: $boxRect.left + scrollLeft - clientLeft,
  3001. };
  3002. }
  3003. /**
  3004. *
  3005. * @param prop
  3006. * @param isNumber
  3007. * @returns
  3008. */
  3009. function getInputCSS(prop, isNumber) {
  3010. var val = DOMUtilsContext.windowApi.document
  3011. .defaultView.getComputedStyle($input, null)
  3012. .getPropertyValue(prop);
  3013. return isNumber ? parseFloat(val) : val;
  3014. }
  3015. }
  3016. }
  3017. let domUtils = new DOMUtils();
  3018.  
  3019. return domUtils;
  3020.  
  3021. }));
  3022. //# sourceMappingURL=index.umd.js.map

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址