@whitesev/domutils 1.3.4 → 1.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/index.amd.js +466 -98
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.cjs.js +466 -98
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.esm.js +466 -98
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.iife.js +466 -98
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.system.js +466 -98
  10. package/dist/index.system.js.map +1 -1
  11. package/dist/index.umd.js +466 -98
  12. package/dist/index.umd.js.map +1 -1
  13. package/dist/types/src/DOMUtils.d.ts +60 -39
  14. package/dist/types/src/DOMUtilsEvent.d.ts +52 -13
  15. package/dist/types/src/types/global.d.ts +6 -0
  16. package/package.json +1 -1
  17. package/src/DOMUtils.ts +459 -166
  18. package/src/DOMUtilsEvent.ts +197 -42
  19. package/src/types/global.d.ts +6 -0
package/dist/index.system.js CHANGED
@@ -598,11 +598,18 @@ System.register('DOMUtils', [], (function (exports) {
598
598
  click(element, handler, details, useDispatchToTriggerEvent) {
599
599
  let DOMUtilsContext = this;
600
600
  if (typeof element === "string") {
601
- element = DOMUtilsContext.windowApi.document.querySelector(element);
601
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
602
602
  }
603
603
  if (element == null) {
604
604
  return;
605
605
  }
606
+ if (isNodeList(element)) {
607
+ // 设置
608
+ element.forEach(($ele) => {
609
+ DOMUtilsContext.click($ele, handler, details, useDispatchToTriggerEvent);
610
+ });
611
+ return;
612
+ }
606
613
  if (handler == null) {
607
614
  DOMUtilsContext.trigger(element, "click", details, useDispatchToTriggerEvent);
608
615
  }
@@ -632,6 +639,13 @@ System.register('DOMUtils', [], (function (exports) {
632
639
  if (element == null) {
633
640
  return;
634
641
  }
642
+ if (isNodeList(element)) {
643
+ // 设置
644
+ element.forEach(($ele) => {
645
+ DOMUtilsContext.focus($ele, handler, details, useDispatchToTriggerEvent);
646
+ });
647
+ return;
648
+ }
635
649
  if (handler === null) {
636
650
  DOMUtilsContext.trigger(element, "blur", details, useDispatchToTriggerEvent);
637
651
  }
@@ -656,11 +670,18 @@ System.register('DOMUtils', [], (function (exports) {
656
670
  focus(element, handler, details, useDispatchToTriggerEvent) {
657
671
  let DOMUtilsContext = this;
658
672
  if (typeof element === "string") {
659
- element = DOMUtilsContext.windowApi.document.querySelector(element);
673
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
660
674
  }
661
675
  if (element == null) {
662
676
  return;
663
677
  }
678
+ if (isNodeList(element)) {
679
+ // 设置
680
+ element.forEach(($ele) => {
681
+ DOMUtilsContext.focus($ele, handler, details, useDispatchToTriggerEvent);
682
+ });
683
+ return;
684
+ }
664
685
  if (handler == null) {
665
686
  DOMUtilsContext.trigger(element, "focus", details, useDispatchToTriggerEvent);
666
687
  }
@@ -685,18 +706,25 @@ System.register('DOMUtils', [], (function (exports) {
685
706
  hover(element, handler, option) {
686
707
  let DOMUtilsContext = this;
687
708
  if (typeof element === "string") {
688
- element = DOMUtilsContext.windowApi.document.querySelector(element);
709
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
689
710
  }
690
711
  if (element == null) {
691
712
  return;
692
713
  }
714
+ if (isNodeList(element)) {
715
+ // 设置
716
+ element.forEach(($ele) => {
717
+ DOMUtilsContext.hover($ele, handler, option);
718
+ });
719
+ return;
720
+ }
693
721
  DOMUtilsContext.on(element, "mouseenter", null, handler, option);
694
722
  DOMUtilsContext.on(element, "mouseleave", null, handler, option);
695
723
  }
696
724
  /**
697
725
  * 当按键松开时触发事件
698
726
  * keydown - > keypress - > keyup
699
- * @param target 当前元素
727
+ * @param element 当前元素
700
728
  * @param handler 事件处理函数
701
729
  * @param option 配置
702
730
  * @example
@@ -708,20 +736,27 @@ System.register('DOMUtils', [], (function (exports) {
708
736
  * console.log("按键松开");
709
737
  * })
710
738
  */
711
- keyup(target, handler, option) {
739
+ keyup(element, handler, option) {
712
740
  let DOMUtilsContext = this;
713
- if (target == null) {
741
+ if (element == null) {
714
742
  return;
715
743
  }
716
- if (typeof target === "string") {
717
- target = DOMUtilsContext.windowApi.document.querySelector(target);
744
+ if (typeof element === "string") {
745
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
718
746
  }
719
- DOMUtilsContext.on(target, "keyup", null, handler, option);
747
+ if (isNodeList(element)) {
748
+ // 设置
749
+ element.forEach(($ele) => {
750
+ DOMUtilsContext.keyup($ele, handler, option);
751
+ });
752
+ return;
753
+ }
754
+ DOMUtilsContext.on(element, "keyup", null, handler, option);
720
755
  }
721
756
  /**
722
757
  * 当按键按下时触发事件
723
758
  * keydown - > keypress - > keyup
724
- * @param target 目标
759
+ * @param element 目标
725
760
  * @param handler 事件处理函数
726
761
  * @param option 配置
727
762
  * @example
@@ -733,20 +768,27 @@ System.register('DOMUtils', [], (function (exports) {
733
768
  * console.log("按键按下");
734
769
  * })
735
770
  */
736
- keydown(target, handler, option) {
771
+ keydown(element, handler, option) {
737
772
  let DOMUtilsContext = this;
738
- if (target == null) {
773
+ if (element == null) {
739
774
  return;
740
775
  }
741
- if (typeof target === "string") {
742
- target = DOMUtilsContext.windowApi.document.querySelector(target);
776
+ if (typeof element === "string") {
777
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
743
778
  }
744
- DOMUtilsContext.on(target, "keydown", null, handler, option);
779
+ if (isNodeList(element)) {
780
+ // 设置
781
+ element.forEach(($ele) => {
782
+ DOMUtilsContext.keydown($ele, handler, option);
783
+ });
784
+ return;
785
+ }
786
+ DOMUtilsContext.on(element, "keydown", null, handler, option);
745
787
  }
746
788
  /**
747
789
  * 当按键按下时触发事件
748
790
  * keydown - > keypress - > keyup
749
- * @param target 目标
791
+ * @param element 目标
750
792
  * @param handler 事件处理函数
751
793
  * @param option 配置
752
794
  * @example
@@ -758,20 +800,27 @@ System.register('DOMUtils', [], (function (exports) {
758
800
  * console.log("按键按下");
759
801
  * })
760
802
  */
761
- keypress(target, handler, option) {
803
+ keypress(element, handler, option) {
762
804
  let DOMUtilsContext = this;
763
- if (target == null) {
805
+ if (element == null) {
764
806
  return;
765
807
  }
766
- if (typeof target === "string") {
767
- target = DOMUtilsContext.windowApi.document.querySelector(target);
808
+ if (typeof element === "string") {
809
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
810
+ }
811
+ if (isNodeList(element)) {
812
+ // 设置
813
+ element.forEach(($ele) => {
814
+ DOMUtilsContext.keypress($ele, handler, option);
815
+ });
816
+ return;
768
817
  }
769
- DOMUtilsContext.on(target, "keypress", null, handler, option);
818
+ DOMUtilsContext.on(element, "keypress", null, handler, option);
770
819
  }
771
820
  /**
772
821
  * 监听某个元素键盘按键事件或window全局按键事件
773
822
  * 按下有值的键时触发，按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件，再触发keypress事件。
774
- * @param target 需要监听的对象，可以是全局Window或者某个元素
823
+ * @param element 需要监听的对象，可以是全局Window或者某个元素
775
824
  * @param eventName 事件名，默认keypress
776
825
  * @param callback 自己定义的回调事件，参数1为当前的key，参数2为组合按键，数组类型，包含ctrl、shift、alt和meta（win键或mac的cmd键）
777
826
  * @param options 监听事件的配置
@@ -831,7 +880,11 @@ System.register('DOMUtils', [], (function (exports) {
831
880
  搜索 170
832
881
  收藏 171
833
882
  **/
834
- listenKeyboard(target, eventName = "keypress", callback, options) {
883
+ listenKeyboard(element, eventName = "keypress", callback, options) {
884
+ let DOMUtilsContext = this;
885
+ if (typeof element === "string") {
886
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
887
+ }
835
888
  let keyboardEventCallBack = function (event) {
836
889
  /** 键名 */
837
890
  let keyName = event.key || event.code;
@@ -855,29 +908,90 @@ System.register('DOMUtils', [], (function (exports) {
855
908
  callback(keyName, keyValue, otherCodeList, event);
856
909
  }
857
910
  };
858
- this.on(target, eventName, keyboardEventCallBack, options);
911
+ DOMUtilsContext.on(element, eventName, keyboardEventCallBack, options);
859
912
  return {
860
913
  removeListen: () => {
861
- this.off(target, eventName, keyboardEventCallBack, options);
914
+ DOMUtilsContext.off(element, eventName, keyboardEventCallBack, options);
862
915
  },
863
916
  };
864
917
  }
918
+ selector(selector) {
919
+ return this.selectorAll(selector)[0];
920
+ }
921
+ selectorAll(selector) {
922
+ const context = this;
923
+ selector = selector.trim();
924
+ if (selector.match(/[^\s]{1}:empty$/gi)) {
925
+ // empty 语法
926
+ selector = selector.replace(/:empty$/gi, "");
927
+ return Array.from(context.windowApi.document.querySelectorAll(selector)).filter(($ele) => {
928
+ return $ele?.innerHTML?.trim() === "";
929
+ });
930
+ }
931
+ else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/gi) ||
932
+ selector.match(/[^\s]{1}:contains\('(.*)'\)$/gi)) {
933
+ // contains 语法
934
+ let textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
935
+ let text = textMatch[2];
936
+ selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
937
+ return Array.from(context.windowApi.document.querySelectorAll(selector)).filter(($ele) => {
938
+ // @ts-ignore
939
+ return ($ele?.textContent || $ele?.innerText)?.includes(text);
940
+ });
941
+ }
942
+ else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/gi) ||
943
+ selector.match(/[^\s]{1}:regexp\('(.*)'\)$/gi)) {
944
+ // regexp 语法
945
+ let textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
946
+ let text = textMatch[2];
947
+ let regexp = new RegExp(text);
948
+ selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
949
+ return Array.from(context.windowApi.document.querySelectorAll(selector)).filter(($ele) => {
950
+ // @ts-ignore
951
+ return Boolean(($ele?.textContent || $ele?.innerText)?.match(regexp));
952
+ });
953
+ }
954
+ else {
955
+ // 普通语法
956
+ return Array.from(context.windowApi.document.querySelectorAll(selector));
957
+ }
958
+ }
865
959
  }
866
960
 
961
+ /**
962
+ * 判断是否是元素列表
963
+ * @param $ele
964
+ */
965
+ const isNodeList = ($ele) => {
966
+ return Array.isArray($ele) || $ele instanceof NodeList;
967
+ };
867
968
  class DOMUtils extends DOMUtilsEvent {
868
969
  constructor(option) {
869
970
  super(option);
870
971
  }
871
972
  /** 版本号 */
872
- version = "2024.10.19";
973
+ version = "2024.10.22";
873
974
  attr(element, attrName, attrValue) {
874
975
  let DOMUtilsContext = this;
875
976
  if (typeof element === "string") {
876
- element = DOMUtilsContext.windowApi.document.querySelector(element);
977
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
877
978
  }
878
979
  if (element == null) {
879
980
  return;
880
981
  }
982
+ if (isNodeList(element)) {
983
+ if (attrValue == null) {
984
+ // 获取属性
985
+ return DOMUtilsContext.attr(element[0], attrName, attrValue);
986
+ }
987
+ else {
988
+ // 设置属性
989
+ element.forEach(($ele) => {
990
+ DOMUtilsContext.attr($ele, attrName, attrValue);
991
+ });
992
+ return;
993
+ }
994
+ }
881
995
  if (attrValue == null) {
882
996
  return element.getAttribute(attrName);
883
997
  }
@@ -966,14 +1080,40 @@ System.register('DOMUtils', [], (function (exports) {
966
1080
  return propertyValue;
967
1081
  }
968
1082
  if (typeof element === "string") {
969
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1083
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
970
1084
  }
971
1085
  if (element == null) {
972
1086
  return;
973
1087
  }
1088
+ if (isNodeList(element)) {
1089
+ if (typeof property === "string") {
1090
+ if (value == null) {
1091
+ // 获取属性
1092
+ return DOMUtilsContext.css(element[0], property);
1093
+ }
1094
+ else {
1095
+ // 设置属性
1096
+ element.forEach(($ele) => {
1097
+ DOMUtilsContext.css($ele, property);
1098
+ });
1099
+ return;
1100
+ }
1101
+ }
1102
+ else if (typeof property === "object") {
1103
+ // 设置属性
1104
+ element.forEach(($ele) => {
1105
+ DOMUtilsContext.css($ele, property);
1106
+ });
1107
+ return;
1108
+ }
1109
+ else ;
1110
+ return;
1111
+ }
974
1112
  if (typeof property === "string") {
975
1113
  if (value == null) {
976
- return getComputedStyle(element).getPropertyValue(property);
1114
+ return DOMUtilsContext.windowApi.globalThis
1115
+ .getComputedStyle(element)
1116
+ .getPropertyValue(property);
977
1117
  }
978
1118
  else {
979
1119
  if (value === "string" && value.includes("!important")) {
@@ -997,15 +1137,29 @@ System.register('DOMUtils', [], (function (exports) {
997
1137
  }
998
1138
  }
999
1139
  }
1140
+ else ;
1000
1141
  }
1001
1142
  text(element, text) {
1002
1143
  let DOMUtilsContext = this;
1003
1144
  if (typeof element === "string") {
1004
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1145
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1005
1146
  }
1006
1147
  if (element == null) {
1007
1148
  return;
1008
1149
  }
1150
+ if (isNodeList(element)) {
1151
+ if (text == null) {
1152
+ // 获取
1153
+ return DOMUtilsContext.text(element[0]);
1154
+ }
1155
+ else {
1156
+ // 设置
1157
+ element.forEach(($ele) => {
1158
+ DOMUtilsContext.text($ele, text);
1159
+ });
1160
+ }
1161
+ return;
1162
+ }
1009
1163
  if (text == null) {
1010
1164
  return element.textContent || element.innerText;
1011
1165
  }
@@ -1024,15 +1178,30 @@ System.register('DOMUtils', [], (function (exports) {
1024
1178
  html(element, html) {
1025
1179
  let DOMUtilsContext = this;
1026
1180
  if (typeof element === "string") {
1027
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1181
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1028
1182
  }
1029
1183
  if (element == null) {
1030
1184
  return;
1031
1185
  }
1186
+ if (isNodeList(element)) {
1187
+ if (html == null) {
1188
+ // 获取
1189
+ return DOMUtilsContext.html(element[0]);
1190
+ }
1191
+ else {
1192
+ // 设置
1193
+ element.forEach(($ele) => {
1194
+ DOMUtilsContext.html($ele, html);
1195
+ });
1196
+ }
1197
+ return;
1198
+ }
1032
1199
  if (html == null) {
1200
+ // 获取
1033
1201
  return element.innerHTML;
1034
1202
  }
1035
1203
  else {
1204
+ // 设置
1036
1205
  if (html instanceof Element) {
1037
1206
  html = html.innerHTML;
1038
1207
  }
@@ -1055,7 +1224,7 @@ System.register('DOMUtils', [], (function (exports) {
1055
1224
  recovery();
1056
1225
  return transformInfo;
1057
1226
  }
1058
- let elementTransform = getComputedStyle(element).transform;
1227
+ let elementTransform = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element).transform;
1059
1228
  if (elementTransform != null &&
1060
1229
  elementTransform !== "none" &&
1061
1230
  elementTransform !== "") {
@@ -1079,12 +1248,26 @@ System.register('DOMUtils', [], (function (exports) {
1079
1248
  val(element, value) {
1080
1249
  let DOMUtilsContext = this;
1081
1250
  if (typeof element === "string") {
1082
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1251
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1083
1252
  }
1084
1253
  if (element == null) {
1085
1254
  return;
1086
1255
  }
1256
+ if (isNodeList(element)) {
1257
+ if (value == null) {
1258
+ // 获取
1259
+ return DOMUtilsContext.val(element[0]);
1260
+ }
1261
+ else {
1262
+ // 设置
1263
+ element.forEach(($ele) => {
1264
+ DOMUtilsContext.val($ele, value);
1265
+ });
1266
+ }
1267
+ return;
1268
+ }
1087
1269
  if (value == null) {
1270
+ // 获取
1088
1271
  if (element.localName === "input" &&
1089
1272
  (element.type === "checkbox" || element.type === "radio")) {
1090
1273
  return element.checked;
@@ -1094,6 +1277,7 @@ System.register('DOMUtils', [], (function (exports) {
1094
1277
  }
1095
1278
  }
1096
1279
  else {
1280
+ // 设置
1097
1281
  if (element.localName === "input" &&
1098
1282
  (element.type === "checkbox" || element.type === "radio")) {
1099
1283
  element.checked = !!value;
@@ -1105,17 +1289,30 @@ System.register('DOMUtils', [], (function (exports) {
1105
1289
  }
1106
1290
  prop(element, propName, propValue) {
1107
1291
  let DOMUtilsContext = this;
1292
+ if (typeof element === "string") {
1293
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1294
+ }
1108
1295
  if (element == null) {
1109
1296
  return;
1110
1297
  }
1111
- if (typeof element === "string") {
1112
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1298
+ if (isNodeList(element)) {
1299
+ if (propValue == null) {
1300
+ // 获取
1301
+ return DOMUtilsContext.prop(element[0], propName);
1302
+ }
1303
+ else {
1304
+ // 设置
1305
+ element.forEach(($ele) => {
1306
+ DOMUtilsContext.prop($ele, propName, propValue);
1307
+ });
1308
+ }
1309
+ return;
1113
1310
  }
1114
1311
  if (propValue == null) {
1115
- return element[propName];
1312
+ return Reflect.get(element, propName);
1116
1313
  }
1117
1314
  else {
1118
- element[propName] = propValue;
1315
+ Reflect.set(element, propName, propValue);
1119
1316
  }
1120
1317
  }
1121
1318
  /**
@@ -1130,11 +1327,18 @@ System.register('DOMUtils', [], (function (exports) {
1130
1327
  removeAttr(element, attrName) {
1131
1328
  let DOMUtilsContext = this;
1132
1329
  if (typeof element === "string") {
1133
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1330
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1134
1331
  }
1135
1332
  if (element == null) {
1136
1333
  return;
1137
1334
  }
1335
+ if (isNodeList(element)) {
1336
+ // 设置
1337
+ element.forEach(($ele) => {
1338
+ DOMUtilsContext.removeAttr($ele, attrName);
1339
+ });
1340
+ return;
1341
+ }
1138
1342
  element.removeAttribute(attrName);
1139
1343
  }
1140
1344
  /**
@@ -1149,15 +1353,30 @@ System.register('DOMUtils', [], (function (exports) {
1149
1353
  removeClass(element, className) {
1150
1354
  let DOMUtilsContext = this;
1151
1355
  if (typeof element === "string") {
1152
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1356
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1153
1357
  }
1154
1358
  if (element == null) {
1155
1359
  return;
1156
1360
  }
1157
- if (className == null) {
1361
+ if (isNodeList(element)) {
1362
+ // 设置
1363
+ element.forEach(($ele) => {
1364
+ DOMUtilsContext.removeClass($ele, className);
1365
+ });
1158
1366
  return;
1159
1367
  }
1160
- element.classList.remove(className);
1368
+ if (className == null) {
1369
+ // 清空全部className
1370
+ element.className = "";
1371
+ }
1372
+ else {
1373
+ if (!Array.isArray(className)) {
1374
+ className = className.split(" ");
1375
+ }
1376
+ className.forEach((itemClassName) => {
1377
+ element.classList.remove(itemClassName);
1378
+ });
1379
+ }
1161
1380
  }
1162
1381
  /**
1163
1382
  * 移除元素的属性
@@ -1171,11 +1390,18 @@ System.register('DOMUtils', [], (function (exports) {
1171
1390
  removeProp(element, propName) {
1172
1391
  let DOMUtilsContext = this;
1173
1392
  if (typeof element === "string") {
1174
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1393
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1175
1394
  }
1176
1395
  if (element == null) {
1177
1396
  return;
1178
1397
  }
1398
+ if (isNodeList(element)) {
1399
+ // 设置
1400
+ element.forEach(($ele) => {
1401
+ DOMUtilsContext.removeProp($ele, propName);
1402
+ });
1403
+ return;
1404
+ }
1179
1405
  DOMUtilsCommonUtils.delete(element, propName);
1180
1406
  }
1181
1407
  /**
@@ -1190,22 +1416,22 @@ System.register('DOMUtils', [], (function (exports) {
1190
1416
  replaceWith(element, newElement) {
1191
1417
  let DOMUtilsContext = this;
1192
1418
  if (typeof element === "string") {
1193
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1419
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1194
1420
  }
1195
1421
  if (element == null) {
1196
1422
  return;
1197
1423
  }
1198
- if (typeof newElement === "string") {
1199
- newElement = DOMUtilsContext.parseHTML(newElement, false, false);
1200
- }
1201
- if (element instanceof NodeList || element instanceof Array) {
1202
- element.forEach((item) => {
1203
- DOMUtilsContext.replaceWith(item, newElement);
1424
+ if (isNodeList(element)) {
1425
+ // 设置
1426
+ element.forEach(($ele) => {
1427
+ DOMUtilsContext.replaceWith($ele, newElement);
1204
1428
  });
1429
+ return;
1205
1430
  }
1206
- else {
1207
- element.parentElement.replaceChild(newElement, element);
1431
+ if (typeof newElement === "string") {
1432
+ newElement = DOMUtilsContext.parseHTML(newElement, false, false);
1208
1433
  }
1434
+ element.parentElement.replaceChild(newElement, element);
1209
1435
  }
1210
1436
  /**
1211
1437
  * 给元素添加class
@@ -1219,12 +1445,27 @@ System.register('DOMUtils', [], (function (exports) {
1219
1445
  addClass(element, className) {
1220
1446
  let DOMUtilsContext = this;
1221
1447
  if (typeof element === "string") {
1222
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1448
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1223
1449
  }
1224
1450
  if (element == null) {
1225
1451
  return;
1226
1452
  }
1227
- element.classList.add(className);
1453
+ if (isNodeList(element)) {
1454
+ // 设置
1455
+ element.forEach(($ele) => {
1456
+ DOMUtilsContext.addClass($ele, className);
1457
+ });
1458
+ return;
1459
+ }
1460
+ if (!Array.isArray(className)) {
1461
+ className = className.split(" ");
1462
+ }
1463
+ className.forEach((itemClassName) => {
1464
+ if (itemClassName.trim() == "") {
1465
+ return;
1466
+ }
1467
+ element.classList.add(itemClassName);
1468
+ });
1228
1469
  }
1229
1470
  /**
1230
1471
  * 函数在元素内部末尾添加子元素或HTML字符串
@@ -1238,11 +1479,18 @@ System.register('DOMUtils', [], (function (exports) {
1238
1479
  append(element, content) {
1239
1480
  let DOMUtilsContext = this;
1240
1481
  if (typeof element === "string") {
1241
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1482
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1242
1483
  }
1243
1484
  if (element == null) {
1244
1485
  return;
1245
1486
  }
1487
+ if (isNodeList(element)) {
1488
+ // 设置
1489
+ element.forEach(($ele) => {
1490
+ DOMUtilsContext.append($ele, content);
1491
+ });
1492
+ return;
1493
+ }
1246
1494
  function elementAppendChild(ele, text) {
1247
1495
  if (typeof content === "string") {
1248
1496
  ele.insertAdjacentHTML("beforeend", text);
@@ -1256,7 +1504,7 @@ System.register('DOMUtils', [], (function (exports) {
1256
1504
  let fragment = DOMUtilsContext.windowApi.document.createDocumentFragment();
1257
1505
  content.forEach((ele) => {
1258
1506
  if (typeof ele === "string") {
1259
- ele = this.parseHTML(ele, true, false);
1507
+ ele = DOMUtilsContext.parseHTML(ele, true, false);
1260
1508
  }
1261
1509
  fragment.appendChild(ele);
1262
1510
  });
@@ -1278,11 +1526,18 @@ System.register('DOMUtils', [], (function (exports) {
1278
1526
  prepend(element, content) {
1279
1527
  let DOMUtilsContext = this;
1280
1528
  if (typeof element === "string") {
1281
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1529
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1282
1530
  }
1283
1531
  if (element == null) {
1284
1532
  return;
1285
1533
  }
1534
+ if (isNodeList(element)) {
1535
+ // 设置
1536
+ element.forEach(($ele) => {
1537
+ DOMUtilsContext.prepend($ele, content);
1538
+ });
1539
+ return;
1540
+ }
1286
1541
  if (typeof content === "string") {
1287
1542
  element.insertAdjacentHTML("afterbegin", content);
1288
1543
  }
@@ -1308,11 +1563,18 @@ System.register('DOMUtils', [], (function (exports) {
1308
1563
  after(element, content) {
1309
1564
  let DOMUtilsContext = this;
1310
1565
  if (typeof element === "string") {
1311
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1566
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1312
1567
  }
1313
1568
  if (element == null) {
1314
1569
  return;
1315
1570
  }
1571
+ if (isNodeList(element)) {
1572
+ // 设置
1573
+ element.forEach(($ele) => {
1574
+ DOMUtilsContext.after($ele, content);
1575
+ });
1576
+ return;
1577
+ }
1316
1578
  if (typeof content === "string") {
1317
1579
  element.insertAdjacentHTML("afterend", content);
1318
1580
  }
@@ -1340,11 +1602,18 @@ System.register('DOMUtils', [], (function (exports) {
1340
1602
  before(element, content) {
1341
1603
  let DOMUtilsContext = this;
1342
1604
  if (typeof element === "string") {
1343
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1605
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1344
1606
  }
1345
1607
  if (element == null) {
1346
1608
  return;
1347
1609
  }
1610
+ if (isNodeList(element)) {
1611
+ // 设置
1612
+ element.forEach(($ele) => {
1613
+ DOMUtilsContext.before($ele, content);
1614
+ });
1615
+ return;
1616
+ }
1348
1617
  if (typeof content === "string") {
1349
1618
  element.insertAdjacentHTML("beforebegin", content);
1350
1619
  }
@@ -1360,30 +1629,28 @@ System.register('DOMUtils', [], (function (exports) {
1360
1629
  }
1361
1630
  /**
1362
1631
  * 移除元素
1363
- * @param target 目标元素
1632
+ * @param element 目标元素
1364
1633
  * @example
1365
1634
  * // 元素a.xx前面添加一个元素
1366
1635
  * DOMUtils.remove(document.querySelector("a.xx"))
1367
1636
  * DOMUtils.remove(document.querySelectorAll("a.xx"))
1368
1637
  * DOMUtils.remove("a.xx")
1369
1638
  * */
1370
- remove(target) {
1639
+ remove(element) {
1371
1640
  let DOMUtilsContext = this;
1372
- if (typeof target === "string") {
1373
- target = DOMUtilsContext.windowApi.document.querySelectorAll(target);
1641
+ if (typeof element === "string") {
1642
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1374
1643
  }
1375
- if (target == null) {
1644
+ if (element == null) {
1376
1645
  return;
1377
1646
  }
1378
- if (target instanceof NodeList || target instanceof Array) {
1379
- target = target;
1380
- for (const element of target) {
1381
- DOMUtilsContext.remove(element);
1382
- }
1383
- }
1384
- else {
1385
- target.remove();
1647
+ if (isNodeList(element)) {
1648
+ element.forEach(($ele) => {
1649
+ DOMUtilsContext.remove($ele);
1650
+ });
1651
+ return;
1386
1652
  }
1653
+ element.remove();
1387
1654
  }
1388
1655
  /**
1389
1656
  * 移除元素的所有子元素
@@ -1396,11 +1663,18 @@ System.register('DOMUtils', [], (function (exports) {
1396
1663
  empty(element) {
1397
1664
  let DOMUtilsContext = this;
1398
1665
  if (typeof element === "string") {
1399
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1666
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1400
1667
  }
1401
1668
  if (element == null) {
1402
1669
  return;
1403
1670
  }
1671
+ if (isNodeList(element)) {
1672
+ // 设置
1673
+ element.forEach(($ele) => {
1674
+ DOMUtilsContext.empty($ele);
1675
+ });
1676
+ return;
1677
+ }
1404
1678
  element.innerHTML = "";
1405
1679
  }
1406
1680
  /**
@@ -1431,7 +1705,8 @@ System.register('DOMUtils', [], (function (exports) {
1431
1705
  width(element, isShow = false) {
1432
1706
  let DOMUtilsContext = this;
1433
1707
  if (typeof element === "string") {
1434
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1708
+ element =
1709
+ DOMUtilsContext.windowApi.document.querySelector(element);
1435
1710
  }
1436
1711
  if (element == null) {
1437
1712
  return;
@@ -1543,7 +1818,7 @@ System.register('DOMUtils', [], (function (exports) {
1543
1818
  }
1544
1819
  element = element;
1545
1820
  if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
1546
- let style = getComputedStyle(element, null);
1821
+ let style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
1547
1822
  let marginLeft = DOMUtilsCommonUtils.getStyleValue(style, "marginLeft");
1548
1823
  let marginRight = DOMUtilsCommonUtils.getStyleValue(style, "marginRight");
1549
1824
  return element.offsetWidth + marginLeft + marginRight;
@@ -1569,7 +1844,7 @@ System.register('DOMUtils', [], (function (exports) {
1569
1844
  }
1570
1845
  element = element;
1571
1846
  if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
1572
- let style = getComputedStyle(element, null);
1847
+ let style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
1573
1848
  let marginTop = DOMUtilsCommonUtils.getStyleValue(style, "marginTop");
1574
1849
  let marginBottom = DOMUtilsCommonUtils.getStyleValue(style, "marginBottom");
1575
1850
  return element.offsetHeight + marginTop + marginBottom;
@@ -1596,11 +1871,18 @@ System.register('DOMUtils', [], (function (exports) {
1596
1871
  animate(element, styles, duration = 1000, callback = null) {
1597
1872
  let DOMUtilsContext = this;
1598
1873
  if (typeof element === "string") {
1599
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1874
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1600
1875
  }
1601
1876
  if (element == null) {
1602
1877
  return;
1603
1878
  }
1879
+ if (isNodeList(element)) {
1880
+ // 设置
1881
+ element.forEach(($ele) => {
1882
+ DOMUtilsContext.animate($ele, styles, duration, callback);
1883
+ });
1884
+ return;
1885
+ }
1604
1886
  if (typeof duration !== "number" || duration <= 0) {
1605
1887
  throw new TypeError("duration must be a positive number");
1606
1888
  }
@@ -1617,7 +1899,9 @@ System.register('DOMUtils', [], (function (exports) {
1617
1899
  let from = {};
1618
1900
  let to = {};
1619
1901
  for (let prop in styles) {
1620
- from[prop] = element.style[prop] || getComputedStyle(element)[prop];
1902
+ from[prop] =
1903
+ element.style[prop] ||
1904
+ DOMUtilsContext.windowApi.globalThis.getComputedStyle(element)[prop];
1621
1905
  to[prop] = styles[prop];
1622
1906
  }
1623
1907
  let timer = setInterval(function () {
@@ -1649,18 +1933,26 @@ System.register('DOMUtils', [], (function (exports) {
1649
1933
  wrap(element, wrapperHTML) {
1650
1934
  let DOMUtilsContext = this;
1651
1935
  if (typeof element === "string") {
1652
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1936
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1653
1937
  }
1654
1938
  if (element == null) {
1655
1939
  return;
1656
1940
  }
1941
+ if (isNodeList(element)) {
1942
+ // 设置
1943
+ element.forEach(($ele) => {
1944
+ DOMUtilsContext.wrap($ele, wrapperHTML);
1945
+ });
1946
+ return;
1947
+ }
1657
1948
  element = element;
1658
1949
  // 创建一个新的div元素，并将wrapperHTML作为其innerHTML
1659
1950
  let wrapper = DOMUtilsContext.windowApi.document.createElement("div");
1660
1951
  wrapper.innerHTML = wrapperHTML;
1661
1952
  let wrapperFirstChild = wrapper.firstChild;
1662
1953
  // 将要包裹的元素插入目标元素前面
1663
- element.parentElement.insertBefore(wrapperFirstChild, element);
1954
+ let parentElement = element.parentElement;
1955
+ parentElement.insertBefore(wrapperFirstChild, element);
1664
1956
  // 将要包裹的元素移动到wrapper中
1665
1957
  wrapperFirstChild.appendChild(element);
1666
1958
  }
@@ -1740,6 +2032,8 @@ System.register('DOMUtils', [], (function (exports) {
1740
2032
  }
1741
2033
  parseHTML(html, useParser = false, isComplete = false) {
1742
2034
  let DOMUtilsContext = this;
2035
+ // 去除html前后的空格
2036
+ html = html.trim();
1743
2037
  function parseHTMLByDOMParser() {
1744
2038
  let parser = new DOMParser();
1745
2039
  if (isComplete) {
@@ -1766,16 +2060,61 @@ System.register('DOMUtils', [], (function (exports) {
1766
2060
  return parseHTMLByCreateDom();
1767
2061
  }
1768
2062
  }
2063
+ /**
2064
+ * 序列化表单元素
2065
+ * @param $form 表单元素
2066
+ * @example
2067
+ * DOMUtils.serialize(document.querySelector("form"))
2068
+ * > xxx=xxx&aaa=
2069
+ */
2070
+ serialize($form) {
2071
+ const elements = $form.elements;
2072
+ let serializedArray = [];
2073
+ for (let i = 0; i < elements.length; i++) {
2074
+ const element = elements[i];
2075
+ if (element.name &&
2076
+ !element.disabled &&
2077
+ (element.checked ||
2078
+ [
2079
+ "text",
2080
+ "hidden",
2081
+ "password",
2082
+ "textarea",
2083
+ "select-one",
2084
+ "select-multiple",
2085
+ ].includes(element.type))) {
2086
+ if (element.type === "select-multiple") {
2087
+ for (let j = 0; j < element.options.length; j++) {
2088
+ if (element.options[j].selected) {
2089
+ serializedArray.push({
2090
+ name: element.name,
2091
+ value: element.options[j].value,
2092
+ });
2093
+ }
2094
+ }
2095
+ }
2096
+ else {
2097
+ serializedArray.push({ name: element.name, value: element.value });
2098
+ }
2099
+ }
2100
+ }
2101
+ return serializedArray
2102
+ .map((item) => `${encodeURIComponent(item.name)}=${encodeURIComponent(item.value)}`)
2103
+ .join("&");
2104
+ }
1769
2105
  /**
1770
2106
  * 显示元素
1771
2107
  * @param target 当前元素
2108
+ * @param checkVisiblie 是否检测元素是否显示
2109
+ * + true （默认）如果检测到还未显示，则强制使用display: unset !important;
2110
+ * + false 不检测，直接设置display属性为空
1772
2111
  * @example
1773
2112
  * // 显示a.xx元素
1774
2113
  * DOMUtils.show(document.querySelector("a.xx"))
1775
2114
  * DOMUtils.show(document.querySelectorAll("a.xx"))
1776
2115
  * DOMUtils.show("a.xx")
1777
2116
  */
1778
- show(target) {
2117
+ show(target, checkVisiblie = true) {
1779
2118
  let DOMUtilsContext = this;
1780
2119
  if (target == null) {
1781
2120
  return;
@@ -1786,28 +2125,33 @@ System.register('DOMUtils', [], (function (exports) {
1786
2125
  if (target instanceof NodeList || target instanceof Array) {
1787
2126
  target = target;
1788
2127
  for (const element of target) {
1789
- DOMUtilsContext.show(element);
2128
+ DOMUtilsContext.show(element, checkVisiblie);
1790
2129
  }
1791
2130
  }
1792
2131
  else {
1793
2132
  target = target;
1794
2133
  target.style.display = "";
1795
- if (!DOMUtilsCommonUtils.isShow(target)) {
1796
- /* 仍然是不显示，尝试使用强覆盖 */
1797
- target.style.setProperty("display", "unset", "important");
2134
+ if (checkVisiblie) {
2135
+ if (!DOMUtilsCommonUtils.isShow(target)) {
2136
+ /* 仍然是不显示，尝试使用强覆盖 */
2137
+ target.style.setProperty("display", "unset", "important");
2138
+ }
1798
2139
  }
1799
2140
  }
1800
2141
  }
1801
2142
  /**
1802
2143
  * 隐藏元素
1803
2144
  * @param target 当前元素
2145
+ * @param checkVisiblie 是否检测元素是否显示
2146
+ * + true （默认）如果检测到显示，则强制使用display: none !important;
2147
+ * + false 不检测，直接设置display属性为none
1804
2148
  * @example
1805
2149
  * // 隐藏a.xx元素
1806
2150
  * DOMUtils.hide(document.querySelector("a.xx"))
1807
2151
  * DOMUtils.hide(document.querySelectorAll("a.xx"))
1808
2152
  * DOMUtils.hide("a.xx")
1809
2153
  */
1810
- hide(target) {
2154
+ hide(target, checkVisiblie = true) {
1811
2155
  let DOMUtilsContext = this;
1812
2156
  if (target == null) {
1813
2157
  return;
@@ -1818,15 +2162,17 @@ System.register('DOMUtils', [], (function (exports) {
1818
2162
  if (target instanceof NodeList || target instanceof Array) {
1819
2163
  target = target;
1820
2164
  for (const element of target) {
1821
- DOMUtilsContext.hide(element);
2165
+ DOMUtilsContext.hide(element, checkVisiblie);
1822
2166
  }
1823
2167
  }
1824
2168
  else {
1825
2169
  target = target;
1826
2170
  target.style.display = "none";
1827
- if (DOMUtilsCommonUtils.isShow(target)) {
1828
- /* 仍然是显示，尝试使用强覆盖 */
1829
- target.style.setProperty("display", "none", "important");
2171
+ if (checkVisiblie) {
2172
+ if (DOMUtilsCommonUtils.isShow(target)) {
2173
+ /* 仍然是显示，尝试使用强覆盖 */
2174
+ target.style.setProperty("display", "none", "important");
2175
+ }
1830
2176
  }
1831
2177
  }
1832
2178
  }
@@ -1850,9 +2196,15 @@ System.register('DOMUtils', [], (function (exports) {
1850
2196
  }
1851
2197
  let DOMUtilsContext = this;
1852
2198
  if (typeof element === "string") {
1853
- element = DOMUtilsContext.windowApi.document.querySelector(element);
2199
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
2200
+ }
2201
+ if (isNodeList(element)) {
2202
+ // 设置
2203
+ element.forEach(($ele) => {
2204
+ DOMUtilsContext.fadeIn($ele, duration, callback);
2205
+ });
2206
+ return;
1854
2207
  }
1855
- element = element;
1856
2208
  element.style.opacity = "0";
1857
2209
  element.style.display = "";
1858
2210
  let start = null;
@@ -1895,9 +2247,15 @@ System.register('DOMUtils', [], (function (exports) {
1895
2247
  return;
1896
2248
  }
1897
2249
  if (typeof element === "string") {
1898
- element = DOMUtilsContext.windowApi.document.querySelector(element);
2250
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
2251
+ }
2252
+ if (isNodeList(element)) {
2253
+ // 设置
2254
+ element.forEach(($ele) => {
2255
+ DOMUtilsContext.fadeOut($ele, duration, callback);
2256
+ });
2257
+ return;
1899
2258
  }
1900
- element = element;
1901
2259
  element.style.opacity = "1";
1902
2260
  let start = null;
1903
2261
  let timer = null;
@@ -1923,24 +2281,34 @@ System.register('DOMUtils', [], (function (exports) {
1923
2281
  /**
1924
2282
  * 切换元素的显示和隐藏状态
1925
2283
  * @param element 当前元素
2284
+ * @param checkVisiblie 是否检测元素是否显示
1926
2285
  * @example
1927
2286
  * // 如果元素a.xx当前是隐藏，则显示，如果是显示，则隐藏
1928
2287
  * DOMUtils.toggle(document.querySelector("a.xx"))
1929
2288
  * DOMUtils.toggle("a.xx")
1930
2289
  */
1931
- toggle(element) {
2290
+ toggle(element, checkVisiblie) {
1932
2291
  let DOMUtilsContext = this;
1933
2292
  if (typeof element === "string") {
1934
- element = DOMUtilsContext.windowApi.document.querySelector(element);
2293
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1935
2294
  }
1936
2295
  if (element == null) {
1937
2296
  return;
1938
2297
  }
1939
- if (getComputedStyle(element).getPropertyValue("display") === "none") {
1940
- DOMUtilsContext.show(element);
2298
+ if (isNodeList(element)) {
2299
+ // 设置
2300
+ element.forEach(($ele) => {
2301
+ DOMUtilsContext.toggle($ele);
2302
+ });
2303
+ return;
2304
+ }
2305
+ if (DOMUtilsContext.windowApi.globalThis
2306
+ .getComputedStyle(element)
2307
+ .getPropertyValue("display") === "none") {
2308
+ DOMUtilsContext.show(element, checkVisiblie);
1941
2309
  }
1942
2310
  else {
1943
- DOMUtilsContext.hide(element);
2311
+ DOMUtilsContext.hide(element, checkVisiblie);
1944
2312
  }
1945
2313
  }
1946
2314
  /**