# 一.内置对象
前言
# 1.ECMAScript 的内置对象
//Array用于表示和操作数组
let numbers: number[] = [1, 2, 3, 4, 5]
let numbers: Array<number> = [1, 2, 3, 4, 5]
//Date 对象用于处理日期和时间
let now: Date = new Date("2023-12-19")
console.log(now)
//Map对象是一种类似字典的数据结构，用于存储键值对
const map1: Map<string, number> = new Map()
map1.set("a", 1)
//Set 对象是一种集合，允许存储不重复的值
const a: Set<number> = new Set([1, 2, 3])
//RegExp用于处理正则表达式
let pattern: RegExp = /hello/
let text: string = "Hello, World!"
console.log(pattern.test(text)) // false
//Error 对象用于表示在运行时发生的错误
let e: Error = new Error("Error occurred")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 2.BOM 内置对象
DOM 和 BOM 内置对象包含 Document，Element，Event，NodeList 等
const img: HTMLImageElement = document.querySelector("img")!
const img2: HTMLImageElement = document.querySelector("img") as HTMLImageElement
const imgList: NodeListOf<HTMLImageElement> = document.querySelectorAll("img")
document.addEventListener("click", (event: MouseEvent) => {
console.log(event)
})
1
2
3
4
5
6
2
3
4
5
6
# 3.DOM 内置对象
- typescript/lib/lib.dom.d.ts
interface GlobalEventHandlersEventMap {
abort: UIEvent
animationcancel: AnimationEvent
animationend: AnimationEvent
animationiteration: AnimationEvent
animationstart: AnimationEvent
auxclick: MouseEvent
beforeinput: InputEvent
blur: FocusEvent
cancel: Event
canplay: Event
canplaythrough: Event
change: Event
click: MouseEvent
close: Event
compositionend: CompositionEvent
compositionstart: CompositionEvent
compositionupdate: CompositionEvent
contextmenu: MouseEvent
copy: ClipboardEvent
cuechange: Event
cut: ClipboardEvent
dblclick: MouseEvent
drag: DragEvent
dragend: DragEvent
dragenter: DragEvent
dragleave: DragEvent
dragover: DragEvent
dragstart: DragEvent
drop: DragEvent
durationchange: Event
emptied: Event
ended: Event
error: ErrorEvent
focus: FocusEvent
focusin: FocusEvent
focusout: FocusEvent
formdata: FormDataEvent
gotpointercapture: PointerEvent
input: Event
invalid: Event
keydown: KeyboardEvent
keypress: KeyboardEvent
keyup: KeyboardEvent
load: Event
loadeddata: Event
loadedmetadata: Event
loadstart: Event
lostpointercapture: PointerEvent
mousedown: MouseEvent
mouseenter: MouseEvent
mouseleave: MouseEvent
mousemove: MouseEvent
mouseout: MouseEvent
mouseover: MouseEvent
mouseup: MouseEvent
paste: ClipboardEvent
pause: Event
play: Event
playing: Event
pointercancel: PointerEvent
pointerdown: PointerEvent
pointerenter: PointerEvent
pointerleave: PointerEvent
pointermove: PointerEvent
pointerout: PointerEvent
pointerover: PointerEvent
pointerup: PointerEvent
progress: ProgressEvent
ratechange: Event
reset: Event
resize: UIEvent
scroll: Event
scrollend: Event
securitypolicyviolation: SecurityPolicyViolationEvent
seeked: Event
seeking: Event
select: Event
selectionchange: Event
selectstart: Event
slotchange: Event
stalled: Event
submit: SubmitEvent
suspend: Event
timeupdate: Event
toggle: Event
touchcancel: TouchEvent
touchend: TouchEvent
touchmove: TouchEvent
touchstart: TouchEvent
transitioncancel: TransitionEvent
transitionend: TransitionEvent
transitionrun: TransitionEvent
transitionstart: TransitionEvent
volumechange: Event
waiting: Event
webkitanimationend: Event
webkitanimationiteration: Event
webkitanimationstart: Event
webkittransitionend: Event
wheel: WheelEvent
}
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
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
- dom 类型
interface HTMLElementTagNameMap {
a: HTMLAnchorElement
abbr: HTMLElement
address: HTMLElement
applet: HTMLAppletElement
area: HTMLAreaElement
article: HTMLElement
aside: HTMLElement
audio: HTMLAudioElement
b: HTMLElement
base: HTMLBaseElement
bdi: HTMLElement
bdo: HTMLElement
blockquote: HTMLQuoteElement
body: HTMLBodyElement // *
br: HTMLBRElement
button: HTMLButtonElement // *
canvas: HTMLCanvasElement // *
caption: HTMLTableCaptionElement
cite: HTMLElement
code: HTMLElement
col: HTMLTableColElement
colgroup: HTMLTableColElement
data: HTMLDataElement
datalist: HTMLDataListElement
dd: HTMLElement
del: HTMLModElement
details: HTMLDetailsElement
dfn: HTMLElement
dialog: HTMLDialogElement
dir: HTMLDirectoryElement
div: HTMLDivElement
dl: HTMLDListElement
dt: HTMLElement
em: HTMLElement
embed: HTMLEmbedElement
fieldset: HTMLFieldSetElement
figcaption: HTMLElement
figure: HTMLElement
font: HTMLFontElement
footer: HTMLElement
form: HTMLFormElement
frame: HTMLFrameElement
frameset: HTMLFrameSetElement
h1: HTMLHeadingElement
h2: HTMLHeadingElement
h3: HTMLHeadingElement
h4: HTMLHeadingElement
h5: HTMLHeadingElement
h6: HTMLHeadingElement
head: HTMLHeadElement
header: HTMLElement
hgroup: HTMLElement
hr: HTMLHRElement
html: HTMLHtmlElement
i: HTMLElement
iframe: HTMLIFrameElement
img: HTMLImageElement // *
input: HTMLInputElement // *
ins: HTMLModElement
kbd: HTMLElement
label: HTMLLabelElement
legend: HTMLLegendElement
li: HTMLLIElement
link: HTMLLinkElement
main: HTMLElement
map: HTMLMapElement
mark: HTMLElement
marquee: HTMLMarqueeElement
menu: HTMLMenuElement
meta: HTMLMetaElement
meter: HTMLMeterElement
nav: HTMLElement
noscript: HTMLElement
object: HTMLObjectElement
ol: HTMLOListElement
optgroup: HTMLOptGroupElement
option: HTMLOptionElement
output: HTMLOutputElement
p: HTMLParagraphElement
param: HTMLParamElement
picture: HTMLPictureElement
pre: HTMLPreElement
progress: HTMLProgressElement
q: HTMLQuoteElement
rp: HTMLElement
rt: HTMLElement
ruby: HTMLElement
s: HTMLElement
samp: HTMLElement
script: HTMLScriptElement
section: HTMLElement
select: HTMLSelectElement
slot: HTMLSlotElement
small: HTMLElement
source: HTMLSourceElement
span: HTMLSpanElement
strong: HTMLElement
style: HTMLStyleElement
sub: HTMLElement
summary: HTMLElement
sup: HTMLElement
table: HTMLTableElement
tbody: HTMLTableSectionElement
td: HTMLTableDataCellElement
template: HTMLTemplateElement
textarea: HTMLTextAreaElement
tfoot: HTMLTableSectionElement
th: HTMLTableHeaderCellElement
thead: HTMLTableSectionElement
time: HTMLTimeElement
title: HTMLTitleElement
tr: HTMLTableRowElement
track: HTMLTrackElement
u: HTMLElement
ul: HTMLUListElement
var: HTMLElement
video: HTMLVideoElement // *
wbr: HTMLElement
}
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
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
- 案例
const input = (event: InputEvent) => {
const target = event.target as EventTarget
inputValue.value = (target as HTMLInputElement).value
}
1
2
3
4
2
3
4