@whitesev/domutils 1.3.4 → 1.3.5

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 +425 -98
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.cjs.js +425 -98
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.esm.js +425 -98
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.iife.js +425 -98
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.system.js +425 -98
  10. package/dist/index.system.js.map +1 -1
  11. package/dist/index.umd.js +425 -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 +14 -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 +105 -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);
746
+ }
747
+ if (isNodeList(element)) {
748
+ // 设置
749
+ element.forEach(($ele) => {
750
+ DOMUtilsContext.keyup($ele, handler, option);
751
+ });
752
+ return;
718
753
  }
719
- DOMUtilsContext.on(target, "keyup", null, handler, option);
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);
778
+ }
779
+ if (isNodeList(element)) {
780
+ // 设置
781
+ element.forEach(($ele) => {
782
+ DOMUtilsContext.keydown($ele, handler, option);
783
+ });
784
+ return;
743
785
  }
744
- DOMUtilsContext.on(target, "keydown", null, handler, option);
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,49 @@ 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
  }
865
918
  }
866
919
 
920
+ /**
921
+ * 判断是否是元素列表
922
+ * @param $ele
923
+ */
924
+ const isNodeList = ($ele) => {
925
+ return Array.isArray($ele) || $ele instanceof NodeList;
926
+ };
867
927
  class DOMUtils extends DOMUtilsEvent {
868
928
  constructor(option) {
869
929
  super(option);
870
930
  }
871
931
  /** 版本号 */
872
- version = "2024.10.19";
932
+ version = "2024.10.22";
873
933
  attr(element, attrName, attrValue) {
874
934
  let DOMUtilsContext = this;
875
935
  if (typeof element === "string") {
876
- element = DOMUtilsContext.windowApi.document.querySelector(element);
936
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
877
937
  }
878
938
  if (element == null) {
879
939
  return;
880
940
  }
941
+ if (isNodeList(element)) {
942
+ if (attrValue == null) {
943
+ // 获取属性
944
+ return DOMUtilsContext.attr(element[0], attrName, attrValue);
945
+ }
946
+ else {
947
+ // 设置属性
948
+ element.forEach(($ele) => {
949
+ DOMUtilsContext.attr($ele, attrName, attrValue);
950
+ });
951
+ return;
952
+ }
953
+ }
881
954
  if (attrValue == null) {
882
955
  return element.getAttribute(attrName);
883
956
  }
@@ -966,14 +1039,40 @@ System.register('DOMUtils', [], (function (exports) {
966
1039
  return propertyValue;
967
1040
  }
968
1041
  if (typeof element === "string") {
969
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1042
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
970
1043
  }
971
1044
  if (element == null) {
972
1045
  return;
973
1046
  }
1047
+ if (isNodeList(element)) {
1048
+ if (typeof property === "string") {
1049
+ if (value == null) {
1050
+ // 获取属性
1051
+ return DOMUtilsContext.css(element[0], property);
1052
+ }
1053
+ else {
1054
+ // 设置属性
1055
+ element.forEach(($ele) => {
1056
+ DOMUtilsContext.css($ele, property);
1057
+ });
1058
+ return;
1059
+ }
1060
+ }
1061
+ else if (typeof property === "object") {
1062
+ // 设置属性
1063
+ element.forEach(($ele) => {
1064
+ DOMUtilsContext.css($ele, property);
1065
+ });
1066
+ return;
1067
+ }
1068
+ else ;
1069
+ return;
1070
+ }
974
1071
  if (typeof property === "string") {
975
1072
  if (value == null) {
976
- return getComputedStyle(element).getPropertyValue(property);
1073
+ return DOMUtilsContext.windowApi.globalThis
1074
+ .getComputedStyle(element)
1075
+ .getPropertyValue(property);
977
1076
  }
978
1077
  else {
979
1078
  if (value === "string" && value.includes("!important")) {
@@ -997,15 +1096,29 @@ System.register('DOMUtils', [], (function (exports) {
997
1096
  }
998
1097
  }
999
1098
  }
1099
+ else ;
1000
1100
  }
1001
1101
  text(element, text) {
1002
1102
  let DOMUtilsContext = this;
1003
1103
  if (typeof element === "string") {
1004
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1104
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1005
1105
  }
1006
1106
  if (element == null) {
1007
1107
  return;
1008
1108
  }
1109
+ if (isNodeList(element)) {
1110
+ if (text == null) {
1111
+ // 获取
1112
+ return DOMUtilsContext.text(element[0]);
1113
+ }
1114
+ else {
1115
+ // 设置
1116
+ element.forEach(($ele) => {
1117
+ DOMUtilsContext.text($ele, text);
1118
+ });
1119
+ }
1120
+ return;
1121
+ }
1009
1122
  if (text == null) {
1010
1123
  return element.textContent || element.innerText;
1011
1124
  }
@@ -1024,15 +1137,30 @@ System.register('DOMUtils', [], (function (exports) {
1024
1137
  html(element, html) {
1025
1138
  let DOMUtilsContext = this;
1026
1139
  if (typeof element === "string") {
1027
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1140
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1028
1141
  }
1029
1142
  if (element == null) {
1030
1143
  return;
1031
1144
  }
1145
+ if (isNodeList(element)) {
1146
+ if (html == null) {
1147
+ // 获取
1148
+ return DOMUtilsContext.html(element[0]);
1149
+ }
1150
+ else {
1151
+ // 设置
1152
+ element.forEach(($ele) => {
1153
+ DOMUtilsContext.html($ele, html);
1154
+ });
1155
+ }
1156
+ return;
1157
+ }
1032
1158
  if (html == null) {
1159
+ // 获取
1033
1160
  return element.innerHTML;
1034
1161
  }
1035
1162
  else {
1163
+ // 设置
1036
1164
  if (html instanceof Element) {
1037
1165
  html = html.innerHTML;
1038
1166
  }
@@ -1055,7 +1183,7 @@ System.register('DOMUtils', [], (function (exports) {
1055
1183
  recovery();
1056
1184
  return transformInfo;
1057
1185
  }
1058
- let elementTransform = getComputedStyle(element).transform;
1186
+ let elementTransform = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element).transform;
1059
1187
  if (elementTransform != null &&
1060
1188
  elementTransform !== "none" &&
1061
1189
  elementTransform !== "") {
@@ -1079,12 +1207,26 @@ System.register('DOMUtils', [], (function (exports) {
1079
1207
  val(element, value) {
1080
1208
  let DOMUtilsContext = this;
1081
1209
  if (typeof element === "string") {
1082
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1210
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1083
1211
  }
1084
1212
  if (element == null) {
1085
1213
  return;
1086
1214
  }
1215
+ if (isNodeList(element)) {
1216
+ if (value == null) {
1217
+ // 获取
1218
+ return DOMUtilsContext.val(element[0]);
1219
+ }
1220
+ else {
1221
+ // 设置
1222
+ element.forEach(($ele) => {
1223
+ DOMUtilsContext.val($ele, value);
1224
+ });
1225
+ }
1226
+ return;
1227
+ }
1087
1228
  if (value == null) {
1229
+ // 获取
1088
1230
  if (element.localName === "input" &&
1089
1231
  (element.type === "checkbox" || element.type === "radio")) {
1090
1232
  return element.checked;
@@ -1094,6 +1236,7 @@ System.register('DOMUtils', [], (function (exports) {
1094
1236
  }
1095
1237
  }
1096
1238
  else {
1239
+ // 设置
1097
1240
  if (element.localName === "input" &&
1098
1241
  (element.type === "checkbox" || element.type === "radio")) {
1099
1242
  element.checked = !!value;
@@ -1105,17 +1248,30 @@ System.register('DOMUtils', [], (function (exports) {
1105
1248
  }
1106
1249
  prop(element, propName, propValue) {
1107
1250
  let DOMUtilsContext = this;
1251
+ if (typeof element === "string") {
1252
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1253
+ }
1108
1254
  if (element == null) {
1109
1255
  return;
1110
1256
  }
1111
- if (typeof element === "string") {
1112
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1257
+ if (isNodeList(element)) {
1258
+ if (propValue == null) {
1259
+ // 获取
1260
+ return DOMUtilsContext.prop(element[0], propName);
1261
+ }
1262
+ else {
1263
+ // 设置
1264
+ element.forEach(($ele) => {
1265
+ DOMUtilsContext.prop($ele, propName, propValue);
1266
+ });
1267
+ }
1268
+ return;
1113
1269
  }
1114
1270
  if (propValue == null) {
1115
- return element[propName];
1271
+ return Reflect.get(element, propName);
1116
1272
  }
1117
1273
  else {
1118
- element[propName] = propValue;
1274
+ Reflect.set(element, propName, propValue);
1119
1275
  }
1120
1276
  }
1121
1277
  /**
@@ -1130,11 +1286,18 @@ System.register('DOMUtils', [], (function (exports) {
1130
1286
  removeAttr(element, attrName) {
1131
1287
  let DOMUtilsContext = this;
1132
1288
  if (typeof element === "string") {
1133
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1289
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1134
1290
  }
1135
1291
  if (element == null) {
1136
1292
  return;
1137
1293
  }
1294
+ if (isNodeList(element)) {
1295
+ // 设置
1296
+ element.forEach(($ele) => {
1297
+ DOMUtilsContext.removeAttr($ele, attrName);
1298
+ });
1299
+ return;
1300
+ }
1138
1301
  element.removeAttribute(attrName);
1139
1302
  }
1140
1303
  /**
@@ -1149,15 +1312,30 @@ System.register('DOMUtils', [], (function (exports) {
1149
1312
  removeClass(element, className) {
1150
1313
  let DOMUtilsContext = this;
1151
1314
  if (typeof element === "string") {
1152
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1315
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1153
1316
  }
1154
1317
  if (element == null) {
1155
1318
  return;
1156
1319
  }
1157
- if (className == null) {
1320
+ if (isNodeList(element)) {
1321
+ // 设置
1322
+ element.forEach(($ele) => {
1323
+ DOMUtilsContext.removeClass($ele, className);
1324
+ });
1158
1325
  return;
1159
1326
  }
1160
- element.classList.remove(className);
1327
+ if (className == null) {
1328
+ // 清空全部className
1329
+ element.className = "";
1330
+ }
1331
+ else {
1332
+ if (!Array.isArray(className)) {
1333
+ className = className.split(" ");
1334
+ }
1335
+ className.forEach((itemClassName) => {
1336
+ element.classList.remove(itemClassName);
1337
+ });
1338
+ }
1161
1339
  }
1162
1340
  /**
1163
1341
  * 移除元素的属性
@@ -1171,11 +1349,18 @@ System.register('DOMUtils', [], (function (exports) {
1171
1349
  removeProp(element, propName) {
1172
1350
  let DOMUtilsContext = this;
1173
1351
  if (typeof element === "string") {
1174
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1352
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1175
1353
  }
1176
1354
  if (element == null) {
1177
1355
  return;
1178
1356
  }
1357
+ if (isNodeList(element)) {
1358
+ // 设置
1359
+ element.forEach(($ele) => {
1360
+ DOMUtilsContext.removeProp($ele, propName);
1361
+ });
1362
+ return;
1363
+ }
1179
1364
  DOMUtilsCommonUtils.delete(element, propName);
1180
1365
  }
1181
1366
  /**
@@ -1190,22 +1375,22 @@ System.register('DOMUtils', [], (function (exports) {
1190
1375
  replaceWith(element, newElement) {
1191
1376
  let DOMUtilsContext = this;
1192
1377
  if (typeof element === "string") {
1193
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1378
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1194
1379
  }
1195
1380
  if (element == null) {
1196
1381
  return;
1197
1382
  }
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);
1383
+ if (isNodeList(element)) {
1384
+ // 设置
1385
+ element.forEach(($ele) => {
1386
+ DOMUtilsContext.replaceWith($ele, newElement);
1204
1387
  });
1388
+ return;
1205
1389
  }
1206
- else {
1207
- element.parentElement.replaceChild(newElement, element);
1390
+ if (typeof newElement === "string") {
1391
+ newElement = DOMUtilsContext.parseHTML(newElement, false, false);
1208
1392
  }
1393
+ element.parentElement.replaceChild(newElement, element);
1209
1394
  }
1210
1395
  /**
1211
1396
  * 给元素添加class
@@ -1219,12 +1404,27 @@ System.register('DOMUtils', [], (function (exports) {
1219
1404
  addClass(element, className) {
1220
1405
  let DOMUtilsContext = this;
1221
1406
  if (typeof element === "string") {
1222
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1407
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1223
1408
  }
1224
1409
  if (element == null) {
1225
1410
  return;
1226
1411
  }
1227
- element.classList.add(className);
1412
+ if (isNodeList(element)) {
1413
+ // 设置
1414
+ element.forEach(($ele) => {
1415
+ DOMUtilsContext.addClass($ele, className);
1416
+ });
1417
+ return;
1418
+ }
1419
+ if (!Array.isArray(className)) {
1420
+ className = className.split(" ");
1421
+ }
1422
+ className.forEach((itemClassName) => {
1423
+ if (itemClassName.trim() == "") {
1424
+ return;
1425
+ }
1426
+ element.classList.add(itemClassName);
1427
+ });
1228
1428
  }
1229
1429
  /**
1230
1430
  * 函数在元素内部末尾添加子元素或HTML字符串
@@ -1238,11 +1438,18 @@ System.register('DOMUtils', [], (function (exports) {
1238
1438
  append(element, content) {
1239
1439
  let DOMUtilsContext = this;
1240
1440
  if (typeof element === "string") {
1241
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1441
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1242
1442
  }
1243
1443
  if (element == null) {
1244
1444
  return;
1245
1445
  }
1446
+ if (isNodeList(element)) {
1447
+ // 设置
1448
+ element.forEach(($ele) => {
1449
+ DOMUtilsContext.append($ele, content);
1450
+ });
1451
+ return;
1452
+ }
1246
1453
  function elementAppendChild(ele, text) {
1247
1454
  if (typeof content === "string") {
1248
1455
  ele.insertAdjacentHTML("beforeend", text);
@@ -1256,7 +1463,7 @@ System.register('DOMUtils', [], (function (exports) {
1256
1463
  let fragment = DOMUtilsContext.windowApi.document.createDocumentFragment();
1257
1464
  content.forEach((ele) => {
1258
1465
  if (typeof ele === "string") {
1259
- ele = this.parseHTML(ele, true, false);
1466
+ ele = DOMUtilsContext.parseHTML(ele, true, false);
1260
1467
  }
1261
1468
  fragment.appendChild(ele);
1262
1469
  });
@@ -1278,11 +1485,18 @@ System.register('DOMUtils', [], (function (exports) {
1278
1485
  prepend(element, content) {
1279
1486
  let DOMUtilsContext = this;
1280
1487
  if (typeof element === "string") {
1281
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1488
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1282
1489
  }
1283
1490
  if (element == null) {
1284
1491
  return;
1285
1492
  }
1493
+ if (isNodeList(element)) {
1494
+ // 设置
1495
+ element.forEach(($ele) => {
1496
+ DOMUtilsContext.prepend($ele, content);
1497
+ });
1498
+ return;
1499
+ }
1286
1500
  if (typeof content === "string") {
1287
1501
  element.insertAdjacentHTML("afterbegin", content);
1288
1502
  }
@@ -1308,11 +1522,18 @@ System.register('DOMUtils', [], (function (exports) {
1308
1522
  after(element, content) {
1309
1523
  let DOMUtilsContext = this;
1310
1524
  if (typeof element === "string") {
1311
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1525
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1312
1526
  }
1313
1527
  if (element == null) {
1314
1528
  return;
1315
1529
  }
1530
+ if (isNodeList(element)) {
1531
+ // 设置
1532
+ element.forEach(($ele) => {
1533
+ DOMUtilsContext.after($ele, content);
1534
+ });
1535
+ return;
1536
+ }
1316
1537
  if (typeof content === "string") {
1317
1538
  element.insertAdjacentHTML("afterend", content);
1318
1539
  }
@@ -1340,11 +1561,18 @@ System.register('DOMUtils', [], (function (exports) {
1340
1561
  before(element, content) {
1341
1562
  let DOMUtilsContext = this;
1342
1563
  if (typeof element === "string") {
1343
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1564
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1344
1565
  }
1345
1566
  if (element == null) {
1346
1567
  return;
1347
1568
  }
1569
+ if (isNodeList(element)) {
1570
+ // 设置
1571
+ element.forEach(($ele) => {
1572
+ DOMUtilsContext.before($ele, content);
1573
+ });
1574
+ return;
1575
+ }
1348
1576
  if (typeof content === "string") {
1349
1577
  element.insertAdjacentHTML("beforebegin", content);
1350
1578
  }
@@ -1360,30 +1588,28 @@ System.register('DOMUtils', [], (function (exports) {
1360
1588
  }
1361
1589
  /**
1362
1590
  * 移除元素
1363
- * @param target 目标元素
1591
+ * @param element 目标元素
1364
1592
  * @example
1365
1593
  * // 元素a.xx前面添加一个元素
1366
1594
  * DOMUtils.remove(document.querySelector("a.xx"))
1367
1595
  * DOMUtils.remove(document.querySelectorAll("a.xx"))
1368
1596
  * DOMUtils.remove("a.xx")
1369
1597
  * */
1370
- remove(target) {
1598
+ remove(element) {
1371
1599
  let DOMUtilsContext = this;
1372
- if (typeof target === "string") {
1373
- target = DOMUtilsContext.windowApi.document.querySelectorAll(target);
1600
+ if (typeof element === "string") {
1601
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1374
1602
  }
1375
- if (target == null) {
1603
+ if (element == null) {
1376
1604
  return;
1377
1605
  }
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();
1606
+ if (isNodeList(element)) {
1607
+ element.forEach(($ele) => {
1608
+ DOMUtilsContext.remove($ele);
1609
+ });
1610
+ return;
1386
1611
  }
1612
+ element.remove();
1387
1613
  }
1388
1614
  /**
1389
1615
  * 移除元素的所有子元素
@@ -1396,11 +1622,18 @@ System.register('DOMUtils', [], (function (exports) {
1396
1622
  empty(element) {
1397
1623
  let DOMUtilsContext = this;
1398
1624
  if (typeof element === "string") {
1399
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1625
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1400
1626
  }
1401
1627
  if (element == null) {
1402
1628
  return;
1403
1629
  }
1630
+ if (isNodeList(element)) {
1631
+ // 设置
1632
+ element.forEach(($ele) => {
1633
+ DOMUtilsContext.empty($ele);
1634
+ });
1635
+ return;
1636
+ }
1404
1637
  element.innerHTML = "";
1405
1638
  }
1406
1639
  /**
@@ -1431,7 +1664,8 @@ System.register('DOMUtils', [], (function (exports) {
1431
1664
  width(element, isShow = false) {
1432
1665
  let DOMUtilsContext = this;
1433
1666
  if (typeof element === "string") {
1434
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1667
+ element =
1668
+ DOMUtilsContext.windowApi.document.querySelector(element);
1435
1669
  }
1436
1670
  if (element == null) {
1437
1671
  return;
@@ -1543,7 +1777,7 @@ System.register('DOMUtils', [], (function (exports) {
1543
1777
  }
1544
1778
  element = element;
1545
1779
  if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
1546
- let style = getComputedStyle(element, null);
1780
+ let style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
1547
1781
  let marginLeft = DOMUtilsCommonUtils.getStyleValue(style, "marginLeft");
1548
1782
  let marginRight = DOMUtilsCommonUtils.getStyleValue(style, "marginRight");
1549
1783
  return element.offsetWidth + marginLeft + marginRight;
@@ -1569,7 +1803,7 @@ System.register('DOMUtils', [], (function (exports) {
1569
1803
  }
1570
1804
  element = element;
1571
1805
  if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
1572
- let style = getComputedStyle(element, null);
1806
+ let style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
1573
1807
  let marginTop = DOMUtilsCommonUtils.getStyleValue(style, "marginTop");
1574
1808
  let marginBottom = DOMUtilsCommonUtils.getStyleValue(style, "marginBottom");
1575
1809
  return element.offsetHeight + marginTop + marginBottom;
@@ -1596,11 +1830,18 @@ System.register('DOMUtils', [], (function (exports) {
1596
1830
  animate(element, styles, duration = 1000, callback = null) {
1597
1831
  let DOMUtilsContext = this;
1598
1832
  if (typeof element === "string") {
1599
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1833
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1600
1834
  }
1601
1835
  if (element == null) {
1602
1836
  return;
1603
1837
  }
1838
+ if (isNodeList(element)) {
1839
+ // 设置
1840
+ element.forEach(($ele) => {
1841
+ DOMUtilsContext.animate($ele, styles, duration, callback);
1842
+ });
1843
+ return;
1844
+ }
1604
1845
  if (typeof duration !== "number" || duration <= 0) {
1605
1846
  throw new TypeError("duration must be a positive number");
1606
1847
  }
@@ -1617,7 +1858,9 @@ System.register('DOMUtils', [], (function (exports) {
1617
1858
  let from = {};
1618
1859
  let to = {};
1619
1860
  for (let prop in styles) {
1620
- from[prop] = element.style[prop] || getComputedStyle(element)[prop];
1861
+ from[prop] =
1862
+ element.style[prop] ||
1863
+ DOMUtilsContext.windowApi.globalThis.getComputedStyle(element)[prop];
1621
1864
  to[prop] = styles[prop];
1622
1865
  }
1623
1866
  let timer = setInterval(function () {
@@ -1649,18 +1892,26 @@ System.register('DOMUtils', [], (function (exports) {
1649
1892
  wrap(element, wrapperHTML) {
1650
1893
  let DOMUtilsContext = this;
1651
1894
  if (typeof element === "string") {
1652
- element = DOMUtilsContext.windowApi.document.querySelector(element);
1895
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1653
1896
  }
1654
1897
  if (element == null) {
1655
1898
  return;
1656
1899
  }
1900
+ if (isNodeList(element)) {
1901
+ // 设置
1902
+ element.forEach(($ele) => {
1903
+ DOMUtilsContext.wrap($ele, wrapperHTML);
1904
+ });
1905
+ return;
1906
+ }
1657
1907
  element = element;
1658
1908
  // 创建一个新的div元素，并将wrapperHTML作为其innerHTML
1659
1909
  let wrapper = DOMUtilsContext.windowApi.document.createElement("div");
1660
1910
  wrapper.innerHTML = wrapperHTML;
1661
1911
  let wrapperFirstChild = wrapper.firstChild;
1662
1912
  // 将要包裹的元素插入目标元素前面
1663
- element.parentElement.insertBefore(wrapperFirstChild, element);
1913
+ let parentElement = element.parentElement;
1914
+ parentElement.insertBefore(wrapperFirstChild, element);
1664
1915
  // 将要包裹的元素移动到wrapper中
1665
1916
  wrapperFirstChild.appendChild(element);
1666
1917
  }
@@ -1740,6 +1991,8 @@ System.register('DOMUtils', [], (function (exports) {
1740
1991
  }
1741
1992
  parseHTML(html, useParser = false, isComplete = false) {
1742
1993
  let DOMUtilsContext = this;
1994
+ // 去除html前后的空格
1995
+ html = html.trim();
1743
1996
  function parseHTMLByDOMParser() {
1744
1997
  let parser = new DOMParser();
1745
1998
  if (isComplete) {
@@ -1766,16 +2019,61 @@ System.register('DOMUtils', [], (function (exports) {
1766
2019
  return parseHTMLByCreateDom();
1767
2020
  }
1768
2021
  }
2022
+ /**
2023
+ * 序列化表单元素
2024
+ * @param $form 表单元素
2025
+ * @example
2026
+ * DOMUtils.serialize(document.querySelector("form"))
2027
+ * > xxx=xxx&aaa=
2028
+ */
2029
+ serialize($form) {
2030
+ const elements = $form.elements;
2031
+ let serializedArray = [];
2032
+ for (let i = 0; i < elements.length; i++) {
2033
+ const element = elements[i];
2034
+ if (element.name &&
2035
+ !element.disabled &&
2036
+ (element.checked ||
2037
+ [
2038
+ "text",
2039
+ "hidden",
2040
+ "password",
2041
+ "textarea",
2042
+ "select-one",
2043
+ "select-multiple",
2044
+ ].includes(element.type))) {
2045
+ if (element.type === "select-multiple") {
2046
+ for (let j = 0; j < element.options.length; j++) {
2047
+ if (element.options[j].selected) {
2048
+ serializedArray.push({
2049
+ name: element.name,
2050
+ value: element.options[j].value,
2051
+ });
2052
+ }
2053
+ }
2054
+ }
2055
+ else {
2056
+ serializedArray.push({ name: element.name, value: element.value });
2057
+ }
2058
+ }
2059
+ }
2060
+ return serializedArray
2061
+ .map((item) => `${encodeURIComponent(item.name)}=${encodeURIComponent(item.value)}`)
2062
+ .join("&");
2063
+ }
1769
2064
  /**
1770
2065
  * 显示元素
1771
2066
  * @param target 当前元素
2067
+ * @param checkVisiblie 是否检测元素是否显示
2068
+ * + true （默认）如果检测到还未显示，则强制使用display: unset !important;
2069
+ * + false 不检测，直接设置display属性为空
1772
2070
  * @example
1773
2071
  * // 显示a.xx元素
1774
2072
  * DOMUtils.show(document.querySelector("a.xx"))
1775
2073
  * DOMUtils.show(document.querySelectorAll("a.xx"))
1776
2074
  * DOMUtils.show("a.xx")
1777
2075
  */
1778
- show(target) {
2076
+ show(target, checkVisiblie = true) {
1779
2077
  let DOMUtilsContext = this;
1780
2078
  if (target == null) {
1781
2079
  return;
@@ -1786,28 +2084,33 @@ System.register('DOMUtils', [], (function (exports) {
1786
2084
  if (target instanceof NodeList || target instanceof Array) {
1787
2085
  target = target;
1788
2086
  for (const element of target) {
1789
- DOMUtilsContext.show(element);
2087
+ DOMUtilsContext.show(element, checkVisiblie);
1790
2088
  }
1791
2089
  }
1792
2090
  else {
1793
2091
  target = target;
1794
2092
  target.style.display = "";
1795
- if (!DOMUtilsCommonUtils.isShow(target)) {
1796
- /* 仍然是不显示，尝试使用强覆盖 */
1797
- target.style.setProperty("display", "unset", "important");
2093
+ if (checkVisiblie) {
2094
+ if (!DOMUtilsCommonUtils.isShow(target)) {
2095
+ /* 仍然是不显示，尝试使用强覆盖 */
2096
+ target.style.setProperty("display", "unset", "important");
2097
+ }
1798
2098
  }
1799
2099
  }
1800
2100
  }
1801
2101
  /**
1802
2102
  * 隐藏元素
1803
2103
  * @param target 当前元素
2104
+ * @param checkVisiblie 是否检测元素是否显示
2105
+ * + true （默认）如果检测到显示，则强制使用display: none !important;
2106
+ * + false 不检测，直接设置display属性为none
1804
2107
  * @example
1805
2108
  * // 隐藏a.xx元素
1806
2109
  * DOMUtils.hide(document.querySelector("a.xx"))
1807
2110
  * DOMUtils.hide(document.querySelectorAll("a.xx"))
1808
2111
  * DOMUtils.hide("a.xx")
1809
2112
  */
1810
- hide(target) {
2113
+ hide(target, checkVisiblie = true) {
1811
2114
  let DOMUtilsContext = this;
1812
2115
  if (target == null) {
1813
2116
  return;
@@ -1818,15 +2121,17 @@ System.register('DOMUtils', [], (function (exports) {
1818
2121
  if (target instanceof NodeList || target instanceof Array) {
1819
2122
  target = target;
1820
2123
  for (const element of target) {
1821
- DOMUtilsContext.hide(element);
2124
+ DOMUtilsContext.hide(element, checkVisiblie);
1822
2125
  }
1823
2126
  }
1824
2127
  else {
1825
2128
  target = target;
1826
2129
  target.style.display = "none";
1827
- if (DOMUtilsCommonUtils.isShow(target)) {
1828
- /* 仍然是显示，尝试使用强覆盖 */
1829
- target.style.setProperty("display", "none", "important");
2130
+ if (checkVisiblie) {
2131
+ if (DOMUtilsCommonUtils.isShow(target)) {
2132
+ /* 仍然是显示，尝试使用强覆盖 */
2133
+ target.style.setProperty("display", "none", "important");
2134
+ }
1830
2135
  }
1831
2136
  }
1832
2137
  }
@@ -1850,9 +2155,15 @@ System.register('DOMUtils', [], (function (exports) {
1850
2155
  }
1851
2156
  let DOMUtilsContext = this;
1852
2157
  if (typeof element === "string") {
1853
- element = DOMUtilsContext.windowApi.document.querySelector(element);
2158
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
2159
+ }
2160
+ if (isNodeList(element)) {
2161
+ // 设置
2162
+ element.forEach(($ele) => {
2163
+ DOMUtilsContext.fadeIn($ele, duration, callback);
2164
+ });
2165
+ return;
1854
2166
  }
1855
- element = element;
1856
2167
  element.style.opacity = "0";
1857
2168
  element.style.display = "";
1858
2169
  let start = null;
@@ -1895,9 +2206,15 @@ System.register('DOMUtils', [], (function (exports) {
1895
2206
  return;
1896
2207
  }
1897
2208
  if (typeof element === "string") {
1898
- element = DOMUtilsContext.windowApi.document.querySelector(element);
2209
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
2210
+ }
2211
+ if (isNodeList(element)) {
2212
+ // 设置
2213
+ element.forEach(($ele) => {
2214
+ DOMUtilsContext.fadeOut($ele, duration, callback);
2215
+ });
2216
+ return;
1899
2217
  }
1900
- element = element;
1901
2218
  element.style.opacity = "1";
1902
2219
  let start = null;
1903
2220
  let timer = null;
@@ -1923,24 +2240,34 @@ System.register('DOMUtils', [], (function (exports) {
1923
2240
  /**
1924
2241
  * 切换元素的显示和隐藏状态
1925
2242
  * @param element 当前元素
2243
+ * @param checkVisiblie 是否检测元素是否显示
1926
2244
  * @example
1927
2245
  * // 如果元素a.xx当前是隐藏，则显示，如果是显示，则隐藏
1928
2246
  * DOMUtils.toggle(document.querySelector("a.xx"))
1929
2247
  * DOMUtils.toggle("a.xx")
1930
2248
  */
1931
- toggle(element) {
2249
+ toggle(element, checkVisiblie) {
1932
2250
  let DOMUtilsContext = this;
1933
2251
  if (typeof element === "string") {
1934
- element = DOMUtilsContext.windowApi.document.querySelector(element);
2252
+ element = DOMUtilsContext.windowApi.document.querySelectorAll(element);
1935
2253
  }
1936
2254
  if (element == null) {
1937
2255
  return;
1938
2256
  }
1939
- if (getComputedStyle(element).getPropertyValue("display") === "none") {
1940
- DOMUtilsContext.show(element);
2257
+ if (isNodeList(element)) {
2258
+ // 设置
2259
+ element.forEach(($ele) => {
2260
+ DOMUtilsContext.toggle($ele);
2261
+ });
2262
+ return;
2263
+ }
2264
+ if (DOMUtilsContext.windowApi.globalThis
2265
+ .getComputedStyle(element)
2266
+ .getPropertyValue("display") === "none") {
2267
+ DOMUtilsContext.show(element, checkVisiblie);
1941
2268
  }
1942
2269
  else {
1943
- DOMUtilsContext.hide(element);
2270
+ DOMUtilsContext.hide(element, checkVisiblie);
1944
2271
  }
1945
2272
  }
1946
2273
  /**