-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathDOM扩展.html
258 lines (240 loc) · 99.9 KB
/
DOM扩展.html
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>选择符 API | note</title>
<meta name="generator" content="VuePress 1.8.2">
<meta name="description" content="note">
<link rel="preload" href="/note/assets/css/0.styles.747e5b72.css" as="style"><link rel="preload" href="/note/assets/js/app.e947756a.js" as="script"><link rel="preload" href="/note/assets/js/3.90278144.js" as="script"><link rel="preload" href="/note/assets/js/147.d46f76fe.js" as="script"><link rel="preload" href="/note/assets/js/75.886b64ff.js" as="script"><link rel="prefetch" href="/note/assets/js/10.da0d339b.js"><link rel="prefetch" href="/note/assets/js/100.eb373f82.js"><link rel="prefetch" href="/note/assets/js/101.6125310d.js"><link rel="prefetch" href="/note/assets/js/102.523f9313.js"><link rel="prefetch" href="/note/assets/js/103.78d36a48.js"><link rel="prefetch" href="/note/assets/js/104.694c9e6d.js"><link rel="prefetch" href="/note/assets/js/105.71e94424.js"><link rel="prefetch" href="/note/assets/js/106.fb77264a.js"><link rel="prefetch" href="/note/assets/js/107.5dd95b10.js"><link rel="prefetch" href="/note/assets/js/108.0a006d43.js"><link rel="prefetch" href="/note/assets/js/109.99b454b9.js"><link rel="prefetch" href="/note/assets/js/11.1b7713af.js"><link rel="prefetch" href="/note/assets/js/110.86fd882a.js"><link rel="prefetch" href="/note/assets/js/111.7606269c.js"><link rel="prefetch" href="/note/assets/js/112.e69ee0d2.js"><link rel="prefetch" href="/note/assets/js/113.6c79fea6.js"><link rel="prefetch" href="/note/assets/js/114.8f370b23.js"><link rel="prefetch" href="/note/assets/js/115.1c28704b.js"><link rel="prefetch" href="/note/assets/js/116.6a34539a.js"><link rel="prefetch" href="/note/assets/js/117.cfab1284.js"><link rel="prefetch" href="/note/assets/js/118.097ef506.js"><link rel="prefetch" href="/note/assets/js/119.333eed56.js"><link rel="prefetch" href="/note/assets/js/12.39def087.js"><link rel="prefetch" href="/note/assets/js/120.83a7e4f9.js"><link rel="prefetch" href="/note/assets/js/121.149dce13.js"><link rel="prefetch" href="/note/assets/js/122.ccecd357.js"><link rel="prefetch" href="/note/assets/js/123.49c1fba1.js"><link rel="prefetch" href="/note/assets/js/124.1a8b0e77.js"><link rel="prefetch" href="/note/assets/js/125.81f0b603.js"><link rel="prefetch" href="/note/assets/js/126.f94c48be.js"><link rel="prefetch" href="/note/assets/js/127.a1bec729.js"><link rel="prefetch" href="/note/assets/js/128.a5df0129.js"><link rel="prefetch" href="/note/assets/js/129.758a8486.js"><link rel="prefetch" href="/note/assets/js/13.b049522d.js"><link rel="prefetch" href="/note/assets/js/130.49548025.js"><link rel="prefetch" href="/note/assets/js/131.21448cf0.js"><link rel="prefetch" href="/note/assets/js/132.5ffb4c56.js"><link rel="prefetch" href="/note/assets/js/133.aed7232e.js"><link rel="prefetch" href="/note/assets/js/134.83974382.js"><link rel="prefetch" href="/note/assets/js/135.e1e896f8.js"><link rel="prefetch" href="/note/assets/js/136.bd7ab84b.js"><link rel="prefetch" href="/note/assets/js/137.50d921ee.js"><link rel="prefetch" href="/note/assets/js/138.33638790.js"><link rel="prefetch" href="/note/assets/js/139.c4f5ff06.js"><link rel="prefetch" href="/note/assets/js/14.df73d004.js"><link rel="prefetch" href="/note/assets/js/140.7e3ae21a.js"><link rel="prefetch" href="/note/assets/js/141.7dfa6c47.js"><link rel="prefetch" href="/note/assets/js/142.75becf7a.js"><link rel="prefetch" href="/note/assets/js/143.14f1ce25.js"><link rel="prefetch" href="/note/assets/js/144.2e216e87.js"><link rel="prefetch" href="/note/assets/js/145.26a26cc2.js"><link rel="prefetch" href="/note/assets/js/146.c50a0ede.js"><link rel="prefetch" href="/note/assets/js/148.b4aeb28b.js"><link rel="prefetch" href="/note/assets/js/149.8f01ae6e.js"><link rel="prefetch" href="/note/assets/js/15.42fccff1.js"><link rel="prefetch" href="/note/assets/js/150.d9c7cf0d.js"><link rel="prefetch" href="/note/assets/js/151.b2331bd0.js"><link rel="prefetch" href="/note/assets/js/152.7bd4c3d1.js"><link rel="prefetch" href="/note/assets/js/153.48df5257.js"><link rel="prefetch" href="/note/assets/js/154.7abb2546.js"><link rel="prefetch" href="/note/assets/js/155.bdc019a0.js"><link rel="prefetch" href="/note/assets/js/156.1eb02576.js"><link rel="prefetch" href="/note/assets/js/157.7dc284af.js"><link rel="prefetch" href="/note/assets/js/158.d0e23bbe.js"><link rel="prefetch" href="/note/assets/js/159.cc2e9cae.js"><link rel="prefetch" href="/note/assets/js/16.fe892bc6.js"><link rel="prefetch" href="/note/assets/js/160.ab6aec17.js"><link rel="prefetch" href="/note/assets/js/161.51113cf1.js"><link rel="prefetch" href="/note/assets/js/162.3735fa5a.js"><link rel="prefetch" href="/note/assets/js/163.2bbe9891.js"><link rel="prefetch" href="/note/assets/js/164.09fe01ba.js"><link rel="prefetch" href="/note/assets/js/165.acdc7887.js"><link rel="prefetch" href="/note/assets/js/166.f35878e8.js"><link rel="prefetch" href="/note/assets/js/167.f2a924c1.js"><link rel="prefetch" href="/note/assets/js/168.49a5156a.js"><link rel="prefetch" href="/note/assets/js/169.37dffe7d.js"><link rel="prefetch" href="/note/assets/js/17.1a65396b.js"><link rel="prefetch" href="/note/assets/js/170.95a174e1.js"><link rel="prefetch" href="/note/assets/js/171.48ec050b.js"><link rel="prefetch" href="/note/assets/js/172.1a449136.js"><link rel="prefetch" href="/note/assets/js/173.b042e8e2.js"><link rel="prefetch" href="/note/assets/js/174.44dd9857.js"><link rel="prefetch" href="/note/assets/js/175.0eae6f38.js"><link rel="prefetch" href="/note/assets/js/176.e7a0aab8.js"><link rel="prefetch" href="/note/assets/js/177.fb2b493c.js"><link rel="prefetch" href="/note/assets/js/178.378fd43a.js"><link rel="prefetch" href="/note/assets/js/179.490584ee.js"><link rel="prefetch" href="/note/assets/js/18.af147209.js"><link rel="prefetch" href="/note/assets/js/180.b1c81b5d.js"><link rel="prefetch" href="/note/assets/js/181.dbebfafa.js"><link rel="prefetch" href="/note/assets/js/182.62a84f3e.js"><link rel="prefetch" href="/note/assets/js/183.5e5a78dd.js"><link rel="prefetch" href="/note/assets/js/184.0a59da2d.js"><link rel="prefetch" href="/note/assets/js/185.88a6670c.js"><link rel="prefetch" href="/note/assets/js/186.4697aaf7.js"><link rel="prefetch" href="/note/assets/js/187.480b8108.js"><link rel="prefetch" href="/note/assets/js/188.4141b789.js"><link rel="prefetch" href="/note/assets/js/189.5a64163c.js"><link rel="prefetch" href="/note/assets/js/19.c6db8c80.js"><link rel="prefetch" href="/note/assets/js/190.acb1369a.js"><link rel="prefetch" href="/note/assets/js/191.94a3b042.js"><link rel="prefetch" href="/note/assets/js/192.66fa57a0.js"><link rel="prefetch" href="/note/assets/js/193.38728d50.js"><link rel="prefetch" href="/note/assets/js/194.c6a218d1.js"><link rel="prefetch" href="/note/assets/js/195.ac5c3621.js"><link rel="prefetch" href="/note/assets/js/196.b403c248.js"><link rel="prefetch" href="/note/assets/js/197.dc2fdc3e.js"><link rel="prefetch" href="/note/assets/js/198.9fc8a642.js"><link rel="prefetch" href="/note/assets/js/199.a2d0b122.js"><link rel="prefetch" href="/note/assets/js/2.23574326.js"><link rel="prefetch" href="/note/assets/js/20.e0847784.js"><link rel="prefetch" href="/note/assets/js/200.4f64dd0d.js"><link rel="prefetch" href="/note/assets/js/201.bf85ae0a.js"><link rel="prefetch" href="/note/assets/js/21.59ca2081.js"><link rel="prefetch" href="/note/assets/js/22.c5de56ad.js"><link rel="prefetch" href="/note/assets/js/23.0ca72332.js"><link rel="prefetch" href="/note/assets/js/24.40dcfa48.js"><link rel="prefetch" href="/note/assets/js/25.3a8dbd37.js"><link rel="prefetch" href="/note/assets/js/26.e170720a.js"><link rel="prefetch" href="/note/assets/js/27.d7b3a8b3.js"><link rel="prefetch" href="/note/assets/js/28.b6211836.js"><link rel="prefetch" href="/note/assets/js/29.8989bc0b.js"><link rel="prefetch" href="/note/assets/js/30.c1441795.js"><link rel="prefetch" href="/note/assets/js/31.535e7227.js"><link rel="prefetch" href="/note/assets/js/32.c085da5e.js"><link rel="prefetch" href="/note/assets/js/33.94e31849.js"><link rel="prefetch" href="/note/assets/js/34.2a0a7c0e.js"><link rel="prefetch" href="/note/assets/js/35.ea577ebe.js"><link rel="prefetch" href="/note/assets/js/36.3e4ca0e9.js"><link rel="prefetch" href="/note/assets/js/37.457851b2.js"><link rel="prefetch" href="/note/assets/js/38.58391346.js"><link rel="prefetch" href="/note/assets/js/39.314e2c1c.js"><link rel="prefetch" href="/note/assets/js/4.07bcf00c.js"><link rel="prefetch" href="/note/assets/js/40.7a4992e6.js"><link rel="prefetch" href="/note/assets/js/41.782aced9.js"><link rel="prefetch" href="/note/assets/js/42.be7cf586.js"><link rel="prefetch" href="/note/assets/js/43.56b5a4ed.js"><link rel="prefetch" href="/note/assets/js/44.8d44debe.js"><link rel="prefetch" href="/note/assets/js/45.05492c10.js"><link rel="prefetch" href="/note/assets/js/46.313f9714.js"><link rel="prefetch" href="/note/assets/js/47.2bd35de7.js"><link rel="prefetch" href="/note/assets/js/48.8b399041.js"><link rel="prefetch" href="/note/assets/js/49.2bdcefce.js"><link rel="prefetch" href="/note/assets/js/5.6a1f7866.js"><link rel="prefetch" href="/note/assets/js/50.66e24588.js"><link rel="prefetch" href="/note/assets/js/51.82aab1fa.js"><link rel="prefetch" href="/note/assets/js/52.22755877.js"><link rel="prefetch" href="/note/assets/js/53.2d8059eb.js"><link rel="prefetch" href="/note/assets/js/54.6206fc19.js"><link rel="prefetch" href="/note/assets/js/55.33b69640.js"><link rel="prefetch" href="/note/assets/js/56.474fe548.js"><link rel="prefetch" href="/note/assets/js/57.cb986845.js"><link rel="prefetch" href="/note/assets/js/58.9bb3e465.js"><link rel="prefetch" href="/note/assets/js/59.2dd021c8.js"><link rel="prefetch" href="/note/assets/js/6.7d4ce126.js"><link rel="prefetch" href="/note/assets/js/60.3a37f110.js"><link rel="prefetch" href="/note/assets/js/61.7903290c.js"><link rel="prefetch" href="/note/assets/js/62.f5225b69.js"><link rel="prefetch" href="/note/assets/js/63.2c341744.js"><link rel="prefetch" href="/note/assets/js/64.5eb61b5c.js"><link rel="prefetch" href="/note/assets/js/65.261994ad.js"><link rel="prefetch" href="/note/assets/js/66.c8747b66.js"><link rel="prefetch" href="/note/assets/js/67.17352922.js"><link rel="prefetch" href="/note/assets/js/68.261de6ca.js"><link rel="prefetch" href="/note/assets/js/69.6bd4de47.js"><link rel="prefetch" href="/note/assets/js/7.83ae24aa.js"><link rel="prefetch" href="/note/assets/js/70.8229f00c.js"><link rel="prefetch" href="/note/assets/js/71.c823ec99.js"><link rel="prefetch" href="/note/assets/js/72.eaedac79.js"><link rel="prefetch" href="/note/assets/js/73.77d37587.js"><link rel="prefetch" href="/note/assets/js/74.6590f027.js"><link rel="prefetch" href="/note/assets/js/76.a1a73fa8.js"><link rel="prefetch" href="/note/assets/js/77.7e91101d.js"><link rel="prefetch" href="/note/assets/js/78.5decad8d.js"><link rel="prefetch" href="/note/assets/js/79.873d4d76.js"><link rel="prefetch" href="/note/assets/js/8.0568bdf3.js"><link rel="prefetch" href="/note/assets/js/80.3399e7ac.js"><link rel="prefetch" href="/note/assets/js/81.1a517606.js"><link rel="prefetch" href="/note/assets/js/82.4b2ad5a6.js"><link rel="prefetch" href="/note/assets/js/83.f12aef98.js"><link rel="prefetch" href="/note/assets/js/84.72db6940.js"><link rel="prefetch" href="/note/assets/js/85.fdda2491.js"><link rel="prefetch" href="/note/assets/js/86.a1b519c5.js"><link rel="prefetch" href="/note/assets/js/87.2aa0d10a.js"><link rel="prefetch" href="/note/assets/js/88.d585344e.js"><link rel="prefetch" href="/note/assets/js/89.46a6bd7d.js"><link rel="prefetch" href="/note/assets/js/9.a5aff2ef.js"><link rel="prefetch" href="/note/assets/js/90.a666a016.js"><link rel="prefetch" href="/note/assets/js/91.536ac0ea.js"><link rel="prefetch" href="/note/assets/js/92.3c07d1c5.js"><link rel="prefetch" href="/note/assets/js/93.5fbaaa0c.js"><link rel="prefetch" href="/note/assets/js/94.d9d49225.js"><link rel="prefetch" href="/note/assets/js/95.0c6ceb62.js"><link rel="prefetch" href="/note/assets/js/96.be43da0f.js"><link rel="prefetch" href="/note/assets/js/97.311eb161.js"><link rel="prefetch" href="/note/assets/js/98.658de69e.js"><link rel="prefetch" href="/note/assets/js/99.f19faecb.js">
<link rel="stylesheet" href="/note/assets/css/0.styles.747e5b72.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/note/" class="home-link router-link-active"><!----> <span class="site-name">note</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/note/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/note/css/css基础.html" class="nav-link">
css 相关
</a></div><div class="nav-item"><a href="/note/javascript/知识体系.html" class="nav-link">
javascript
</a></div><div class="nav-item"><a href="/note/js-patterns/代理模式.html" class="nav-link">
js 设计模式
</a></div><div class="nav-item"><a href="/note/webpack/基础知识.html" class="nav-link">
webpack
</a></div><div class="nav-item"><a href="/note/vue/相关笔记.html" class="nav-link">
vue
</a></div><div class="nav-item"><a href="/note/react/react基础.html" class="nav-link">
react 相关
</a></div><div class="nav-item"><a href="/note/angular/基础.html" class="nav-link">
angular
</a></div><div class="nav-item"><a href="/note/http/HTTP协议基础.html" class="nav-link">
http
</a></div><div class="nav-item"><a href="/note/node/基础知识.html" class="nav-link">
node
</a></div><div class="nav-item"><a href="/note/typescript/typescript基础语法.html" class="nav-link">
typescript
</a></div><div class="nav-item"><a href="/note/webgis/坐标系相关.html" class="nav-link">
webgis
</a></div><div class="nav-item"><a href="/note/js-gc/数据类型.html" class="nav-link">
红宝书
</a></div><div class="nav-item"><a href="/note/interview/forEach-forIn-forOf-map之间的区别.html" class="nav-link">
interview
</a></div><div class="nav-item"><a href="/note/gisAlgorithm/数据结构-矢量.html" class="nav-link">
gis 算法
</a></div><div class="nav-item"><a href="/note/graphics/图形学基础.html" class="nav-link">
图形学相关
</a></div><div class="nav-item"><a href="/note/js-algorithm/栈.html" class="nav-link">
算法与数据结构
</a></div><div class="nav-item"><a href="/note/PerformanceOptimization/指标以及工具.html" class="nav-link">
性能优化
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/note/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/note/css/css基础.html" class="nav-link">
css 相关
</a></div><div class="nav-item"><a href="/note/javascript/知识体系.html" class="nav-link">
javascript
</a></div><div class="nav-item"><a href="/note/js-patterns/代理模式.html" class="nav-link">
js 设计模式
</a></div><div class="nav-item"><a href="/note/webpack/基础知识.html" class="nav-link">
webpack
</a></div><div class="nav-item"><a href="/note/vue/相关笔记.html" class="nav-link">
vue
</a></div><div class="nav-item"><a href="/note/react/react基础.html" class="nav-link">
react 相关
</a></div><div class="nav-item"><a href="/note/angular/基础.html" class="nav-link">
angular
</a></div><div class="nav-item"><a href="/note/http/HTTP协议基础.html" class="nav-link">
http
</a></div><div class="nav-item"><a href="/note/node/基础知识.html" class="nav-link">
node
</a></div><div class="nav-item"><a href="/note/typescript/typescript基础语法.html" class="nav-link">
typescript
</a></div><div class="nav-item"><a href="/note/webgis/坐标系相关.html" class="nav-link">
webgis
</a></div><div class="nav-item"><a href="/note/js-gc/数据类型.html" class="nav-link">
红宝书
</a></div><div class="nav-item"><a href="/note/interview/forEach-forIn-forOf-map之间的区别.html" class="nav-link">
interview
</a></div><div class="nav-item"><a href="/note/gisAlgorithm/数据结构-矢量.html" class="nav-link">
gis 算法
</a></div><div class="nav-item"><a href="/note/graphics/图形学基础.html" class="nav-link">
图形学相关
</a></div><div class="nav-item"><a href="/note/js-algorithm/栈.html" class="nav-link">
算法与数据结构
</a></div><div class="nav-item"><a href="/note/PerformanceOptimization/指标以及工具.html" class="nav-link">
性能优化
</a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/note/js-gc/数据类型.html" class="sidebar-link">数据类型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/数据类型.html#数据类型" class="sidebar-link">💫 数据类型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/数据类型.html#number" class="sidebar-link">👉 Number</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/数据类型.html#string" class="sidebar-link">👉 String</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/数据类型.html#object" class="sidebar-link">👉 Object</a></li></ul></li></ul></li><li><a href="/note/js-gc/操作符.html" class="sidebar-link">操作符</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#操作符" class="sidebar-link">操作符</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#一元操作符" class="sidebar-link">一元操作符</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#布尔操作符" class="sidebar-link">布尔操作符</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#逻辑或" class="sidebar-link">逻辑或</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#乘法操作符" class="sidebar-link">乘法操作符</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#除法操作符" class="sidebar-link">除法操作符</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#求模" class="sidebar-link">求模</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#加性操作符" class="sidebar-link">加性操作符</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#关系操作符" class="sidebar-link">关系操作符</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#相等操作符" class="sidebar-link">相等操作符</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#逗号操作符" class="sidebar-link">逗号操作符</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#breack-和-continue-语句" class="sidebar-link">breack 和 continue 语句</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/操作符.html#switch-语句" class="sidebar-link">switch 语句</a></li></ul></li></ul></li><li><a href="/note/js-gc/变量、作用域和内存.html" class="sidebar-link">变量、作用域和内存</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/变量、作用域和内存.html#变量、作用域和内存问题" class="sidebar-link">变量、作用域和内存问题</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/变量、作用域和内存.html#检测类型" class="sidebar-link">检测类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/变量、作用域和内存.html#执行环境以及作用域" class="sidebar-link">执行环境以及作用域</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/变量、作用域和内存.html#垃圾收集" class="sidebar-link">垃圾收集</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/变量、作用域和内存.html#javascript-v8-引擎的垃圾回收机制" class="sidebar-link">JavaScript V8 引擎的垃圾回收机制</a></li></ul></li></ul></li><li><a href="/note/js-gc/引用类型.html" class="sidebar-link">引用类型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#object-类型" class="sidebar-link">Object 类型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#array-类型" class="sidebar-link">Array 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#date-类型" class="sidebar-link">Date 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#regexp-类型" class="sidebar-link">RegExp 类型</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#函数声明与函数表达式" class="sidebar-link">函数声明与函数表达式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#函数的内部属性" class="sidebar-link">函数的内部属性</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#函数属性和方法" class="sidebar-link">函数属性和方法</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#基本包装类型" class="sidebar-link">基本包装类型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#boolean-对象" class="sidebar-link">Boolean 对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#number-类型" class="sidebar-link">Number 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#string-类型" class="sidebar-link">String 类型</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#单体内置对象" class="sidebar-link">单体内置对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#global-对象" class="sidebar-link">Global 对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/引用类型.html#math-对象" class="sidebar-link">Math 对象</a></li></ul></li></ul></li><li><a href="/note/js-gc/集合引用类型.html" class="sidebar-link">集合引用类型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#定型数组" class="sidebar-link">定型数组</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#arraybuffer" class="sidebar-link">ArrayBuffer</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#dataview" class="sidebar-link">DataView</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#map" class="sidebar-link">Map</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#基本-api" class="sidebar-link">基本 API</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#顺序与迭代" class="sidebar-link">顺序与迭代</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#选择-object-还是-map" class="sidebar-link">选择 Object 还是 Map</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#weakmap" class="sidebar-link">WeakMap</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#基本-api-2" class="sidebar-link">基本 API</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#弱键" class="sidebar-link">弱键</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#不可迭代键" class="sidebar-link">不可迭代键</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#使用弱映射" class="sidebar-link">使用弱映射</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#set" class="sidebar-link">Set</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#基本-api-3" class="sidebar-link">基本 API</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/集合引用类型.html#顺序与迭代-2" class="sidebar-link">顺序与迭代</a></li></ul></li></ul></li><li><a href="/note/js-gc/迭代器与生成器.html" class="sidebar-link">迭代器与生成器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#迭代器模式" class="sidebar-link">迭代器模式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#迭代器协议" class="sidebar-link">迭代器协议</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#自定义迭代器" class="sidebar-link">自定义迭代器</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#提前终止迭代器" class="sidebar-link">提前终止迭代器</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#生成器" class="sidebar-link">生成器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#生成器基础" class="sidebar-link">生成器基础</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#通过-yield-中断执行" class="sidebar-link">通过 yield 中断执行</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#生成器作为默认迭代器" class="sidebar-link">生成器作为默认迭代器</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/迭代器与生成器.html#提前终止生成器" class="sidebar-link">提前终止生成器</a></li></ul></li></ul></li><li><a href="/note/js-gc/对象、类与面向对象编程.html" class="sidebar-link">对象、类与面向对象编程</a></li><li><a href="/note/js-gc/代理与反射.html" class="sidebar-link">代理与反射</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#代理基础" class="sidebar-link">代理基础</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#创建代理" class="sidebar-link">创建代理</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#定义捕获器" class="sidebar-link">定义捕获器</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#捕获器参数和反射-api" class="sidebar-link">捕获器参数和反射 API</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#捕获器不变式" class="sidebar-link">捕获器不变式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#可撤销代理" class="sidebar-link">可撤销代理</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#实用反射-api" class="sidebar-link">实用反射 API</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#代理另一个代理" class="sidebar-link">代理另一个代理</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#代理的问题与不足" class="sidebar-link">代理的问题与不足</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#代理捕获器与反射方法" class="sidebar-link">代理捕获器与反射方法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#get" class="sidebar-link">get()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#set" class="sidebar-link">set()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#has" class="sidebar-link">has()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#defineproperty" class="sidebar-link">defineProperty()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#getownpropertydescriptor" class="sidebar-link">getOwnPropertyDescriptor()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#deleteproperty" class="sidebar-link">deleteProperty()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#ownkeys" class="sidebar-link">ownKeys()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#getprototypeof" class="sidebar-link">getPrototypeOf()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#setprototypeof" class="sidebar-link">setPrototypeOf()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#isextensible" class="sidebar-link">isExtensible()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#preventextensions" class="sidebar-link">preventExtensions()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#apply" class="sidebar-link">apply()</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#construct" class="sidebar-link">construct()</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#代理模式" class="sidebar-link">代理模式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#跟踪属性访问" class="sidebar-link">跟踪属性访问</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#隐藏属性" class="sidebar-link">隐藏属性</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#属性验证" class="sidebar-link">属性验证</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#函数与构造函数参数验证" class="sidebar-link">函数与构造函数参数验证</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/代理与反射.html#数据绑定与可观察对象" class="sidebar-link">数据绑定与可观察对象</a></li></ul></li></ul></li><li><a href="/note/js-gc/对象的创建模式.html" class="sidebar-link">对象的创建模式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#理解对象" class="sidebar-link">理解对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#属性类型" class="sidebar-link">属性类型</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#创建对象" class="sidebar-link">创建对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#工厂模式" class="sidebar-link">工厂模式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#构造函数模式" class="sidebar-link">构造函数模式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#原型模式" class="sidebar-link">原型模式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#组合使用构造函数模式和原型模式-最常用的模式" class="sidebar-link">组合使用构造函数模式和原型模式（最常用的模式）</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#动态原型模式" class="sidebar-link">动态原型模式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#寄生构造函数模式" class="sidebar-link">寄生构造函数模式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/对象的创建模式.html#稳妥构造函数模式" class="sidebar-link">稳妥构造函数模式</a></li></ul></li></ul></li><li><a href="/note/js-gc/继承.html" class="sidebar-link">继承</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#原型链" class="sidebar-link">原型链</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#默认的原型" class="sidebar-link">默认的原型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#确定原型和实例之间的关系" class="sidebar-link">确定原型和实例之间的关系</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#谨慎地定义方法" class="sidebar-link">谨慎地定义方法</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#原型链的问题" class="sidebar-link">原型链的问题</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#借用构造函数" class="sidebar-link">借用构造函数</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#传递参数" class="sidebar-link">传递参数</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#借用构造函数存在的问题" class="sidebar-link">借用构造函数存在的问题</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#组合继承-最常用" class="sidebar-link">组合继承（最常用）</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#原型式继承" class="sidebar-link">原型式继承</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#寄生式继承" class="sidebar-link">寄生式继承</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/继承.html#寄生组合式继承" class="sidebar-link">寄生组合式继承</a></li></ul></li><li><a href="/note/js-gc/函数表达式.html" class="sidebar-link">函数表达式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#函数定义" class="sidebar-link">函数定义</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#函数声明" class="sidebar-link">函数声明</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#函数表达式" class="sidebar-link">函数表达式</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#递归" class="sidebar-link">递归</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#闭包" class="sidebar-link">闭包</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#创建闭包" class="sidebar-link">创建闭包</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#闭包与变量" class="sidebar-link">闭包与变量</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#关于-this-对象" class="sidebar-link">关于 this 对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#内存泄漏" class="sidebar-link">内存泄漏</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#模仿块级作用域" class="sidebar-link">模仿块级作用域</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#私有变量" class="sidebar-link">私有变量</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#静态私有变量" class="sidebar-link">静态私有变量</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#模块模式" class="sidebar-link">模块模式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/函数表达式.html#增强的模块模式" class="sidebar-link">增强的模块模式</a></li></ul></li></ul></li><li><a href="/note/js-gc/promise与异步函数.html" class="sidebar-link">promise与异步函数</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#promise" class="sidebar-link">Promise</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#基础" class="sidebar-link">基础</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#promise-的实例方法" class="sidebar-link">Promise 的实例方法</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#promise-连用以及合并请求" class="sidebar-link">Promise 连用以及合并请求</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#promise-的扩展" class="sidebar-link">Promise 的扩展</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#异步函数" class="sidebar-link">异步函数</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#async" class="sidebar-link">async</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#await" class="sidebar-link">await</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#await-的限制" class="sidebar-link">await 的限制</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#停止和恢复执行" class="sidebar-link">停止和恢复执行</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/promise与异步函数.html#异步函数策略" class="sidebar-link">异步函数策略</a></li></ul></li></ul></li><li><a href="/note/js-gc/BOM.html" class="sidebar-link">BOM</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#window-对象" class="sidebar-link">window 对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#全局作用域" class="sidebar-link">全局作用域</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#窗口关系及框架" class="sidebar-link">窗口关系及框架</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#窗口位置" class="sidebar-link">窗口位置</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#窗口大小" class="sidebar-link">窗口大小</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#导航和打开窗口" class="sidebar-link">导航和打开窗口</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#settimeout-setinterval" class="sidebar-link">setTimeout/setInterval</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#系统对话框" class="sidebar-link">系统对话框</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#location-对象" class="sidebar-link">location 对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#查询字符串参数" class="sidebar-link">查询字符串参数</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#位置操作" class="sidebar-link">位置操作</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#nagigator-对象" class="sidebar-link">nagigator 对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#检查插件" class="sidebar-link">检查插件</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/BOM.html#history-对象" class="sidebar-link">history 对象</a></li></ul></li><li><a href="/note/js-gc/DOM.html" class="sidebar-link">DOM</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#节点层次" class="sidebar-link">节点层次</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#node-类型" class="sidebar-link">Node 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#document-类型" class="sidebar-link">Document 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#element-类型" class="sidebar-link">Element 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#text-类型" class="sidebar-link">Text 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#comment-类型" class="sidebar-link">Comment 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#documenttype-类型" class="sidebar-link">DocumentType 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#documentfragment-类型" class="sidebar-link">DocumentFragment 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#attr-属性" class="sidebar-link">Attr 属性</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#dom-操作技术" class="sidebar-link">DOM 操作技术</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#动态脚本" class="sidebar-link">动态脚本</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#动态样式" class="sidebar-link">动态样式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM.html#操作表格" class="sidebar-link">操作表格</a></li></ul></li></ul></li><li><a href="/note/js-gc/DOM扩展.html" class="active sidebar-link">DOM扩展</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#选择符-api" class="sidebar-link">选择符 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#queryselector-方法" class="sidebar-link">querySelector() 方法</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#querysekectorall-方法" class="sidebar-link">querySekectorAll() 方法</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#matches-方法" class="sidebar-link">matches() 方法</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#元素遍历" class="sidebar-link">元素遍历</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#html-5" class="sidebar-link">HTML 5</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#css-类扩展" class="sidebar-link">CSS 类扩展</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#焦点管理" class="sidebar-link">焦点管理</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#htmldocument-扩展" class="sidebar-link">HTMLDocument 扩展</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#字符集属性" class="sidebar-link">字符集属性</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#自定义属性" class="sidebar-link">自定义属性</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#插入标记" class="sidebar-link">插入标记</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#专有扩展" class="sidebar-link">专有扩展</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#children-属性" class="sidebar-link">children 属性</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM扩展.html#contains-方法" class="sidebar-link">contains() 方法</a></li></ul></li></ul></li><li><a href="/note/js-gc/DOM2和DOM3.html" class="sidebar-link">DOM2和DOM3</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#dom2、dom3" class="sidebar-link">DOM2、DOM3</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#dom-变化" class="sidebar-link">DOM 变化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#documenttype-类型的变化" class="sidebar-link">DocumentType 类型的变化</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#document-的变化" class="sidebar-link">Document 的变化</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#node-的变化" class="sidebar-link">Node 的变化</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#框架的变化" class="sidebar-link">框架的变化</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#样式" class="sidebar-link">样式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#dom-样式属性和方法" class="sidebar-link">DOM 样式属性和方法</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#计算的样式" class="sidebar-link">计算的样式</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#操作样式表" class="sidebar-link">操作样式表</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#元素大小" class="sidebar-link">元素大小</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#遍历" class="sidebar-link">遍历</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#nodeiterator" class="sidebar-link">NodeIterator</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/DOM2和DOM3.html#treewalker" class="sidebar-link">TreeWalker</a></li></ul></li></ul></li><li><a href="/note/js-gc/事件.html" class="sidebar-link">事件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#事件流" class="sidebar-link">事件流</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#事件冒泡" class="sidebar-link">事件冒泡</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#事件捕获" class="sidebar-link">事件捕获</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#dom-事件流" class="sidebar-link">DOM 事件流</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#事件处理程序" class="sidebar-link">事件处理程序</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#html-事件处理程序" class="sidebar-link">HTML 事件处理程序</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#dom0-事件处理程序" class="sidebar-link">DOM0 事件处理程序</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#dom2-事件处理程序" class="sidebar-link">DOM2 事件处理程序</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#ie-事件处理程序" class="sidebar-link">IE 事件处理程序</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#跨浏览器的事件处理程序" class="sidebar-link">跨浏览器的事件处理程序</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#事件对象" class="sidebar-link">事件对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#dom-中的事件对象" class="sidebar-link">DOM 中的事件对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#ie-中的事件对象" class="sidebar-link">IE 中的事件对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#跨浏览器事件对象" class="sidebar-link">跨浏览器事件对象</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#事件类型" class="sidebar-link">事件类型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#用户界面事件" class="sidebar-link">用户界面事件</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#焦点事件" class="sidebar-link">焦点事件</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#鼠标和滚轮事件" class="sidebar-link">鼠标和滚轮事件</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#键盘与输入事件" class="sidebar-link">键盘与输入事件</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#html5-事件" class="sidebar-link">HTML5 事件</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#触摸及手势事件" class="sidebar-link">触摸及手势事件</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#内存与性能" class="sidebar-link">内存与性能</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#事件委托" class="sidebar-link">事件委托</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#删除事件处理程序" class="sidebar-link">删除事件处理程序</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#模拟事件" class="sidebar-link">模拟事件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/事件.html#dom-事件模拟" class="sidebar-link">DOM 事件模拟</a></li></ul></li></ul></li><li><a href="/note/js-gc/动画与Canvas图形.html" class="sidebar-link">动画与Canvas图形</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#使用-requestanimationframe" class="sidebar-link">使用 requestAnimationFrame</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#requestanimationframe" class="sidebar-link">requestAnimationFrame</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#cancelanimationframe" class="sidebar-link">cancelAnimationFrame</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#通过-requestanimationframe-节流" class="sidebar-link">通过 requestAnimationFrame 节流</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#基本的画布功能" class="sidebar-link">基本的画布功能</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#_2d-绘图上下文" class="sidebar-link">2D 绘图上下文</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#填充和描边" class="sidebar-link">填充和描边</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#绘制矩形" class="sidebar-link">绘制矩形</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#绘制路径" class="sidebar-link">绘制路径</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#绘制文本" class="sidebar-link">绘制文本</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#变换" class="sidebar-link">变换</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#绘制对象" class="sidebar-link">绘制对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#阴影" class="sidebar-link">阴影</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#渐变" class="sidebar-link">渐变</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#图案" class="sidebar-link">图案</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#图像数据" class="sidebar-link">图像数据</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#合成" class="sidebar-link">合成</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#webgl" class="sidebar-link">WebGL</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/动画与Canvas图形.html#webgl-基础" class="sidebar-link">webgl 基础</a></li></ul></li></ul></li><li><a href="/note/js-gc/客户端存储.html" class="sidebar-link">客户端存储</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#cookie" class="sidebar-link">cookie</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#限制" class="sidebar-link">限制</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#cookie-的构成" class="sidebar-link">cookie 的构成</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#javascript-中的-cookie" class="sidebar-link">JavaScript 中的 cookie</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#子-cookie" class="sidebar-link">子 cookie</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#使用-cookie-的注意事项" class="sidebar-link">使用 cookie 的注意事项</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#web-storage" class="sidebar-link">Web Storage</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#storage-类型" class="sidebar-link">Storage 类型</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#sessionstorage-对象" class="sidebar-link">sessionStorage 对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#localstorage-对象" class="sidebar-link">localStorage 对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#存储事件" class="sidebar-link">存储事件</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#限制-2" class="sidebar-link">限制</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#indexeddb" class="sidebar-link">IndexedDB</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#数据库" class="sidebar-link">数据库</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#对象存储" class="sidebar-link">对象存储</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#事务" class="sidebar-link">事务</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#插入对象" class="sidebar-link">插入对象</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#通过游标查询" class="sidebar-link">通过游标查询</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#键范围" class="sidebar-link">键范围</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#设置游标方向" class="sidebar-link">设置游标方向</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#索引" class="sidebar-link">索引</a></li><li class="sidebar-sub-header"><a href="/note/js-gc/客户端存储.html#限制-3" class="sidebar-link">限制</a></li></ul></li></ul></li><li><a href="/note/js-gc/模块.html" class="sidebar-link">模块</a></li><li><a href="/note/js-gc/工作者线程.html" class="sidebar-link">工作者线程</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/工作者线程.html#工作者线程简介" class="sidebar-link">工作者线程简介</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/js-gc/工作者线程.html#工作者线程与线程" class="sidebar-link">工作者线程与线程</a></li></ul></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="选择符-api"><a href="#选择符-api" class="header-anchor">#</a> 选择符 API</h2> <p>Selectors API Level 1 的核心是两个方法：querySelector() 和 querySelectorAll() 。在兼容浏览器中， Document 类型和 Element 类型的实例上都会暴露这两个方法。Selectors API Level 2 规范在 Element 类型上新增了更多方法，比如 matches() 、 find() 和 findAll() 。不过，目前还没有浏览器实现或宣称实现 find() 和 findAll()。</p> <h3 id="queryselector-方法"><a href="#queryselector-方法" class="header-anchor">#</a> querySelector() 方法</h3> <p>querySelector() 方法接收 CSS 选择符参数，返回匹配该模式的第一个后代元素，如果没有匹配项则返回 null 。如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 取得 body 元素</span>
<span class="token keyword">let</span> body <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'body'</span><span class="token punctuation">)</span>
<span class="token comment">// 获取 id 为 mydiv 的元素</span>
<span class="token keyword">let</span> myDiv <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#mydiv'</span><span class="token punctuation">)</span>
<span class="token comment">// 获取类名为 selected 的第一个元素</span>
<span class="token keyword">let</span> selected <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.selected'</span><span class="token punctuation">)</span>
<span class="token comment">// 获取类名为 button 的第一个 img 元素</span>
<span class="token keyword">let</span> img <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'img.button'</span><span class="token punctuation">)</span>
</code></pre></div><p>在 Document 上使用 querySelector() 方法时，会从文档元素开始搜索；在 Element 上使用 querySelector() 方法时，则只会从当前元素的后代中查询。</p> <h3 id="querysekectorall-方法"><a href="#querysekectorall-方法" class="header-anchor">#</a> querySekectorAll() 方法</h3> <p>querySelectorAll() 方法跟 querySelector() 一样，也接收一个用于查询的参数，但它会返回所有匹配的节点，而不止一个。这个方法返回的是一个 NodeList 的静态实例。需要注意的是：querySelectorAll() 返回的 NodeList 实例一个属性和方法都不缺，但它是一个静态的“快照”，而非“实时”的查询。这样的底层实现避免了使用 NodeList 对象可能造成的性能问题。如果没有匹配项，则返回空的 NodeList 实例。</p> <p>与 querySelector() 一样， querySelectorAll() 也可以在 Document 、 DocumentFragment 和 Element 类型上使用。下面是几个例子：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 获取 id 为 mydiv 的 div 元素中的所有 em 元素</span>
<span class="token keyword">let</span> ems <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'mydiv'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'em'</span><span class="token punctuation">)</span>
<span class="token comment">// 获取所有类名中包含 selected 的元素</span>
<span class="token keyword">let</span> selecteds <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'.selected'</span><span class="token punctuation">)</span>
<span class="token comment">// 获取所有是 p 元素子元素的 strong 元素</span>
<span class="token keyword">let</span> strongs <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'p strong'</span><span class="token punctuation">)</span>
</code></pre></div><p>返回的 NodeList 对象可以通过 for-of 循环、 item() 方法或中括号语法取得个别元素。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> strongElements <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"p strong"</span><span class="token punctuation">)</span>
<span class="token comment">// 以下 3 个循环的效果一样</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> strong <span class="token keyword">of</span> strongElements<span class="token punctuation">)</span> <span class="token punctuation">{</span>
strong<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">"important"</span>
<span class="token punctuation">}</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> strongElements<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token operator">++</span>i<span class="token punctuation">)</span> <span class="token punctuation">{</span>
strongElements<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">"important"</span>
<span class="token punctuation">}</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> strongElements<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token operator">++</span>i<span class="token punctuation">)</span> <span class="token punctuation">{</span>
strongElements<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">"important"</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="matches-方法"><a href="#matches-方法" class="header-anchor">#</a> matches() 方法</h3> <p>matches() 方法（在规范草案中称为 matchesSelector()）接收一个 CSS 选择符参数，如果元素匹配则该选择符返回 true ，否则返回 false 。例如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>dcoument<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">matches</span><span class="token punctuation">(</span><span class="token string">'body.page1'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// true</span>
<span class="token punctuation">}</span>
</code></pre></div><p>使用这个方法可以方便地检测某个元素会不会被 querySelector() 或 querySelectorAll() 方法返回。</p> <h2 id="元素遍历"><a href="#元素遍历" class="header-anchor">#</a> 元素遍历</h2> <p>IE9 之前的版本不会把元素间的空格当成空白节点，而其他浏览器则会。这样就导致了 childNodes 和 firstChild 等属性上的差异。为了弥补这个差异，同时不影响 DOM规范，W3C 通过新的 Element Traversal 规范定义了一组新属性。Element Traversal API 为 DOM 元素添加了 5 个属性：</p> <ul><li>childElementCount ，返回子元素数量（不包含文本节点和注释）；</li> <li>firstElementChild ，指向第一个 Element 类型的子元素（ Element 版 firstChild ）；</li> <li>lastElementChild ，指向最后一个 Element 类型的子元素（ Element 版 lastChild ）；</li> <li>previousElementSibling ， 指 向 前 一 个 Element 类 型 的 同 胞 元 素 （ Element 版 previousSibling ）；</li> <li>nextElementSibling ，指向后一个 Element 类型的同胞元素（ Element 版 nextSibling ）。</li></ul> <p>举个例子，过去要以跨浏览器方式遍历特定元素的所有子元素，代码大致是这样写的：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> parentElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'parent'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> currentChildNode <span class="token operator">=</span> parentElement<span class="token punctuation">.</span>firstChild<span class="token punctuation">;</span>
<span class="token comment">// 没有子元素，firstChild 返回 null，跳过循环</span>
<span class="token keyword">while</span> <span class="token punctuation">(</span>currentChildNode<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>currentChildNode<span class="token punctuation">.</span>nodeType <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 如果有元素节点，则做相应处理</span>
<span class="token function">processChild</span><span class="token punctuation">(</span>currentChildNode<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>currentChildNode <span class="token operator">===</span> parentElement<span class="token punctuation">.</span>lastChild<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
currentChildNode <span class="token operator">=</span> currentChildNode<span class="token punctuation">.</span>nextSibling<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>使用 Element Traversal 属性之后，以上代码可以简化如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> parentElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'parent'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> currentChildElement <span class="token operator">=</span> parentElement<span class="token punctuation">.</span>firstElementChild<span class="token punctuation">;</span>
<span class="token comment">// 没有子元素，firstElementChild 返回 null，跳过循环</span>
<span class="token keyword">while</span> <span class="token punctuation">(</span>currentChildElement<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 这就是元素节点，做相应处理</span>
<span class="token function">processChild</span><span class="token punctuation">(</span>currentChildElement<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>currentChildElement <span class="token operator">===</span> parentElement<span class="token punctuation">.</span>lastElementChild<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
currentChildElement <span class="token operator">=</span> currentChildElement<span class="token punctuation">.</span>nextElementSibling<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="html-5"><a href="#html-5" class="header-anchor">#</a> HTML 5</h2> <p>HTML5 代表着与以前的 HTML 截然不同的方向。在所有以前的 HTML 规范中，从未出现过描述 JavaScript 接口的情形，HTML 就是一个纯标记语言。JavaScript 绑定的事，一概交给 DOM 规范去定义。然而，HTML5 规范却包含了与标记相关的大量 JavaScript API 定义。其中有的 API 与 DOM 重合，定义了浏览器应该提供的 DOM扩展。</p> <h3 id="css-类扩展"><a href="#css-类扩展" class="header-anchor">#</a> CSS 类扩展</h3> <ul><li>getElementsByClassName() 方法</li></ul> <p>可以通过 document 对象及所有 HTML 元素调用该方法。该方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的 NodeList。传入多个类名时，类名的先后顺序不重要。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 取得所有类名中包含 username 和 current 的元素</span>
<span class="token keyword">let</span> allCurrentUserNames <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">'username current'</span><span class="token punctuation">)</span>
<span class="token comment">// 取得 id 为 mydiv 的元素子树中所有包含 selected 类的元素</span>
<span class="token keyword">let</span> selected <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'mydiv'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">'selected'</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>classList 属性</li></ul> <p>在操作类名时，需要通过 className 属性添加、删除和替换类名。因为 className 中是一个字符串，所以即使值修改字符串一部分，也必须每次都设置整个字符串的值。
如下代码：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bd user disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre></div><p>如果想要删除其中一个：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 要删除 user 类</span>
<span class="token keyword">let</span> tatgetClass <span class="token operator">=</span> <span class="token string">'user'</span>
<span class="token comment">// 把类名拆成数组</span>
<span class="token keyword">let</span> classNames <span class="token operator">=</span> div<span class="token punctuation">.</span>className<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\S+</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span>
<span class="token comment">// 找到要删除类名的索引</span>
<span class="token keyword">let</span> idx <span class="token operator">=</span> classNames<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>tatgetClass<span class="token punctuation">)</span>
<span class="token comment">// 如果有则删除</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>idx <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
classNames<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>idx<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 重新设置类名</span>
div<span class="token punctuation">.</span>className <span class="token operator">=</span> classNames<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span>
</code></pre></div><p>HTML5 新增了一种操作类名的方式，为所有元素添加了 classList 属性，classList 是一个新的集合类型 DOMTokenList 的实例，与其他 DOM 集合类型一样， DOMTokenList
也有 length 属性表示自己包含多少项，也可以通过 item() 或中括号取得个别的元素。此外，DOMTokenList 还增加了以下方法。</p> <ul><li>add(value) ，向类名列表中添加指定的字符串值 value 。如果这个值已经存在，则什么也不做。</li> <li>contains(value) ，返回布尔值，表示给定的 value 是否存在。</li> <li>remove(value) ，从类名列表中删除指定的字符串值 value 。</li> <li>toggle(value) ，如果类名列表中已经存在指定的 value ，则删除；如果不存在，则添加。</li></ul> <p>上面的例子就可以使用一句代码替换：</p> <div class="language-js extra-class"><pre class="language-js"><code>div<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'user'</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="焦点管理"><a href="#焦点管理" class="header-anchor">#</a> 焦点管理</h3> <p>HTML5 增加了辅助 DOM 焦点管理的功能。首先是 document.activeElement ，始终包含当前拥有焦点的 DOM元素。
默认情况下， document.activeElement 在页面刚加载完之后会设置为 document.body 。而在页面完全加载之前， document.activeElement 的值为 null 。</p> <p>其次是 document.hasFocus() 方法，该方法返回布尔值，表示文档是否拥有焦点：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> button <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myButton'</span><span class="token punctuation">)</span>
button<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">hasFocus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
</code></pre></div><h3 id="htmldocument-扩展"><a href="#htmldocument-扩展" class="header-anchor">#</a> HTMLDocument 扩展</h3> <ol><li>readyState 属性
document.readyState 属性有两个可能的值：</li></ol> <ul><li>loading: 正在加载文档</li> <li>complete: 已经加载完文档</li></ul> <p>实际开发中，最好是把 document.readState 当成一个指示器，以判断文档是否加载完毕。这个属性的基本用法如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>readyState <span class="token operator">===</span> <span class="token string">'complete'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 执行操作</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li>兼容模式</li></ol> <p>自从 IE6 提供了以标准或混杂模式渲染页面的能力之后，检测页面渲染模式成为一个必要的需求。IE 为 document 添加了 compatMode 属性，这个属性唯一的任务是指示浏览器当前处于什么渲染模式。如下面的例子所示，标准模式下 document.compatMode 的值是 "CSS1Compat" ，而在混杂模式下，document.compatMode 的值是 "BackCompat" ：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>compatMode <span class="token operator">===</span> <span class="token string">'CSS1Compat'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Standards mode'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Quirks mode'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="3"><li>head 属性</li></ol> <p>作为对 document.body （指向文档的 body 元素）的补充，HTML5 增加了 document.head 属性，指向文档的 head 元素。可以像下面这样直接取得 head 元素：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> head <span class="token operator">=</span> document<span class="token punctuation">.</span>head <span class="token operator">||</span> document<span class="token punctuation">.</span><span class="token function">getElementByTagName</span><span class="token punctuation">(</span><span class="token string">'head'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
</code></pre></div><h3 id="字符集属性"><a href="#字符集属性" class="header-anchor">#</a> 字符集属性</h3> <p>HTML5 增加了几个与文档字符集有关的新属性。其中， characterSet 属性表示文档实际使用的字符集，也可以用来指定新字符集。这个属性的默认值是 "UTF-16" ，但可以通过 meta 元素或响应头，以及新增的 characterSet 属性来修改。下面是一个例子：</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>characterSet<span class="token punctuation">)</span> <span class="token comment">// "UTF-16"</span>
document<span class="token punctuation">.</span>characterSet <span class="token operator">=</span> <span class="token string">'UTF-8'</span>
</code></pre></div><h3 id="自定义属性"><a href="#自定义属性" class="header-anchor">#</a> 自定义属性</h3> <p>HTML5 允许给元素指定非标准的属性，但要使用前缀 data- 以便告诉浏览器，这些属性既不包含与渲染有关的信息，也不包含元素的语义信息。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myDiv<span class="token punctuation">"</span></span> <span class="token attr-name">data-appId</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12345<span class="token punctuation">"</span></span> <span class="token attr-name">data-myname</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Nicholas<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre></div><p>定义了自定义数据属性后，可以通过元素的 dataset 属性来访问。 dataset 属性是一个 DOMStringMap 的实例，包含一组键/值对映射。元素的每个 data-name 属性在 dataset 中都可以通过 data- 后面的字符串作为键来访问。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'mydiv'</span><span class="token punctuation">)</span>
<span class="token comment">// 取得自定义属性的值</span>
<span class="token keyword">let</span> appid <span class="token operator">=</span> div<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>appid
<span class="token keyword">let</span> myName <span class="token operator">=</span> div<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>myname
<span class="token comment">// 设置值</span>
div<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>appid <span class="token operator">=</span> <span class="token number">23456</span>
div<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>myname <span class="token operator">=</span> <span class="token string">'Michael'</span>
<span class="token comment">// 有没有 myname</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>div<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>myname<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hello, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>div<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>myname<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="插入标记"><a href="#插入标记" class="header-anchor">#</a> 插入标记</h3> <ul><li>innerHTML 属性</li></ul> <p>该属性会返回元素所有后代的 HTML 字符串，包括元素、注释和文本节点，如果设置该属性，则会根据提供的字符串值以新的 DOM 子树替代元素中原来包含的所有节点。对于读取 innerHTML 属性，不同的浏览器返回的结果是不同的。如果赋值中不包含任何 HTML 标签，则直接生成一个文本节点。</p> <p>使用 innerHTNL 插入的 script 标签是不会执行的。多数浏览器支持使用 innerHTML 插入 style 元素。</p> <ul><li>outerHTML 属性</li></ul> <p>读取 outerHTML 属性时，会返回调用它的元素（及所有后代元素）的 HTML 字符串。在写入 outerHTML 属性时，调用它的元素会被传入的 HTML 字符串经解释之后生成的 DOM 子树取代。比如下面的 HTML 代码：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is a <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>paragraph<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> with a list following it.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre></div><p>在这个 div 元素上调用 outerHTML 会返回相同的字符串，包括 div 本身。
如果使用 outerHTML 设置 HTML，比如：</p> <div class="language-js extra-class"><pre class="language-js"><code>div<span class="token punctuation">.</span>outerHTML <span class="token operator">=</span> <span class="token string">"<p>This is a paragraph.</p>"</span>
</code></pre></div><p>则会得到与执行以下脚本相同的结果：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> p <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
p<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span><span class="token string">"This is a paragraph."</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
div<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">replaceChild</span><span class="token punctuation">(</span>p<span class="token punctuation">,</span> div<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>新的 p 元素会取代 DOM 树中原来的 div 元素。</p> <ul><li>insertAdjacentHTML() 与 insertAdjacentText()</li></ul> <p>这两个方法时插入标签的方法；它们都接收两个参数：要插入标记的位置和要插入的 HTML 或文本。第一个参数必须是下列值中的一个：</p> <ul><li>"beforebegin" ，插入当前元素前面，作为前一个同胞节点；</li> <li>"afterbegin" ，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；</li> <li>"beforeend" ，在当前元素之下插入一个新的子元素或在最后一个个子元素之前再插入新的子元素；</li> <li>"afterend" ，插入当前元素后面，作为下一个同胞节点</li></ul> <p>假设当前元素是</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Hello world!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</code></pre></div><p>则 "beforebegin" 和 "afterbegin" 中的 "begin" 指开始标签 p ；而"afterend" 和 "beforeend" 中的 "end" 指结束标签 p 。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 作为前一个同胞节点插入</span>
element<span class="token punctuation">.</span><span class="token function">insertAdjacentHTML</span><span class="token punctuation">(</span><span class="token string">"beforebegin"</span><span class="token punctuation">,</span> <span class="token string">"<p>Hello world!</p>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
element<span class="token punctuation">.</span><span class="token function">insertAdjacentText</span><span class="token punctuation">(</span><span class="token string">"beforebegin"</span><span class="token punctuation">,</span> <span class="token string">"Hello world!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 作为第一个子节点插入</span>
element<span class="token punctuation">.</span><span class="token function">insertAdjacentHTML</span><span class="token punctuation">(</span><span class="token string">"afterbegin"</span><span class="token punctuation">,</span> <span class="token string">"<p>Hello world!</p>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
element<span class="token punctuation">.</span><span class="token function">insertAdjacentText</span><span class="token punctuation">(</span><span class="token string">"afterbegin"</span><span class="token punctuation">,</span> <span class="token string">"Hello world!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 作为最后一个子节点插入</span>
element<span class="token punctuation">.</span><span class="token function">insertAdjacentHTML</span><span class="token punctuation">(</span><span class="token string">"beforeend"</span><span class="token punctuation">,</span> <span class="token string">"<p>Hello world!</p>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
element<span class="token punctuation">.</span><span class="token function">insertAdjacentText</span><span class="token punctuation">(</span><span class="token string">"beforeend"</span><span class="token punctuation">,</span> <span class="token string">"Hello world!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 作为下一个同胞节点插入</span>
element<span class="token punctuation">.</span><span class="token function">insertAdjacentHTML</span><span class="token punctuation">(</span><span class="token string">"afterend"</span><span class="token punctuation">,</span> <span class="token string">"<p>Hello world!</p>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> element<span class="token punctuation">.</span>
<span class="token function">insertAdjacentText</span><span class="token punctuation">(</span><span class="token string">"afterend"</span><span class="token punctuation">,</span> <span class="token string">"Hello world!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>scrollIntoView() 方法</li></ul> <p>scrollIntoView() 方法可以在所有 HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。
有两个参数；</p> <p>alignToTop 是一个布尔值：</p> <ul><li>true ：窗口滚动后元素的顶部与视口顶部对齐。</li> <li>false ：窗口滚动后元素的底部与视口底部对齐。</li></ul> <p>scrollIntoViewOptions 是一个选项对象：</p> <ul><li>behavior ：定义过渡动画，可取的值为 "smooth" 和 "auto" ，默认为 "auto" 。</li> <li>block ：定义垂直方向的对齐，可取的值为 "start" 、 "center" 、 "end" 和 "nearest" ，默
认为 "start" 。</li> <li>inline ：定义水平方向的对齐，可取的值为 "start" 、 "center" 、 "end" 和 "nearest" ，默
认为 "nearest" 。</li></ul> <p>不传参数等同于 alignToTop 为 true 。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 确保元素可见</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">scrollIntoView</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// 同上</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">scrollIntoView</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">scrollIntoView</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
block<span class="token operator">:</span> <span class="token string">'start'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 尝试将元素平滑地滚入视口</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">scrollIntoView</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
behavior<span class="token operator">:</span> <span class="token string">'smooth'</span><span class="token punctuation">,</span>
block<span class="token operator">:</span> <span class="token string">'start'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="专有扩展"><a href="#专有扩展" class="header-anchor">#</a> 专有扩展</h2> <h3 id="children-属性"><a href="#children-属性" class="header-anchor">#</a> children 属性</h3> <p>元素的 childNodes 包含所有子节点，这些子节点可能是其他元素、文本节点、注释或处理指令；children 属性是一个 HTMLCollection ，只包含元素的 Element 类型的子节点；</p> <h3 id="contains-方法"><a href="#contains-方法" class="header-anchor">#</a> contains() 方法</h3> <p>DOM 编程中经常需要确定一个元素是不是另一个元素的后代。IE 首先引入了 contains() 方法，让开发者可以在不遍历 DOM 的情况下获取这个信息。 contains() 方法应该在要搜索的祖先元素上调用，参数是待确定的目标节点。</p> <p>如果目标节点是被搜索节点的后代，contains() 返回 true ，否则返回 false 。下面看一个例子：</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
</code></pre></div><p>这个例子测试 html 元素中是否包含 body 元素，在格式正确的 HTML 中会返回 true 。</p> <section style="border-top:2px solid #eaecef;padding-top:1rem;margin-top:2rem;"><div><span data-flag-title="Your Article Title" class="leancloud-visitors"><em class="post-meta-item-text">阅读量： </em> <i class="leancloud-visitors-count"></i></span></div> <h3><a href="javascript:;"></a>
评 论：
</h3> <div id="vcomments"></div></section></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">更新:</span> <span class="time">12/27/2020, 4:59:16 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/note/js-gc/DOM.html" class="prev">
DOM
</a></span> <span class="next"><a href="/note/js-gc/DOM2和DOM3.html">
DOM2和DOM3
</a>
→
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/note/assets/js/app.e947756a.js" defer></script><script src="/note/assets/js/3.90278144.js" defer></script><script src="/note/assets/js/147.d46f76fe.js" defer></script><script src="/note/assets/js/75.886b64ff.js" defer></script>
</body>
</html>