函数重载，试着写了几个方法用来获取DOM。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124// 查找元素
export function $(selector: string): Element | null;
export function $(parent: Element | null, selector: string): Element | null;
export function $(
param1: string | Element | null,
param2?: any
): Element | null {
if (typeof param1 === 'string') {
return document.querySelector(param1);
} else {
if (!param1) return null;
return param1.querySelector(param2);
}
}
// 查找元素集合
export function $$(selector: string): Array<Element>;
export function $$(parent: Element | null, selector: string): Array<Element>;
export function $$(
param1: string | Element | null,
param2?: any
): Array<Element> {
const toArray = (list: NodeList): Array<any> => {
return Array.prototype.slice.call(list);
};
if (typeof param1 === 'string') {
return toArray(document.querySelectorAll(param1));
} else {
if (!param1) return [];
return toArray(param1.querySelectorAll(param2));
}
}
// 查找符合特定属性的元素
export function $find(selector: string, props: object): Element | null;
export function $find(
parent: Element | null,
selector: string,
props: object
): Element | null;
export function $find(
param1: string | Element | null,
param2: object | string,
param3?: any
): Element | null {
let doms: Array<Element> = [];
let props = {};
if (typeof param1 === 'string') {
doms = $$(param1);
props = param2;
} else if (typeof param2 === 'string') {
doms = $$(param1, param2);
props = param3;
}
const dom = doms.find((dom: Element) => isDomMatchProps(dom, props));
return dom || null;
}
// 查找符合特定属性的元素集合
export function $$find(selector: string, props: object): Array<Element>;
export function $$find(
parent: Element | null,
selector: string,
props: object
): Array<Element>;
export function $$find(
param1: string | Element | null,
param2: object | string,
param3?: any
) {
let doms: Array<Element> = [];
let props = {};
if (typeof param1 === 'string') {
doms = $$(param1);
props = param2;
} else if (typeof param2 === 'string') {
doms = $$(param1, param2);
props = param3;
}
doms = doms.filter((dom: Element) => isDomMatchProps(dom, props));
return doms;
}
// 判断元素是否匹配特定属性
function isDomMatchProps(dom: Element, props: object): boolean {
if (!dom) return false;
let output = true;
for (let propKey in props) {
if (!isValidKey(propKey, props)) {
output = false;
break;
}
const propVal = props[propKey];
// 针对class的情况特殊处理一下
if (propKey === 'class') {
if (!dom.classList.contains(propVal)) {
output = false;
}
continue;
}
const subKeyList: string[] = (propKey as string).split('.');
let result = dom;
while (subKeyList.length && result) {
const k = subKeyList.shift();
if (!k || !isValidKey(k, result)) {
output = false;
break;
}
result = result[k];
}
if (result !== propVal) {
output = false;
break;
}
}
return output;
}
function isValidKey(
key: string | number | symbol,
object: object
): key is keyof typeof object {
return key in object;
}
1 | // 调用示例 |
