@webalternatif/js-core 1.6.3 → 1.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/dist/cjs/Mouse.js +6 -1
- package/dist/cjs/Translator.js +7 -1
- package/dist/cjs/array.js +5 -35
- package/dist/cjs/dom.js +817 -208
- package/dist/cjs/eventDispatcher.js +6 -1
- package/dist/cjs/index.js +6 -13
- package/dist/cjs/is.js +44 -1
- package/dist/cjs/math.js +56 -31
- package/dist/cjs/traversal.js +1 -2
- package/dist/cjs/utils.js +155 -38
- package/dist/esm/Mouse.js +7 -1
- package/dist/esm/Translator.js +7 -1
- package/dist/esm/array.js +4 -35
- package/dist/esm/dom.js +816 -206
- package/dist/esm/eventDispatcher.js +7 -1
- package/dist/esm/index.js +7 -8
- package/dist/esm/is.js +43 -0
- package/dist/esm/math.js +58 -32
- package/dist/esm/traversal.js +1 -2
- package/dist/esm/utils.js +156 -39
- package/dist/umd/Translator.umd.js +1 -0
- package/dist/umd/dom.umd.js +1 -0
- package/dist/umd/eventDispatcher.umd.js +1 -0
- package/dist/umd/mouse.umd.js +1 -0
- package/dist/umd/webf.umd.js +1 -0
- package/docs/array.md +41 -8
- package/docs/dom.md +1063 -269
- package/docs/is.md +244 -0
- package/docs/math.md +87 -7
- package/docs/mouse.md +43 -0
- package/docs/translator.md +14 -14
- package/docs/traversal.md +16 -16
- package/docs/utils.md +173 -20
- package/package.json +10 -4
- package/src/Mouse.js +73 -0
- package/src/Translator.js +148 -0
- package/src/array.js +136 -0
- package/src/dom.js +1553 -0
- package/src/eventDispatcher.js +118 -0
- package/src/index.js +106 -0
- package/src/is.js +201 -0
- package/src/math.js +113 -0
- package/src/onOff.js +313 -0
- package/src/random.js +38 -0
- package/src/string.js +662 -0
- package/src/stringPrototype.js +16 -0
- package/src/traversal.js +236 -0
- package/src/utils.js +242 -0
- package/types/Translator.d.ts +6 -5
- package/types/array.d.ts +0 -1
- package/types/dom.d.ts +763 -204
- package/types/index.d.ts +22 -21
- package/types/is.d.ts +3 -0
- package/types/math.d.ts +6 -5
- package/types/utils.d.ts +4 -4
- package/types/i18n.d.ts +0 -4
package/docs/dom.md
CHANGED
|
@@ -14,670 +14,1464 @@ import { dom } from '@webalternatif/js-core'
|
|
|
14
14
|
<!-- GENERATED:dom -->
|
|
15
15
|
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
|
|
16
16
|
|
|
17
|
-
##
|
|
17
|
+
## children
|
|
18
18
|
|
|
19
|
-
[src/dom.js:
|
|
19
|
+
[src/dom.js:53-55][1]
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
Returns the direct children of an element.
|
|
22
|
+
If a selector is provided, only children matching the selector are returned.
|
|
22
23
|
|
|
23
|
-
|
|
24
|
+
### Parameters
|
|
24
25
|
|
|
25
|
-
|
|
26
|
+
* `el` **[Element][2]** Parent element
|
|
27
|
+
* `selector` **[string][3]?** Optional CSS selector to filter direct children
|
|
26
28
|
|
|
27
|
-
|
|
29
|
+
### Examples
|
|
28
30
|
|
|
29
|
-
|
|
31
|
+
```javascript
|
|
32
|
+
// <ul id="list"><li class="a"></li><li class="b"></li></ul>
|
|
33
|
+
const list = document.getElementById('list')
|
|
30
34
|
|
|
31
|
-
|
|
35
|
+
dom.children(list) // [[<li class="a">], [<li class="b">]]
|
|
36
|
+
dom.children(list, '.a') // [<li class="a">]
|
|
37
|
+
```
|
|
32
38
|
|
|
33
|
-
|
|
39
|
+
Returns **[Array][4]<[Element][2]>** Direct children, optionally filtered
|
|
34
40
|
|
|
35
|
-
|
|
41
|
+
## child
|
|
36
42
|
|
|
37
|
-
|
|
43
|
+
[src/dom.js:72-74][5]
|
|
38
44
|
|
|
39
|
-
|
|
45
|
+
Returns the first direct child of an element matching `selector`.
|
|
40
46
|
|
|
41
47
|
### Parameters
|
|
42
48
|
|
|
43
|
-
* `
|
|
49
|
+
* `el` **[Element][2]** Parent element
|
|
50
|
+
* `selector` **[string][3]?** Optional CSS selector to filter direct children
|
|
44
51
|
|
|
45
|
-
|
|
52
|
+
### Examples
|
|
46
53
|
|
|
47
|
-
|
|
54
|
+
```javascript
|
|
55
|
+
// <ul id="list"><li class="a"></li><li class="b"></li></ul>
|
|
56
|
+
const list = document.getElementById('list')
|
|
48
57
|
|
|
49
|
-
|
|
58
|
+
dom.child(list) // <li class="a">
|
|
59
|
+
dom.child(list, '.b') // <li class="b">
|
|
60
|
+
dom.child(list, '.c') // null
|
|
61
|
+
```
|
|
50
62
|
|
|
51
|
-
|
|
63
|
+
Returns **([Element][2] | null)** The first matching direct child, or null if none found
|
|
52
64
|
|
|
53
|
-
|
|
54
|
-
* `cssRule` **[string][7]** 
|
|
65
|
+
## find
|
|
55
66
|
|
|
56
|
-
|
|
67
|
+
[src/dom.js:102-127][6]
|
|
57
68
|
|
|
58
|
-
|
|
69
|
+
Finds elements based on a selector or a collection
|
|
70
|
+
|
|
71
|
+
If only one argument is provided, the search is performed from `document`.
|
|
59
72
|
|
|
60
|
-
|
|
73
|
+
The `selector` can be:
|
|
74
|
+
|
|
75
|
+
* a CSS selector string
|
|
76
|
+
* a single Element
|
|
77
|
+
* a NodeList or array-like collection of Elements
|
|
61
78
|
|
|
62
79
|
### Parameters
|
|
63
80
|
|
|
64
|
-
* `
|
|
65
|
-
* `selector` **[string][
|
|
81
|
+
* `refEl` **([Element][2] | [Document][7] | [DocumentFragment][8] | [string][3])** Reference element or selector (if used alone)
|
|
82
|
+
* `selector` **([string][3] | [Element][2] | [NodeList][9] | [Array][4]<[Element][2]>)?** What to find
|
|
66
83
|
|
|
67
|
-
|
|
84
|
+
### Examples
|
|
68
85
|
|
|
69
|
-
|
|
86
|
+
```javascript
|
|
87
|
+
dom.find('.item') // All elements matching .item in document
|
|
70
88
|
|
|
71
|
-
|
|
89
|
+
const container = document.getElementById('box')
|
|
90
|
+
dom.find(container, '.item') // All .item inside #box
|
|
72
91
|
|
|
73
|
-
|
|
92
|
+
const el = document.querySelector('.item')
|
|
93
|
+
dom.find(container, el) // [el] if inside container, otherwise []
|
|
74
94
|
|
|
75
|
-
|
|
76
|
-
|
|
95
|
+
const list = document.querySelectorAll('.item')
|
|
96
|
+
dom.find(container, list) // Only those inside container
|
|
97
|
+
```
|
|
77
98
|
|
|
78
|
-
Returns **
|
|
99
|
+
Returns **[Array][4]<[Element][2]>** An array of matched elements
|
|
79
100
|
|
|
80
101
|
## findOne
|
|
81
102
|
|
|
82
|
-
[src/dom.js:
|
|
103
|
+
[src/dom.js:139-141][10]
|
|
104
|
+
|
|
105
|
+
Finds the first element matching a selector or collection.
|
|
106
|
+
|
|
107
|
+
Behaves like `dom.find` but returns only the first matched element.
|
|
108
|
+
Returns `null` if no element matches.
|
|
83
109
|
|
|
84
110
|
### Parameters
|
|
85
111
|
|
|
86
|
-
* `refEl` **([Element][
|
|
87
|
-
* `selector` **([string][
|
|
112
|
+
* `refEl` **([Element][2] | [Document][7] | [DocumentFragment][8] | [string][3])** Reference element or selector (if used alone)
|
|
113
|
+
* `selector` **([string][3] | [Element][2] | [NodeList][9] | [Array][4]<[Element][2]>)?** What to find
|
|
88
114
|
|
|
89
|
-
Returns **[Element][
|
|
115
|
+
Returns **([Element][2] | null)** The first matched Element, or null if none found
|
|
90
116
|
|
|
91
|
-
##
|
|
117
|
+
## findByData
|
|
118
|
+
|
|
119
|
+
[src/dom.js:160-167][11]
|
|
120
|
+
|
|
121
|
+
Finds elements by a data-\* attribute.
|
|
92
122
|
|
|
93
|
-
|
|
123
|
+
If `value` is provided, only elements with an exact matching value are returned.
|
|
124
|
+
If `value` is omitted, all elements having the data attribute are returned.
|
|
94
125
|
|
|
95
126
|
### Parameters
|
|
96
127
|
|
|
97
|
-
* `
|
|
98
|
-
* `
|
|
128
|
+
* `el` **([Element][2] | [Document][7] | [string][3])** Reference element or selector (if used alone)
|
|
129
|
+
* `data` **[string][3]** The data-\* key without the "data-" prefix
|
|
130
|
+
* `value` **[string][3]?** Optional value to match exactly
|
|
99
131
|
|
|
100
|
-
|
|
132
|
+
### Examples
|
|
101
133
|
|
|
102
|
-
|
|
134
|
+
```javascript
|
|
135
|
+
// <div data-user-id="42"></div>
|
|
103
136
|
|
|
104
|
-
|
|
137
|
+
dom.findByData(document, 'user-id') // all elements with [data-user-id]
|
|
138
|
+
dom.findByData(document, 'user-id', '42') // elements with [data-user-id="42"]
|
|
139
|
+
```
|
|
105
140
|
|
|
106
|
-
|
|
141
|
+
Returns **[Array][4]<[Element][2]>** Matching elements
|
|
107
142
|
|
|
108
|
-
|
|
109
|
-
* `data` **[string][7]** 
|
|
110
|
-
* `value` **[string][7]?** 
|
|
143
|
+
## findOneByData
|
|
111
144
|
|
|
112
|
-
|
|
145
|
+
[src/dom.js:188-190][12]
|
|
113
146
|
|
|
114
|
-
|
|
147
|
+
Finds the first element matching a data-\* attribute.
|
|
115
148
|
|
|
116
|
-
|
|
149
|
+
If `value` is provided, returns the first element whose data attribute
|
|
150
|
+
exactly matches the given value. If omitted, returns the first element
|
|
151
|
+
that has the data attribute.
|
|
117
152
|
|
|
118
153
|
### Parameters
|
|
119
154
|
|
|
120
|
-
* `el` **([Element][
|
|
121
|
-
* `data` **[string][
|
|
122
|
-
* `value` **[string][
|
|
155
|
+
* `el` **([Element][2] | [Document][7] | [string][3])** Reference element or selector (if used alone)
|
|
156
|
+
* `data` **[string][3]** The data-\* key without the "data-" prefix
|
|
157
|
+
* `value` **[string][3]?** Optional value to match exactly
|
|
158
|
+
|
|
159
|
+
### Examples
|
|
123
160
|
|
|
124
|
-
|
|
161
|
+
```javascript
|
|
162
|
+
// <div data-user-id="42"></div>
|
|
163
|
+
|
|
164
|
+
dom.findOneByData(document, 'user-id') // first element with [data-user-id]
|
|
165
|
+
dom.findOneByData(document, 'user-id', '42') // element with [data-user-id="42"]
|
|
166
|
+
dom.findOneByData(document, 'user-id', '99') // null
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
Returns **([Element][2] | null)** The first matching element, or null if none found
|
|
125
170
|
|
|
126
171
|
## addClass
|
|
127
172
|
|
|
128
|
-
[src/dom.js:
|
|
173
|
+
[src/dom.js:209-226][13]
|
|
174
|
+
|
|
175
|
+
Adds one or more CSS classes to one or multiple elements.
|
|
176
|
+
|
|
177
|
+
Multiple classes can be provided as a space-separated string.
|
|
178
|
+
Accepts a single Element, a NodeList, or an array of Elements.
|
|
129
179
|
|
|
130
180
|
### Parameters
|
|
131
181
|
|
|
132
|
-
* `el` **([Element][
|
|
133
|
-
* `className` **[string][
|
|
182
|
+
* `el` **([Element][2] | [NodeList][9] | [Array][4]<[Element][2]>)** Element(s) to update
|
|
183
|
+
* `className` **[string][3]** One or more class names separated by spaces
|
|
134
184
|
|
|
135
|
-
|
|
185
|
+
### Examples
|
|
186
|
+
|
|
187
|
+
```javascript
|
|
188
|
+
const el = document.querySelector('#box')
|
|
189
|
+
dom.addClass(el, 'active')
|
|
190
|
+
|
|
191
|
+
const items = document.querySelectorAll('.item')
|
|
192
|
+
dom.addClass(items, 'selected active')
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
Returns **([Element][2] | [NodeList][9] | [Array][4]<[Element][2]>)** The original input
|
|
136
196
|
|
|
137
197
|
## removeClass
|
|
138
198
|
|
|
139
|
-
[src/dom.js:
|
|
199
|
+
[src/dom.js:245-262][14]
|
|
200
|
+
|
|
201
|
+
Removes one or more CSS classes from one or multiple elements.
|
|
202
|
+
|
|
203
|
+
Multiple classes can be provided as a space-separated string.
|
|
204
|
+
Accepts a single Element, a NodeList, or an array of Elements.
|
|
140
205
|
|
|
141
206
|
### Parameters
|
|
142
207
|
|
|
143
|
-
* `el` **([Element][
|
|
144
|
-
* `className` **[string][
|
|
208
|
+
* `el` **([Element][2] | [NodeList][9] | [Array][4]<[Element][2]>)** Element(s) to update
|
|
209
|
+
* `className` **[string][3]** One or more class names separated by spaces
|
|
210
|
+
|
|
211
|
+
### Examples
|
|
212
|
+
|
|
213
|
+
```javascript
|
|
214
|
+
const el = document.querySelector('#box')
|
|
215
|
+
dom.removeClass(el, 'active')
|
|
216
|
+
|
|
217
|
+
const items = document.querySelectorAll('.item')
|
|
218
|
+
dom.removeClass(items, 'selected highlighted')
|
|
219
|
+
```
|
|
145
220
|
|
|
146
|
-
Returns **([Element][
|
|
221
|
+
Returns **([Element][2] | [NodeList][9] | [Array][4]<[Element][2]>)** The original input
|
|
147
222
|
|
|
148
223
|
## toggleClass
|
|
149
224
|
|
|
150
|
-
[src/dom.js:
|
|
225
|
+
[src/dom.js:284-294][15]
|
|
226
|
+
|
|
227
|
+
Toggles one or more CSS classes on an element.
|
|
228
|
+
|
|
229
|
+
Multiple classes can be provided as a space-separated string.
|
|
230
|
+
If `force` is provided, it explicitly adds (`true`) or removes (`false`)
|
|
231
|
+
the class instead of toggling it.
|
|
151
232
|
|
|
152
233
|
### Parameters
|
|
153
234
|
|
|
154
|
-
* `el` **[Element][
|
|
155
|
-
* `classNames` **[string][
|
|
156
|
-
* `force` **[boolean][
|
|
235
|
+
* `el` **[Element][2]** Element to update
|
|
236
|
+
* `classNames` **[string][3]** One or more class names separated by spaces
|
|
237
|
+
* `force` **[boolean][16]?** Optional force flag passed to classList.toggle
|
|
238
|
+
|
|
239
|
+
### Examples
|
|
240
|
+
|
|
241
|
+
```javascript
|
|
242
|
+
const el = document.querySelector('#box')
|
|
243
|
+
|
|
244
|
+
dom.toggleClass(el, 'active') // toggles "active"
|
|
245
|
+
dom.toggleClass(el, 'a b') // toggles both classes
|
|
246
|
+
dom.toggleClass(el, 'active', true) // ensures "active" is present
|
|
247
|
+
dom.toggleClass(el, 'active', false) // ensures "active" is removed
|
|
248
|
+
```
|
|
157
249
|
|
|
158
|
-
Returns **[Element][
|
|
250
|
+
Returns **[Element][2]** The element
|
|
159
251
|
|
|
160
252
|
## hasClass
|
|
161
253
|
|
|
162
|
-
[src/dom.js:
|
|
254
|
+
[src/dom.js:314-334][17]
|
|
255
|
+
|
|
256
|
+
Checks whether an element has all the given CSS classes.
|
|
257
|
+
|
|
258
|
+
Multiple classes can be provided as a space-separated string.
|
|
259
|
+
Returns `true` only if the element contains every class.
|
|
163
260
|
|
|
164
261
|
### Parameters
|
|
165
262
|
|
|
166
|
-
* `el` **[Element][
|
|
167
|
-
* `classNames` **[string][
|
|
263
|
+
* `el` **[Element][2]** Element to test
|
|
264
|
+
* `classNames` **[string][3]** One or more class names separated by spaces
|
|
265
|
+
|
|
266
|
+
### Examples
|
|
168
267
|
|
|
169
|
-
|
|
268
|
+
```javascript
|
|
269
|
+
// <div class="box active large"></div>
|
|
270
|
+
|
|
271
|
+
dom.hasClass(el, 'active') // true
|
|
272
|
+
dom.hasClass(el, 'active large') // true
|
|
273
|
+
dom.hasClass(el, 'active missing') // false
|
|
274
|
+
dom.hasClass(el, '') // false
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
Returns **[boolean][16]** `true` if the element has all the classes
|
|
170
278
|
|
|
171
279
|
## append
|
|
172
280
|
|
|
173
|
-
[src/dom.js:
|
|
281
|
+
[src/dom.js:350-360][18]
|
|
282
|
+
|
|
283
|
+
Appends one or more children to a node.
|
|
284
|
+
|
|
285
|
+
Children can be DOM nodes or HTML strings.
|
|
174
286
|
|
|
175
287
|
### Parameters
|
|
176
288
|
|
|
177
|
-
* `node` **[Node][
|
|
178
|
-
* `children` **...([Node][
|
|
289
|
+
* `node` **[Node][19]** The parent node
|
|
290
|
+
* `children` **...([Node][19] | [string][3])** Nodes or HTML strings to append
|
|
291
|
+
|
|
292
|
+
### Examples
|
|
293
|
+
|
|
294
|
+
```javascript
|
|
295
|
+
const box = document.createElement('div')
|
|
296
|
+
dom.append(box, document.createElement('span'))
|
|
297
|
+
dom.append(box, '<b>Hello</b>', '<i>world</i>')
|
|
298
|
+
```
|
|
179
299
|
|
|
180
|
-
Returns **[Node][
|
|
300
|
+
Returns **[Node][19]** The parent node
|
|
181
301
|
|
|
182
302
|
## prepend
|
|
183
303
|
|
|
184
|
-
[src/dom.js:
|
|
304
|
+
[src/dom.js:379-389][20]
|
|
305
|
+
|
|
306
|
+
Prepends one or more children to a node.
|
|
307
|
+
|
|
308
|
+
Children can be DOM nodes or HTML strings.
|
|
309
|
+
HTML strings are converted to nodes using `dom.create`.
|
|
310
|
+
When multiple children are provided, their original order is preserved.
|
|
185
311
|
|
|
186
312
|
### Parameters
|
|
187
313
|
|
|
188
|
-
* `node` **[Node][
|
|
189
|
-
* `children` **...([Node][
|
|
314
|
+
* `node` **[Node][19]** The parent node
|
|
315
|
+
* `children` **...([Node][19] | [string][3])** Nodes or HTML strings to prepend
|
|
190
316
|
|
|
191
|
-
|
|
317
|
+
### Examples
|
|
318
|
+
|
|
319
|
+
```javascript
|
|
320
|
+
const box = document.createElement('div')
|
|
321
|
+
|
|
322
|
+
dom.prepend(box, document.createElement('span'))
|
|
323
|
+
dom.prepend(box, '<b>Hello</b>', '<i>world</i>')
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
Returns **[Node][19]** The parent node
|
|
192
327
|
|
|
193
328
|
## remove
|
|
194
329
|
|
|
195
|
-
[src/dom.js:
|
|
330
|
+
[src/dom.js:395-405][21]
|
|
196
331
|
|
|
197
332
|
### Parameters
|
|
198
333
|
|
|
199
|
-
* `els` **([Element][
|
|
334
|
+
* `els` **([Element][2] | [NodeList][9] | [Array][4]<[Element][2]> | [string][3])** 
|
|
200
335
|
|
|
201
336
|
Returns **void** 
|
|
202
337
|
|
|
203
338
|
## closest
|
|
204
339
|
|
|
205
|
-
[src/dom.js:
|
|
340
|
+
[src/dom.js:427-449][22]
|
|
341
|
+
|
|
342
|
+
Returns the closest ancestor of an element matching a selector or a specific element.
|
|
343
|
+
|
|
344
|
+
If a DOM element is provided as `selector`, the function walks up the DOM
|
|
345
|
+
tree and returns it if found among the ancestors (or the element itself).
|
|
346
|
+
If a CSS selector string is provided, it delegates to `Element.closest()`.
|
|
347
|
+
If `selector` is omitted, the element itself is returned.
|
|
206
348
|
|
|
207
349
|
### Parameters
|
|
208
350
|
|
|
209
|
-
* `el` **[Element][
|
|
210
|
-
* `selector` **([string][
|
|
351
|
+
* `el` **[Element][2]** The starting element
|
|
352
|
+
* `selector` **([string][3] | [Element][2])?** CSS selector or specific ancestor element
|
|
353
|
+
|
|
354
|
+
### Examples
|
|
211
355
|
|
|
212
|
-
|
|
356
|
+
```javascript
|
|
357
|
+
const item = document.querySelector('.item')
|
|
358
|
+
const container = document.querySelector('.container')
|
|
359
|
+
|
|
360
|
+
dom.closest(item, '.container') // container
|
|
361
|
+
dom.closest(item, container) // container
|
|
362
|
+
dom.closest(item) // item
|
|
363
|
+
```
|
|
364
|
+
|
|
365
|
+
Returns **([Element][2] | null)** The matching ancestor, or null if none found
|
|
213
366
|
|
|
214
367
|
## next
|
|
215
368
|
|
|
216
|
-
[src/dom.js:
|
|
369
|
+
[src/dom.js:469-479][23]
|
|
370
|
+
|
|
371
|
+
Returns the next sibling element of a node.
|
|
372
|
+
|
|
373
|
+
If a selector is provided, the next sibling is returned only if it matches
|
|
374
|
+
the selector. This function does not search beyond the immediate sibling.
|
|
217
375
|
|
|
218
376
|
### Parameters
|
|
219
377
|
|
|
220
|
-
* `el` **[Element][
|
|
221
|
-
* `selector` **[string][
|
|
378
|
+
* `el` **[Element][2]** Reference element
|
|
379
|
+
* `selector` **([string][3] | null)?** CSS selector to filter the sibling (optional, default `null`)
|
|
222
380
|
|
|
223
|
-
|
|
381
|
+
### Examples
|
|
382
|
+
|
|
383
|
+
```javascript
|
|
384
|
+
// <div class="a"></div><div class="b"></div><div class="c"></div>
|
|
385
|
+
const a = document.querySelector('.a')
|
|
386
|
+
|
|
387
|
+
dom.next(a) // <div class="b">
|
|
388
|
+
dom.next(a, '.b') // <div class="b">
|
|
389
|
+
dom.next(a, '.c') // null
|
|
390
|
+
```
|
|
391
|
+
|
|
392
|
+
Returns **([Element][2] | null)** The next sibling element, or null if not found/matching
|
|
224
393
|
|
|
225
394
|
## prev
|
|
226
395
|
|
|
227
|
-
[src/dom.js:
|
|
396
|
+
[src/dom.js:499-509][24]
|
|
397
|
+
|
|
398
|
+
Returns the previous sibling element of a node.
|
|
399
|
+
|
|
400
|
+
If a selector is provided, the previous sibling is returned only if it matches
|
|
401
|
+
the selector. This function does not search beyond the immediate sibling.
|
|
228
402
|
|
|
229
403
|
### Parameters
|
|
230
404
|
|
|
231
|
-
* `el` **[Element][
|
|
232
|
-
* `selector` **([string][
|
|
405
|
+
* `el` **[Element][2]** Reference element
|
|
406
|
+
* `selector` **([string][3] | null)?** CSS selector to filter the sibling (optional, default `null`)
|
|
407
|
+
|
|
408
|
+
### Examples
|
|
409
|
+
|
|
410
|
+
```javascript
|
|
411
|
+
// <div class="a"></div><div class="b"></div><div class="c"></div>
|
|
412
|
+
const c = document.querySelector('.c')
|
|
413
|
+
|
|
414
|
+
dom.prev(c) // <div class="b">
|
|
415
|
+
dom.prev(c, '.b') // <div class="b">
|
|
416
|
+
dom.prev(c, '.a') // null
|
|
417
|
+
```
|
|
233
418
|
|
|
234
|
-
Returns **([Element][
|
|
419
|
+
Returns **([Element][2] | null)** The previous sibling element, or null if not found/matching
|
|
235
420
|
|
|
236
421
|
## nextAll
|
|
237
422
|
|
|
238
|
-
[src/dom.js:
|
|
423
|
+
[src/dom.js:528-542][25]
|
|
424
|
+
|
|
425
|
+
Returns all following sibling elements of a node.
|
|
426
|
+
|
|
427
|
+
If a selector is provided, only siblings matching the selector are included.
|
|
428
|
+
Traversal continues through all next siblings in document order.
|
|
239
429
|
|
|
240
430
|
### Parameters
|
|
241
431
|
|
|
242
|
-
* `el` **[Element][
|
|
243
|
-
* `selector` **[string][
|
|
432
|
+
* `el` **[Element][2]** Reference element
|
|
433
|
+
* `selector` **[string][3]?** CSS selector to filter siblings
|
|
434
|
+
|
|
435
|
+
### Examples
|
|
436
|
+
|
|
437
|
+
```javascript
|
|
438
|
+
// <div class="a"></div><div class="b"></div><div class="c"></div>
|
|
439
|
+
const a = document.querySelector('.a')
|
|
440
|
+
|
|
441
|
+
dom.nextAll(a) // [<div class="b">, <div class="c">]
|
|
442
|
+
dom.nextAll(a, '.c') // [<div class="c">]
|
|
443
|
+
```
|
|
244
444
|
|
|
245
|
-
Returns **[Array][
|
|
445
|
+
Returns **[Array][4]<[Element][2]>** Array of matching following siblings
|
|
246
446
|
|
|
247
447
|
## prevAll
|
|
248
448
|
|
|
249
|
-
[src/dom.js:
|
|
449
|
+
[src/dom.js:561-575][26]
|
|
450
|
+
|
|
451
|
+
Returns all preceding sibling elements of a node.
|
|
452
|
+
|
|
453
|
+
If a selector is provided, only siblings matching the selector are included.
|
|
454
|
+
Traversal continues through all previous siblings in reverse document order.
|
|
250
455
|
|
|
251
456
|
### Parameters
|
|
252
457
|
|
|
253
|
-
* `el` **[Element][
|
|
254
|
-
* `selector` **[string][
|
|
458
|
+
* `el` **[Element][2]** Reference element
|
|
459
|
+
* `selector` **[string][3]?** CSS selector to filter siblings
|
|
460
|
+
|
|
461
|
+
### Examples
|
|
462
|
+
|
|
463
|
+
```javascript
|
|
464
|
+
// <div class="a"></div><div class="b"></div><div class="c"></div>
|
|
465
|
+
const c = document.querySelector('.c')
|
|
466
|
+
|
|
467
|
+
dom.prevAll(c) // [<div class="b">, <div class="a">]
|
|
468
|
+
dom.prevAll(c, '.a') // [<div class="a">]
|
|
469
|
+
```
|
|
470
|
+
|
|
471
|
+
Returns **[Array][4]<[Element][2]>** Array of matching preceding siblings
|
|
472
|
+
|
|
473
|
+
## index
|
|
474
|
+
|
|
475
|
+
[src/dom.js:594-596][27]
|
|
476
|
+
|
|
477
|
+
Returns the index of a node among its preceding siblings.
|
|
478
|
+
|
|
479
|
+
If a selector is provided, only matching siblings are considered.
|
|
480
|
+
|
|
481
|
+
### Parameters
|
|
482
|
+
|
|
483
|
+
* `el` **[Element][2]** Reference element
|
|
484
|
+
* `selector` **[string][3]?** CSS selector to filter siblings
|
|
485
|
+
|
|
486
|
+
### Examples
|
|
255
487
|
|
|
256
|
-
|
|
488
|
+
```javascript
|
|
489
|
+
// <div class="a"></div><div class="b"></div><div class="c"></div>
|
|
490
|
+
const c = document.querySelector('.c')
|
|
491
|
+
|
|
492
|
+
dom.index(a) // 0
|
|
493
|
+
dom.index(c) // 2
|
|
494
|
+
dom.prevAll(c, '.a') // 1
|
|
495
|
+
```
|
|
496
|
+
|
|
497
|
+
Returns **[number][28]** The index of `el`
|
|
257
498
|
|
|
258
499
|
## nextUntil
|
|
259
500
|
|
|
260
|
-
[src/dom.js:
|
|
501
|
+
[src/dom.js:616-639][29]
|
|
502
|
+
|
|
503
|
+
Returns all following sibling elements until a matching element is reached.
|
|
504
|
+
|
|
505
|
+
Traversal stops before the first sibling that matches the given selector
|
|
506
|
+
or equals the provided element. That matching element is not included.
|
|
261
507
|
|
|
262
508
|
### Parameters
|
|
263
509
|
|
|
264
|
-
* `el` **[Element][
|
|
265
|
-
* `selector` **([Element][
|
|
510
|
+
* `el` **[Element][2]** Reference element
|
|
511
|
+
* `selector` **([Element][2] | [string][3])** CSS selector or element to stop at
|
|
266
512
|
|
|
267
|
-
|
|
513
|
+
### Examples
|
|
514
|
+
|
|
515
|
+
```javascript
|
|
516
|
+
// <div class="a"></div><div class="b"></div><div class="c"></div><div class="d"></div>
|
|
517
|
+
const a = document.querySelector('.a')
|
|
518
|
+
const d = document.querySelector('.d')
|
|
519
|
+
|
|
520
|
+
dom.nextUntil(a, '.d') // [<div class="b">, <div class="c">]
|
|
521
|
+
dom.nextUntil(a, d) // [<div class="b">, <div class="c">]
|
|
522
|
+
```
|
|
523
|
+
|
|
524
|
+
Returns **[Array][4]<[Element][2]>** Array of siblings until the stop condition
|
|
268
525
|
|
|
269
526
|
## prevUntil
|
|
270
527
|
|
|
271
|
-
[src/dom.js:
|
|
528
|
+
[src/dom.js:660-683][30]
|
|
529
|
+
|
|
530
|
+
Returns all preceding sibling elements until a matching element is reached.
|
|
531
|
+
|
|
532
|
+
Traversal stops before the first sibling that matches the given selector
|
|
533
|
+
or equals the provided element. That matching element is not included.
|
|
272
534
|
|
|
273
535
|
### Parameters
|
|
274
536
|
|
|
275
|
-
* `el` **[Element][
|
|
276
|
-
* `selector` **([Element][
|
|
537
|
+
* `el` **[Element][2]** Reference element
|
|
538
|
+
* `selector` **([Element][2] | [string][3])** CSS selector or element to stop at
|
|
539
|
+
|
|
540
|
+
### Examples
|
|
541
|
+
|
|
542
|
+
```javascript
|
|
543
|
+
// <div class="a"></div><div class="b"></div><div class="c"></div><div class="d"></div>
|
|
544
|
+
|
|
545
|
+
const d = document.querySelector('.d')
|
|
546
|
+
const a = document.querySelector('.a')
|
|
547
|
+
|
|
548
|
+
dom.prevUntil(d, '.a') // [<div class="c">, <div class="b">]
|
|
549
|
+
dom.prevUntil(d, a) // [<div class="c">, <div class="b">]
|
|
550
|
+
```
|
|
277
551
|
|
|
278
|
-
Returns **[Array][
|
|
552
|
+
Returns **[Array][4]<[Element][2]>** Array of siblings until the stop condition
|
|
279
553
|
|
|
280
554
|
## wrap
|
|
281
555
|
|
|
282
|
-
[src/dom.js:
|
|
556
|
+
[src/dom.js:703-711][31]
|
|
557
|
+
|
|
558
|
+
Wraps an element inside another element.
|
|
559
|
+
|
|
560
|
+
If the wrapping element is not already in the DOM, it is inserted
|
|
561
|
+
just before the target element. The target element is then appended
|
|
562
|
+
inside the wrapper.
|
|
283
563
|
|
|
284
564
|
### Parameters
|
|
285
565
|
|
|
286
|
-
* `el` **[Element][
|
|
287
|
-
* `wrappingElement` **[Element][
|
|
566
|
+
* `el` **[Element][2]** The element to wrap
|
|
567
|
+
* `wrappingElement` **[Element][2]** The wrapper element
|
|
568
|
+
|
|
569
|
+
### Examples
|
|
570
|
+
|
|
571
|
+
```javascript
|
|
572
|
+
const el = document.querySelector('.item')
|
|
573
|
+
const wrapper = document.createElement('div')
|
|
288
574
|
|
|
289
|
-
|
|
575
|
+
dom.wrap(el, wrapper)
|
|
576
|
+
// <div><div class="item"></div></div>
|
|
577
|
+
```
|
|
578
|
+
|
|
579
|
+
Returns **[Element][2]** The original wrapped element
|
|
290
580
|
|
|
291
581
|
## attr
|
|
292
582
|
|
|
293
|
-
[src/dom.js:
|
|
583
|
+
[src/dom.js:730-740][32]
|
|
584
|
+
|
|
585
|
+
Gets, sets, or removes an attribute on an element.
|
|
586
|
+
|
|
587
|
+
* If `value` is omitted, returns the attribute value (or null if not present).
|
|
588
|
+
* If `value` is `null`, the attribute is removed.
|
|
589
|
+
* Otherwise, the attribute is set to the provided value.
|
|
294
590
|
|
|
295
591
|
### Parameters
|
|
296
592
|
|
|
297
|
-
* `el` **[Element][
|
|
298
|
-
* `name` **[string][
|
|
299
|
-
* `value` **
|
|
593
|
+
* `el` **[Element][2]** Target element
|
|
594
|
+
* `name` **[string][3]** Attribute name
|
|
595
|
+
* `value` **([string][3] | null)?** Value to set, or null to remove
|
|
596
|
+
|
|
597
|
+
### Examples
|
|
300
598
|
|
|
301
|
-
|
|
599
|
+
```javascript
|
|
600
|
+
dom.attr(el, 'id') // "my-id"
|
|
601
|
+
dom.attr(el, 'title', 'Hello') // sets title="Hello"
|
|
602
|
+
dom.attr(el, 'disabled', null) // removes the attribute
|
|
603
|
+
```
|
|
604
|
+
|
|
605
|
+
Returns **([Element][2] | [string][3] | null)** The attribute value when reading, otherwise the element
|
|
302
606
|
|
|
303
607
|
## prop
|
|
304
608
|
|
|
305
|
-
[src/dom.js:
|
|
609
|
+
[src/dom.js:762-769][33]
|
|
610
|
+
|
|
611
|
+
Gets or sets a property directly on a DOM element.
|
|
612
|
+
|
|
613
|
+
Unlike `dom.attr`, this interacts with the live DOM property,
|
|
614
|
+
not the HTML attribute.
|
|
615
|
+
|
|
616
|
+
* If `value` is omitted, returns the property value.
|
|
617
|
+
* Otherwise, sets the property.
|
|
306
618
|
|
|
307
619
|
### Parameters
|
|
308
620
|
|
|
309
|
-
* `el` **[Element][
|
|
310
|
-
* `name` **[string][
|
|
311
|
-
* `value` **any
|
|
621
|
+
* `el` **[Element][2]** Target element
|
|
622
|
+
* `name` **[string][3]** Property name
|
|
623
|
+
* `value` **any?** Value to set
|
|
624
|
+
|
|
625
|
+
### Examples
|
|
312
626
|
|
|
313
|
-
|
|
627
|
+
```javascript
|
|
628
|
+
dom.prop(input, 'checked') // true/false
|
|
629
|
+
dom.prop(input, 'checked', true) // checks the checkbox
|
|
630
|
+
|
|
631
|
+
dom.prop(img, 'src') // full resolved URL
|
|
632
|
+
```
|
|
633
|
+
|
|
634
|
+
Returns **(any | [Element][2])** The property value when reading, otherwise the element
|
|
314
635
|
|
|
315
636
|
## html
|
|
316
637
|
|
|
317
|
-
[src/dom.js:
|
|
638
|
+
[src/dom.js:785-790][34]
|
|
639
|
+
|
|
640
|
+
Gets or sets the HTML content of an element.
|
|
641
|
+
|
|
642
|
+
* If `html` is omitted, returns the element's current `innerHTML`.
|
|
643
|
+
* Otherwise, replaces the element's content with the provided HTML string.
|
|
318
644
|
|
|
319
645
|
### Parameters
|
|
320
646
|
|
|
321
|
-
* `el` **[Element][
|
|
322
|
-
* `html` **[string][
|
|
647
|
+
* `el` **[Element][2]** Target element
|
|
648
|
+
* `html` **[string][3]?** HTML string to set
|
|
323
649
|
|
|
324
|
-
|
|
650
|
+
### Examples
|
|
651
|
+
|
|
652
|
+
```javascript
|
|
653
|
+
dom.html(el) // "<span>Hello</span>"
|
|
654
|
+
dom.html(el, '<b>Hi</b>') // sets inner HTML
|
|
655
|
+
```
|
|
656
|
+
|
|
657
|
+
Returns **([Element][2] | [string][3])** The HTML string when reading, otherwise the element
|
|
325
658
|
|
|
326
659
|
## text
|
|
327
660
|
|
|
328
|
-
[src/dom.js:
|
|
661
|
+
[src/dom.js:806-811][35]
|
|
662
|
+
|
|
663
|
+
Gets or sets the text content of an element.
|
|
664
|
+
|
|
665
|
+
* If `text` is omitted, returns the element's visible text (`innerText`).
|
|
666
|
+
* Otherwise, replaces the element's text content.
|
|
329
667
|
|
|
330
668
|
### Parameters
|
|
331
669
|
|
|
332
|
-
* `el` **[Element][
|
|
333
|
-
* `text` **[string][
|
|
670
|
+
* `el` **[Element][2]** Target element
|
|
671
|
+
* `text` **[string][3]?** Text to set
|
|
334
672
|
|
|
335
|
-
|
|
673
|
+
### Examples
|
|
674
|
+
|
|
675
|
+
```javascript
|
|
676
|
+
dom.text(el) // "Hello world"
|
|
677
|
+
dom.text(el, 'New text') // sets visible text content
|
|
678
|
+
```
|
|
679
|
+
|
|
680
|
+
Returns **([Element][2] | [string][3])** The text when reading, otherwise the element
|
|
336
681
|
|
|
337
682
|
## hide
|
|
338
683
|
|
|
339
|
-
[src/dom.js:
|
|
684
|
+
[src/dom.js:825-840][36]
|
|
685
|
+
|
|
686
|
+
Hides an element by setting `display: none`, while preserving its original display value.
|
|
687
|
+
|
|
688
|
+
The original computed `display` value is stored internally so it can be
|
|
689
|
+
restored later (typically by the corresponding `show()` method).
|
|
340
690
|
|
|
341
691
|
### Parameters
|
|
342
692
|
|
|
343
|
-
* `el` **[Element][
|
|
693
|
+
* `el` **[Element][2]** Element to hide
|
|
344
694
|
|
|
345
|
-
|
|
695
|
+
### Examples
|
|
696
|
+
|
|
697
|
+
```javascript
|
|
698
|
+
dom.hide(el) // element becomes hidden
|
|
699
|
+
```
|
|
700
|
+
|
|
701
|
+
Returns **[Element][2]** The element
|
|
346
702
|
|
|
347
703
|
## show
|
|
348
704
|
|
|
349
|
-
[src/dom.js:
|
|
705
|
+
[src/dom.js:856-867][37]
|
|
706
|
+
|
|
707
|
+
Shows an element by restoring its original `display` value.
|
|
708
|
+
|
|
709
|
+
If the element was previously hidden using `hide`, its original
|
|
710
|
+
computed display value is restored. Otherwise, the inline `display`
|
|
711
|
+
style is simply removed.
|
|
350
712
|
|
|
351
713
|
### Parameters
|
|
352
714
|
|
|
353
|
-
* `el` **[Element][
|
|
715
|
+
* `el` **[Element][2]** Element to show
|
|
354
716
|
|
|
355
|
-
|
|
717
|
+
### Examples
|
|
718
|
+
|
|
719
|
+
```javascript
|
|
720
|
+
dom.hide(el)
|
|
721
|
+
dom.show(el) // element becomes visible again with its original display
|
|
722
|
+
```
|
|
723
|
+
|
|
724
|
+
Returns **[Element][2]** The element
|
|
356
725
|
|
|
357
726
|
## toggle
|
|
358
727
|
|
|
359
|
-
[src/dom.js:
|
|
728
|
+
[src/dom.js:881-883][38]
|
|
729
|
+
|
|
730
|
+
Toggles the visibility of an element using `dom.hide` and `dom.show`.
|
|
731
|
+
|
|
732
|
+
The visibility state is determined from the computed display value,
|
|
733
|
+
not only the inline style.
|
|
360
734
|
|
|
361
735
|
### Parameters
|
|
362
736
|
|
|
363
|
-
* `el` **[Element][
|
|
737
|
+
* `el` **[Element][2]** Element to toggle
|
|
364
738
|
|
|
365
|
-
|
|
739
|
+
### Examples
|
|
740
|
+
|
|
741
|
+
```javascript
|
|
742
|
+
dom.toggle(el) // hides if visible, shows if hidden
|
|
743
|
+
```
|
|
744
|
+
|
|
745
|
+
Returns **[Element][2]** The element
|
|
366
746
|
|
|
367
747
|
## data
|
|
368
748
|
|
|
369
|
-
[src/dom.js:
|
|
749
|
+
[src/dom.js:913-937][39]
|
|
750
|
+
|
|
751
|
+
Gets, sets, or removes data-\* attributes on an element.
|
|
752
|
+
|
|
753
|
+
* If called with no arguments, returns the element's `dataset`.
|
|
754
|
+
* If `name` is an object, sets multiple data entries.
|
|
755
|
+
* If `value` is omitted, returns the value of the data key.
|
|
756
|
+
* If `value` is `null`, removes the data attribute.
|
|
757
|
+
* Otherwise, sets the data value.
|
|
758
|
+
|
|
759
|
+
Keys can be provided in camelCase (`userId`) or kebab-case with `data-` prefix (`data-user-id`).
|
|
370
760
|
|
|
371
761
|
### Parameters
|
|
372
762
|
|
|
373
|
-
* `el` **[Element][
|
|
374
|
-
* `name` **([Object][
|
|
375
|
-
* `value` **[string][
|
|
763
|
+
* `el` **[Element][2]** Target element
|
|
764
|
+
* `name` **([Object][40]<[string][3], [string][3]> | [string][3])?** Data key or object of key/value pairs
|
|
765
|
+
* `value` **([string][3] | null)?** Value to set, or null to remove
|
|
766
|
+
|
|
767
|
+
### Examples
|
|
768
|
+
|
|
769
|
+
```javascript
|
|
770
|
+
dom.data(el) // DOMStringMap of all data attributes
|
|
376
771
|
|
|
377
|
-
|
|
772
|
+
dom.data(el, 'userId') // value of data-user-id
|
|
773
|
+
dom.data(el, 'userId', '42') // sets data-user-id="42"
|
|
774
|
+
|
|
775
|
+
dom.data(el, 'data-role', 'admin') // also works
|
|
776
|
+
|
|
777
|
+
dom.data(el, { userId: '42', role: 'admin' }) // sets multiple values
|
|
778
|
+
|
|
779
|
+
dom.data(el, 'userId', null) // removes data-user-id
|
|
780
|
+
```
|
|
781
|
+
|
|
782
|
+
Returns **([Element][2] | DOMStringMap | [string][3] | [undefined][41])** Dataset, value, or element
|
|
378
783
|
|
|
379
784
|
## removeData
|
|
380
785
|
|
|
381
|
-
[src/dom.js:
|
|
786
|
+
[src/dom.js:953-955][42]
|
|
787
|
+
|
|
788
|
+
Removes a data-\* attribute from an element.
|
|
789
|
+
|
|
790
|
+
The key can be provided in camelCase, kebab-case, or with the `data-` prefix.
|
|
382
791
|
|
|
383
792
|
### Parameters
|
|
384
793
|
|
|
385
|
-
* `el` **[Element][
|
|
386
|
-
* `name` **[string][
|
|
794
|
+
* `el` **[Element][2]** Target element
|
|
795
|
+
* `name` **[string][3]** Data key to remove
|
|
387
796
|
|
|
388
|
-
|
|
797
|
+
### Examples
|
|
798
|
+
|
|
799
|
+
```javascript
|
|
800
|
+
dom.removeData(el, 'userId') // removes data-user-id
|
|
801
|
+
dom.removeData(el, 'user-id') // removes data-user-id
|
|
802
|
+
dom.removeData(el, 'data-role') // removes data-role
|
|
803
|
+
```
|
|
804
|
+
|
|
805
|
+
Returns **[Element][2]** The element
|
|
389
806
|
|
|
390
807
|
## css
|
|
391
808
|
|
|
392
|
-
[src/dom.js:
|
|
809
|
+
[src/dom.js:987-1015][43]
|
|
810
|
+
|
|
811
|
+
Gets or sets CSS styles on an element.
|
|
812
|
+
|
|
813
|
+
* If `style` is a string and `value` is omitted, returns the computed style value.
|
|
814
|
+
* If `style` is a string and `value` is provided, sets the style.
|
|
815
|
+
* If `style` is an object, sets multiple styles at once.
|
|
816
|
+
|
|
817
|
+
handles :
|
|
818
|
+
|
|
819
|
+
* camelCase and kebab-case properties
|
|
820
|
+
* CSS custom properties (`--var`)
|
|
821
|
+
* Adding `px` to numeric values where appropriate
|
|
393
822
|
|
|
394
823
|
### Parameters
|
|
395
824
|
|
|
396
|
-
* `el` **[HTMLElement][44]
|
|
397
|
-
* `style` **([Object][
|
|
398
|
-
* `value` **[string][
|
|
825
|
+
* `el` **[HTMLElement][44]** Target element
|
|
826
|
+
* `style` **([Object][40]<[string][3], ([string][3] | [number][28])> | [string][3])** CSS property or object of properties
|
|
827
|
+
* `value` **([string][3] | [number][28])?** Value to set
|
|
828
|
+
|
|
829
|
+
### Examples
|
|
830
|
+
|
|
831
|
+
```javascript
|
|
832
|
+
dom.css(el, 'color') // "rgb(255, 0, 0)"
|
|
833
|
+
dom.css(el, 'background-color', 'blue')
|
|
834
|
+
dom.css(el, 'width', 200) // sets "200px"
|
|
835
|
+
|
|
836
|
+
dom.css(el, {
|
|
837
|
+
width: 100,
|
|
838
|
+
height: 50,
|
|
839
|
+
backgroundColor: 'red'
|
|
840
|
+
})
|
|
841
|
+
|
|
842
|
+
dom.css(el, '--my-var', '10px') // CSS custom property
|
|
843
|
+
```
|
|
399
844
|
|
|
400
|
-
Returns **[Element][
|
|
845
|
+
Returns **([Element][2] | [string][3])** The style value when reading, otherwise the element
|
|
401
846
|
|
|
402
847
|
## closestFind
|
|
403
848
|
|
|
404
|
-
[src/dom.js:
|
|
849
|
+
[src/dom.js:1035-1043][45]
|
|
850
|
+
|
|
851
|
+
Finds elements matching a selector inside the closest ancestor
|
|
852
|
+
that matches another selector.
|
|
853
|
+
|
|
854
|
+
First finds the closest ancestor of `el` matching `selectorClosest`,
|
|
855
|
+
then searches inside it for elements matching `selectorFind`.
|
|
405
856
|
|
|
406
857
|
### Parameters
|
|
407
858
|
|
|
408
|
-
* `el` **[Element][
|
|
409
|
-
* `selectorClosest` **[string][
|
|
410
|
-
* `selectorFind` **[string][
|
|
859
|
+
* `el` **[Element][2]** Starting element
|
|
860
|
+
* `selectorClosest` **[string][3]** Selector used to find the closest ancestor
|
|
861
|
+
* `selectorFind` **[string][3]** Selector used to find elements inside that ancestor
|
|
411
862
|
|
|
412
|
-
|
|
863
|
+
### Examples
|
|
864
|
+
|
|
865
|
+
```javascript
|
|
866
|
+
// <div class="card"><button class="btn"></button><span class="label"></span></div>
|
|
867
|
+
|
|
868
|
+
dom.closestFind(button, '.card', '.label')
|
|
869
|
+
// => finds .label inside the closest .card ancestor
|
|
870
|
+
```
|
|
871
|
+
|
|
872
|
+
Returns **[Array][4]<[Element][2]>** Array of matched elements, or empty array if none found
|
|
413
873
|
|
|
414
874
|
## closestFindOne
|
|
415
875
|
|
|
416
|
-
[src/dom.js:
|
|
876
|
+
[src/dom.js:1063-1071][46]
|
|
877
|
+
|
|
878
|
+
Finds the first element matching a selector inside the closest ancestor
|
|
879
|
+
that matches another selector.
|
|
880
|
+
|
|
881
|
+
First finds the closest ancestor of `el` matching `selectorClosest`,
|
|
882
|
+
then searches inside it for the first element matching `selectorFindOne`.
|
|
417
883
|
|
|
418
884
|
### Parameters
|
|
419
885
|
|
|
420
|
-
* `el` **[Element][
|
|
421
|
-
* `selectorClosest` **[string][
|
|
422
|
-
* `selectorFindOne` **[string][
|
|
886
|
+
* `el` **[Element][2]** Starting element
|
|
887
|
+
* `selectorClosest` **[string][3]** Selector used to find the closest ancestor
|
|
888
|
+
* `selectorFindOne` **[string][3]** Selector used to find a single element inside that ancestor
|
|
423
889
|
|
|
424
|
-
|
|
890
|
+
### Examples
|
|
891
|
+
|
|
892
|
+
```javascript
|
|
893
|
+
// <div class="card"><button class="btn"></button><span class="label"></span></div>
|
|
894
|
+
|
|
895
|
+
dom.closestFindOne(button, '.card', '.label')
|
|
896
|
+
// => finds the first .label inside the closest .card ancestor
|
|
897
|
+
```
|
|
898
|
+
|
|
899
|
+
Returns **([Element][2] | null)** The matched element, or null if none found
|
|
425
900
|
|
|
426
901
|
## first
|
|
427
902
|
|
|
428
|
-
[src/dom.js:
|
|
903
|
+
[src/dom.js:1087-1090][47]
|
|
904
|
+
|
|
905
|
+
Returns the first element from a collection or the element itself.
|
|
906
|
+
|
|
907
|
+
Accepts a single Element, a NodeList, or an array of Elements.
|
|
908
|
+
Returns `null` if the collection is empty.
|
|
429
909
|
|
|
430
910
|
### Parameters
|
|
431
911
|
|
|
432
|
-
* `nodeList` **([NodeList][9] | [Element][
|
|
912
|
+
* `nodeList` **([NodeList][9] | [Element][2] | [Array][4]<[Element][2]>)** Collection or single element
|
|
913
|
+
|
|
914
|
+
### Examples
|
|
433
915
|
|
|
434
|
-
|
|
916
|
+
```javascript
|
|
917
|
+
dom.first(document.querySelectorAll('.item')) // first .item
|
|
918
|
+
dom.first([el1, el2]) // el1
|
|
919
|
+
dom.first(el) // el
|
|
920
|
+
```
|
|
921
|
+
|
|
922
|
+
Returns **([Element][2] | null)** The first element, or null if none found
|
|
435
923
|
|
|
436
924
|
## last
|
|
437
925
|
|
|
438
|
-
[src/dom.js:
|
|
926
|
+
[src/dom.js:1105-1109][48]
|
|
927
|
+
|
|
928
|
+
Returns the last element from a collection or the element itself.
|
|
929
|
+
|
|
930
|
+
Accepts a NodeList or an array of Elements.
|
|
931
|
+
Returns `null` if the collection is empty.
|
|
439
932
|
|
|
440
933
|
### Parameters
|
|
441
934
|
|
|
442
|
-
* `nodeList` **([NodeList][9] | [Array][
|
|
935
|
+
* `nodeList` **([NodeList][9] | [Element][2] | [Array][4]<[Element][2]>)** Collection or single element
|
|
443
936
|
|
|
444
|
-
|
|
937
|
+
### Examples
|
|
938
|
+
|
|
939
|
+
```javascript
|
|
940
|
+
dom.last(document.querySelectorAll('.item')) // last .item
|
|
941
|
+
dom.last([el1, el2]) // el2
|
|
942
|
+
```
|
|
943
|
+
|
|
944
|
+
Returns **([Element][2] | null)** The last element, or null if none found
|
|
445
945
|
|
|
446
946
|
## create
|
|
447
947
|
|
|
448
|
-
[src/dom.js:
|
|
948
|
+
[src/dom.js:1127-1146][49]
|
|
949
|
+
|
|
950
|
+
Creates DOM node(s) from a tag name or an HTML string.
|
|
951
|
+
|
|
952
|
+
* If a simple tag name is provided (e.g. `"div"`), a new element is created.
|
|
953
|
+
* If an HTML string is provided, it is parsed using a `<template>` element.
|
|
954
|
+
* If the HTML contains a single root element, that element is returned.
|
|
955
|
+
* If multiple root nodes are present, a `DocumentFragment` is returned.
|
|
449
956
|
|
|
450
957
|
### Parameters
|
|
451
958
|
|
|
452
|
-
* `html` **[string][
|
|
959
|
+
* `html` **[string][3]** Tag name or HTML string
|
|
960
|
+
|
|
961
|
+
### Examples
|
|
453
962
|
|
|
454
|
-
|
|
963
|
+
```javascript
|
|
964
|
+
dom.create('div') // <div></div>
|
|
965
|
+
dom.create('<span>Hello</span>') // <span>Hello</span>
|
|
966
|
+
dom.create('<li>One</li><li>Two</li>') // DocumentFragment containing both <li>
|
|
967
|
+
```
|
|
968
|
+
|
|
969
|
+
Returns **([Element][2] | [DocumentFragment][8] | null)** Created node(s), or null if input is invalid
|
|
455
970
|
|
|
456
971
|
## eq
|
|
457
972
|
|
|
458
|
-
[src/dom.js:
|
|
973
|
+
[src/dom.js:1166-1176][50]
|
|
974
|
+
|
|
975
|
+
Returns the element at a given index from a collection.
|
|
976
|
+
|
|
977
|
+
Supports negative indexes to count from the end of the list.
|
|
978
|
+
Returns `null` if the index is out of bounds.
|
|
459
979
|
|
|
460
980
|
### Parameters
|
|
461
981
|
|
|
462
|
-
* `nodeList` **([NodeList][9] | [Array][
|
|
463
|
-
* `index` **[number][
|
|
982
|
+
* `nodeList` **([NodeList][9] | [Array][4]<[Element][2]>)** Collection of elements
|
|
983
|
+
* `index` **[number][28]** Index of the element (can be negative) (optional, default `0`)
|
|
464
984
|
|
|
465
|
-
|
|
985
|
+
### Examples
|
|
986
|
+
|
|
987
|
+
```javascript
|
|
988
|
+
const items = document.querySelectorAll('.item')
|
|
989
|
+
|
|
990
|
+
dom.eq(items, 0) // first element
|
|
991
|
+
dom.eq(items, 2) // third element
|
|
992
|
+
dom.eq(items, -1) // last element
|
|
993
|
+
dom.eq(items, -2) // second to last
|
|
994
|
+
```
|
|
995
|
+
|
|
996
|
+
Returns **([Element][2] | null)** The element at the given index, or null if not found
|
|
466
997
|
|
|
467
998
|
## after
|
|
468
999
|
|
|
469
|
-
[src/dom.js:
|
|
1000
|
+
[src/dom.js:1192-1200][51]
|
|
1001
|
+
|
|
1002
|
+
Inserts a new element or HTML string immediately after a reference element.
|
|
1003
|
+
|
|
1004
|
+
If `newEl` is a string, it is converted to a node using `dom.create`.
|
|
1005
|
+
Returns the inserted node, or `null` if the reference element has no parent.
|
|
470
1006
|
|
|
471
1007
|
### Parameters
|
|
472
1008
|
|
|
473
|
-
* `el` **[Element][
|
|
474
|
-
* `newEl` **([Element][
|
|
1009
|
+
* `el` **[Element][2]** Reference element
|
|
1010
|
+
* `newEl` **([Element][2] | [string][3])** Element or HTML string to insert
|
|
1011
|
+
|
|
1012
|
+
### Examples
|
|
475
1013
|
|
|
476
|
-
|
|
1014
|
+
```javascript
|
|
1015
|
+
dom.after(el, '<span>New</span>')
|
|
1016
|
+
dom.after(el, document.createElement('div'))
|
|
1017
|
+
```
|
|
1018
|
+
|
|
1019
|
+
Returns **([Element][2] | [DocumentFragment][8] | null)** The inserted node, or null if insertion failed
|
|
477
1020
|
|
|
478
1021
|
## before
|
|
479
1022
|
|
|
480
|
-
[src/dom.js:
|
|
1023
|
+
[src/dom.js:1216-1224][52]
|
|
1024
|
+
|
|
1025
|
+
Inserts a new element or HTML string immediately before a reference element.
|
|
1026
|
+
|
|
1027
|
+
If `newEl` is a string, it is converted to a node using `dom.create`.
|
|
1028
|
+
Returns the inserted node, or `null` if the reference element has no parent.
|
|
481
1029
|
|
|
482
1030
|
### Parameters
|
|
483
1031
|
|
|
484
|
-
* `el` **[Element][
|
|
485
|
-
* `newEl` **([Element][
|
|
1032
|
+
* `el` **[Element][2]** Reference element
|
|
1033
|
+
* `newEl` **([Element][2] | [string][3])** Element or HTML string to insert
|
|
486
1034
|
|
|
487
|
-
|
|
1035
|
+
### Examples
|
|
1036
|
+
|
|
1037
|
+
```javascript
|
|
1038
|
+
dom.before(el, '<span>New</span>')
|
|
1039
|
+
dom.before(el, document.createElement('div'))
|
|
1040
|
+
```
|
|
1041
|
+
|
|
1042
|
+
Returns **([Element][2] | [DocumentFragment][8] | null)** The inserted node, or null if insertion failed
|
|
488
1043
|
|
|
489
1044
|
## empty
|
|
490
1045
|
|
|
491
|
-
[src/dom.js:
|
|
1046
|
+
[src/dom.js:1235-1241][53]
|
|
1047
|
+
|
|
1048
|
+
Removes all child nodes from an element.
|
|
492
1049
|
|
|
493
1050
|
### Parameters
|
|
494
1051
|
|
|
495
|
-
* `el` **
|
|
1052
|
+
* `el` **[Element][2]** Element to clear
|
|
1053
|
+
|
|
1054
|
+
### Examples
|
|
1055
|
+
|
|
1056
|
+
```javascript
|
|
1057
|
+
dom.empty(el) // el now has no children
|
|
1058
|
+
```
|
|
496
1059
|
|
|
497
|
-
Returns **[Element][
|
|
1060
|
+
Returns **[Element][2]** The element
|
|
498
1061
|
|
|
499
1062
|
## not
|
|
500
1063
|
|
|
501
|
-
[src/dom.js:
|
|
1064
|
+
[src/dom.js:1263-1271][54]
|
|
1065
|
+
|
|
1066
|
+
Filters a collection of elements by excluding those matching a selector
|
|
1067
|
+
or a specific element.
|
|
1068
|
+
|
|
1069
|
+
Accepts a single Element, a NodeList, or an array of Elements.
|
|
1070
|
+
If `selector` is a string, elements matching it are excluded.
|
|
1071
|
+
If `selector` is an Element, that exact element is excluded.
|
|
502
1072
|
|
|
503
1073
|
### Parameters
|
|
504
1074
|
|
|
505
|
-
* `el` **([Element][
|
|
506
|
-
* `selector` **([string][
|
|
1075
|
+
* `el` **([Element][2] | [NodeList][9] | [Array][4]<[Element][2]>)** Element(s) to filter
|
|
1076
|
+
* `selector` **([string][3] | [Element][2])** CSS selector or element to exclude
|
|
1077
|
+
|
|
1078
|
+
### Examples
|
|
1079
|
+
|
|
1080
|
+
```javascript
|
|
1081
|
+
const items = document.querySelectorAll('.item')
|
|
507
1082
|
|
|
508
|
-
|
|
1083
|
+
dom.not(items, '.active') // all .item elements except those with .active
|
|
1084
|
+
dom.not(items, someElement) // all elements except that specific one
|
|
1085
|
+
|
|
1086
|
+
dom.not(el, '.hidden') // returns [] if el matches, otherwise [el]
|
|
1087
|
+
```
|
|
1088
|
+
|
|
1089
|
+
Returns **[Array][4]<[Element][2]>** Filtered array of elements
|
|
509
1090
|
|
|
510
1091
|
## collide
|
|
511
1092
|
|
|
512
|
-
[src/dom.js:
|
|
1093
|
+
[src/dom.js:1287-1297][55]
|
|
1094
|
+
|
|
1095
|
+
Checks whether two elements visually collide (overlap) in the viewport.
|
|
1096
|
+
|
|
1097
|
+
Returns `true` if their rectangles intersect.
|
|
513
1098
|
|
|
514
1099
|
### Parameters
|
|
515
1100
|
|
|
516
|
-
* `elem1` **[Element][
|
|
517
|
-
* `elem2` **[Element][
|
|
1101
|
+
* `elem1` **[Element][2]** First element
|
|
1102
|
+
* `elem2` **[Element][2]** Second element
|
|
518
1103
|
|
|
519
|
-
|
|
1104
|
+
### Examples
|
|
1105
|
+
|
|
1106
|
+
```javascript
|
|
1107
|
+
if (dom.collide(box1, box2)) {
|
|
1108
|
+
console.log('Elements overlap')
|
|
1109
|
+
}
|
|
1110
|
+
```
|
|
1111
|
+
|
|
1112
|
+
Returns **[boolean][16]** `true` if the elements overlap, otherwise false
|
|
520
1113
|
|
|
521
1114
|
## matches
|
|
522
1115
|
|
|
523
|
-
[src/dom.js:
|
|
1116
|
+
[src/dom.js:1313-1317][56]
|
|
1117
|
+
|
|
1118
|
+
Checks whether an element matches a selector or is equal to another element.
|
|
1119
|
+
|
|
1120
|
+
If `selector` is a string, uses `Element.matches()`.
|
|
1121
|
+
If `selector` is an Element, checks strict equality.
|
|
524
1122
|
|
|
525
1123
|
### Parameters
|
|
526
1124
|
|
|
527
|
-
* `el` **[Element][
|
|
528
|
-
* `selector` **([string][
|
|
1125
|
+
* `el` **[Element][2]** Element to test
|
|
1126
|
+
* `selector` **([string][3] | [Element][2])** CSS selector or element to compare
|
|
1127
|
+
|
|
1128
|
+
### Examples
|
|
1129
|
+
|
|
1130
|
+
```javascript
|
|
1131
|
+
dom.matches(el, '.active') // true if el has class "active"
|
|
1132
|
+
dom.matches(el, otherEl) // true if el === otherEl
|
|
1133
|
+
```
|
|
1134
|
+
|
|
1135
|
+
Returns **[boolean][16]** `true` if the element matches, otherwise false
|
|
529
1136
|
|
|
530
1137
|
## replaceChild
|
|
531
1138
|
|
|
532
|
-
[src/dom.js:
|
|
1139
|
+
[src/dom.js:1330-1332][57]
|
|
1140
|
+
|
|
1141
|
+
Replaces a child node of an element with another node.
|
|
533
1142
|
|
|
534
1143
|
### Parameters
|
|
535
1144
|
|
|
536
|
-
* `el` **[Element][
|
|
537
|
-
* `child` **[Element][
|
|
538
|
-
* `oldChild` **[Element][
|
|
1145
|
+
* `el` **[Element][2]** Parent element
|
|
1146
|
+
* `child` **[Element][2]** New child node
|
|
1147
|
+
* `oldChild` **[Element][2]** Existing child node to replace
|
|
1148
|
+
|
|
1149
|
+
### Examples
|
|
1150
|
+
|
|
1151
|
+
```javascript
|
|
1152
|
+
dom.replaceChild(parent, newEl, oldEl)
|
|
1153
|
+
```
|
|
1154
|
+
|
|
1155
|
+
Returns **[Element][2]** The replaced node
|
|
539
1156
|
|
|
540
1157
|
## replaceChildren
|
|
541
1158
|
|
|
542
|
-
[src/dom.js:
|
|
1159
|
+
[src/dom.js:1347-1360][58]
|
|
1160
|
+
|
|
1161
|
+
Replaces all children of an element with new nodes or HTML strings.
|
|
1162
|
+
|
|
1163
|
+
Strings are converted to DOM nodes using `dom.create`.
|
|
543
1164
|
|
|
544
1165
|
### Parameters
|
|
545
1166
|
|
|
546
|
-
* `el` **[Element][
|
|
547
|
-
* `children`
|
|
1167
|
+
* `el` **[Element][2]** Target element
|
|
1168
|
+
* `children` **...([Element][2] | [string][3])** New children to insert
|
|
548
1169
|
|
|
549
|
-
|
|
1170
|
+
### Examples
|
|
1171
|
+
|
|
1172
|
+
```javascript
|
|
1173
|
+
dom.replaceChildren(el, '<span>A</span>', '<span>B</span>')
|
|
1174
|
+
dom.replaceChildren(el, document.createElement('div'))
|
|
1175
|
+
```
|
|
1176
|
+
|
|
1177
|
+
Returns **[Element][2]** The element
|
|
550
1178
|
|
|
551
1179
|
## offset
|
|
552
1180
|
|
|
553
|
-
[src/dom.js:
|
|
1181
|
+
[src/dom.js:1377-1397][59]
|
|
1182
|
+
|
|
1183
|
+
Returns the page offset of an element, document, or window.
|
|
1184
|
+
|
|
1185
|
+
* For `window`, returns the current scroll position.
|
|
1186
|
+
* For `document`, returns the scroll position of the root element.
|
|
1187
|
+
* For an element, returns its position relative to the top-left of the page.
|
|
1188
|
+
|
|
1189
|
+
### Parameters
|
|
1190
|
+
|
|
1191
|
+
* `el` **([Element][2] | [Document][7] | [Window][60])** Target element, document, or window
|
|
1192
|
+
|
|
1193
|
+
### Examples
|
|
1194
|
+
|
|
1195
|
+
```javascript
|
|
1196
|
+
dom.offset(window) // { top: scrollY, left: scrollX }
|
|
1197
|
+
dom.offset(document) // { top: scrollTop, left: scrollLeft }
|
|
1198
|
+
dom.offset(el) // position of el relative to the page
|
|
1199
|
+
```
|
|
1200
|
+
|
|
1201
|
+
Returns **{top: [number][28], left: [number][28]}** The offset relative to the page
|
|
1202
|
+
|
|
1203
|
+
## isEditable
|
|
1204
|
+
|
|
1205
|
+
[src/dom.js:1419-1429][61]
|
|
1206
|
+
|
|
1207
|
+
Checks whether a node is inside an editable context.
|
|
1208
|
+
|
|
1209
|
+
Returns true if the element itself, or one of its ancestors,
|
|
1210
|
+
is an editable form control or has `contenteditable="true"`.
|
|
1211
|
+
Text nodes are automatically resolved to their parent element.
|
|
1212
|
+
|
|
1213
|
+
### Parameters
|
|
1214
|
+
|
|
1215
|
+
* `el` **[Node][19]** Node to test
|
|
1216
|
+
|
|
1217
|
+
### Examples
|
|
1218
|
+
|
|
1219
|
+
```javascript
|
|
1220
|
+
dom.isEditable(inputEl) // true
|
|
1221
|
+
dom.isEditable(textareaEl) // true
|
|
1222
|
+
dom.isEditable(selectEl) // true
|
|
1223
|
+
|
|
1224
|
+
dom.isEditable(divWithContentEditable) // true
|
|
1225
|
+
dom.isEditable(spanInsideContentEditable) // true
|
|
1226
|
+
|
|
1227
|
+
dom.isEditable(document.body) // false
|
|
1228
|
+
```
|
|
1229
|
+
|
|
1230
|
+
Returns **[boolean][16]** True if the node is in an editable context
|
|
1231
|
+
|
|
1232
|
+
## isInDOM
|
|
1233
|
+
|
|
1234
|
+
[src/dom.js:1443-1448][62]
|
|
1235
|
+
|
|
1236
|
+
Checks whether a node is currently attached to the main document.
|
|
1237
|
+
|
|
1238
|
+
### Parameters
|
|
1239
|
+
|
|
1240
|
+
* `node` **[Node][19]** Node to test
|
|
1241
|
+
|
|
1242
|
+
### Examples
|
|
1243
|
+
|
|
1244
|
+
```javascript
|
|
1245
|
+
dom.isInDOM(el) // true if element is in the document
|
|
1246
|
+
|
|
1247
|
+
const frag = document.createDocumentFragment()
|
|
1248
|
+
dom.isInDOM(frag) // false
|
|
1249
|
+
```
|
|
1250
|
+
|
|
1251
|
+
Returns **[boolean][16]** `true` if the node is attached to the document
|
|
1252
|
+
|
|
1253
|
+
## on
|
|
1254
|
+
|
|
1255
|
+
[src/dom.js:1499-1499][63]
|
|
1256
|
+
|
|
1257
|
+
Attaches one or more event listeners to an element, document, or window.
|
|
1258
|
+
|
|
1259
|
+
Supports:
|
|
1260
|
+
|
|
1261
|
+
* Multiple events (space-separated)
|
|
1262
|
+
* Event namespaces (e.g. "click.menu")
|
|
1263
|
+
* Event delegation via CSS selector
|
|
1264
|
+
* Custom events
|
|
1265
|
+
|
|
1266
|
+
Custom Events :
|
|
1267
|
+
|
|
1268
|
+
The following custom events are available:
|
|
1269
|
+
|
|
1270
|
+
`longtap`
|
|
1271
|
+
Fired when the user presses and holds on an element for a short duration
|
|
1272
|
+
(useful for touch interfaces and long-press interactions).
|
|
1273
|
+
|
|
1274
|
+
`dbltap`
|
|
1275
|
+
Fired when the user performs a quick double tap on touch devices.
|
|
1276
|
+
|
|
1277
|
+
These events are automatically enabled the first time they are used.
|
|
554
1278
|
|
|
555
1279
|
### Parameters
|
|
556
1280
|
|
|
557
|
-
* `el` **([Element][
|
|
1281
|
+
* `el` **([Element][2] | [Document][7] | [Window][60])** Element to bind the listener to
|
|
1282
|
+
* `events` **[string][3]** Space-separated list of events (optionally namespaced)
|
|
1283
|
+
* `selector` **([string][3] | [function][64])?** CSS selector for delegation, or handler if no delegation
|
|
1284
|
+
* `handler` **([function][64] | AddEventListenerOptions | [boolean][16])?** Event handler
|
|
1285
|
+
* `options` **(AddEventListenerOptions | [boolean][16])?** Native event listener options
|
|
558
1286
|
|
|
559
|
-
|
|
1287
|
+
### Examples
|
|
560
1288
|
|
|
561
|
-
|
|
1289
|
+
```javascript
|
|
1290
|
+
// Simple binding
|
|
1291
|
+
dom.on(button, 'click', (ev) => {})
|
|
562
1292
|
|
|
563
|
-
|
|
1293
|
+
// Multiple events
|
|
1294
|
+
dom.on(input, 'focus blur', handler)
|
|
564
1295
|
|
|
565
|
-
|
|
1296
|
+
// Namespaced event
|
|
1297
|
+
dom.on(button, 'click.menu', handler)
|
|
1298
|
+
|
|
1299
|
+
// Delegated event
|
|
1300
|
+
dom.on(list, 'click', '.item', (ev) => {})
|
|
1301
|
+
|
|
1302
|
+
// With options
|
|
1303
|
+
dom.on(window, 'scroll', handler, { passive: true })
|
|
1304
|
+
```
|
|
1305
|
+
|
|
1306
|
+
```javascript
|
|
1307
|
+
dom.on(el, 'longtap', handler)
|
|
1308
|
+
dom.on(el, 'dbltap', handler)
|
|
1309
|
+
```
|
|
566
1310
|
|
|
567
|
-
[
|
|
1311
|
+
Returns **[Element][2]** The element
|
|
568
1312
|
|
|
569
|
-
|
|
1313
|
+
## off
|
|
570
1314
|
|
|
571
|
-
[
|
|
1315
|
+
[src/dom.js:1527-1527][65]
|
|
572
1316
|
|
|
573
|
-
|
|
1317
|
+
Removes event listeners previously attached with `dom.on`.
|
|
574
1318
|
|
|
575
|
-
|
|
1319
|
+
You can remove listeners by:
|
|
1320
|
+
|
|
1321
|
+
* Event type
|
|
1322
|
+
* Namespace
|
|
1323
|
+
* Handler reference
|
|
1324
|
+
* Selector (for delegated events)
|
|
1325
|
+
* Options
|
|
1326
|
+
|
|
1327
|
+
If no event is provided, all listeners on the element are removed.
|
|
1328
|
+
|
|
1329
|
+
### Parameters
|
|
1330
|
+
|
|
1331
|
+
* `el` **([Element][2] | [Document][7] | [Window][60])** Element to unbind listeners from
|
|
1332
|
+
* `events` **[string][3]?** Space-separated events (optionally namespaced)
|
|
1333
|
+
* `selector` **([string][3] | [function][64])?** Delegation selector or handler
|
|
1334
|
+
* `handler` **([function][64] | AddEventListenerOptions | [boolean][16])?** Specific handler to remove
|
|
1335
|
+
* `options` **(AddEventListenerOptions | [boolean][16])?** Listener options to match
|
|
1336
|
+
|
|
1337
|
+
### Examples
|
|
1338
|
+
|
|
1339
|
+
```javascript
|
|
1340
|
+
dom.off(button, 'click')
|
|
1341
|
+
dom.off(button, 'click.menu')
|
|
1342
|
+
dom.off(button, 'click', handler)
|
|
1343
|
+
dom.off(list, 'click', '.item', handler)
|
|
1344
|
+
dom.off(button) // removes all listeners
|
|
1345
|
+
```
|
|
1346
|
+
|
|
1347
|
+
Returns **[Element][2]** The element
|
|
1348
|
+
|
|
1349
|
+
[1]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L53-L55 "Source code on GitHub"
|
|
1350
|
+
|
|
1351
|
+
[2]: https://developer.mozilla.org/docs/Web/API/Element
|
|
1352
|
+
|
|
1353
|
+
[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
|
|
1354
|
+
|
|
1355
|
+
[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
|
|
1356
|
+
|
|
1357
|
+
[5]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L72-L74 "Source code on GitHub"
|
|
1358
|
+
|
|
1359
|
+
[6]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L102-L127 "Source code on GitHub"
|
|
1360
|
+
|
|
1361
|
+
[7]: https://developer.mozilla.org/docs/Web/API/Document
|
|
1362
|
+
|
|
1363
|
+
[8]: https://developer.mozilla.org/docs/Web/API/DocumentFragment
|
|
576
1364
|
|
|
577
1365
|
[9]: https://developer.mozilla.org/docs/Web/API/NodeList
|
|
578
1366
|
|
|
579
|
-
[10]: https://github.com/webalternatif/js-core/blob/
|
|
1367
|
+
[10]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L139-L141 "Source code on GitHub"
|
|
580
1368
|
|
|
581
|
-
[11]: https://github.com/webalternatif/js-core/blob/
|
|
1369
|
+
[11]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L160-L167 "Source code on GitHub"
|
|
582
1370
|
|
|
583
|
-
[12]: https://
|
|
1371
|
+
[12]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L188-L190 "Source code on GitHub"
|
|
584
1372
|
|
|
585
|
-
[13]: https://
|
|
1373
|
+
[13]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L209-L226 "Source code on GitHub"
|
|
586
1374
|
|
|
587
|
-
[14]: https://github.com/webalternatif/js-core/blob/
|
|
1375
|
+
[14]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L245-L262 "Source code on GitHub"
|
|
588
1376
|
|
|
589
|
-
[15]: https://github.com/webalternatif/js-core/blob/
|
|
1377
|
+
[15]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L284-L294 "Source code on GitHub"
|
|
590
1378
|
|
|
591
|
-
[16]: https://
|
|
1379
|
+
[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
|
|
592
1380
|
|
|
593
|
-
[17]: https://github.com/webalternatif/js-core/blob/
|
|
1381
|
+
[17]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L314-L334 "Source code on GitHub"
|
|
594
1382
|
|
|
595
|
-
[18]: https://github.com/webalternatif/js-core/blob/
|
|
1383
|
+
[18]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L350-L360 "Source code on GitHub"
|
|
596
1384
|
|
|
597
|
-
[19]: https://
|
|
1385
|
+
[19]: https://developer.mozilla.org/docs/Web/API/Node/nextSibling
|
|
598
1386
|
|
|
599
|
-
[20]: https://github.com/webalternatif/js-core/blob/
|
|
1387
|
+
[20]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L379-L389 "Source code on GitHub"
|
|
600
1388
|
|
|
601
|
-
[21]: https://github.com/webalternatif/js-core/blob/
|
|
1389
|
+
[21]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L395-L405 "Source code on GitHub"
|
|
602
1390
|
|
|
603
|
-
[22]: https://
|
|
1391
|
+
[22]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L427-L449 "Source code on GitHub"
|
|
604
1392
|
|
|
605
|
-
[23]: https://github.com/webalternatif/js-core/blob/
|
|
1393
|
+
[23]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L469-L479 "Source code on GitHub"
|
|
606
1394
|
|
|
607
|
-
[24]: https://github.com/webalternatif/js-core/blob/
|
|
1395
|
+
[24]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L499-L509 "Source code on GitHub"
|
|
608
1396
|
|
|
609
|
-
[25]: https://github.com/webalternatif/js-core/blob/
|
|
1397
|
+
[25]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L528-L542 "Source code on GitHub"
|
|
610
1398
|
|
|
611
|
-
[26]: https://github.com/webalternatif/js-core/blob/
|
|
1399
|
+
[26]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L561-L575 "Source code on GitHub"
|
|
612
1400
|
|
|
613
|
-
[27]: https://github.com/webalternatif/js-core/blob/
|
|
1401
|
+
[27]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L594-L596 "Source code on GitHub"
|
|
614
1402
|
|
|
615
|
-
[28]: https://
|
|
1403
|
+
[28]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
|
|
616
1404
|
|
|
617
|
-
[29]: https://github.com/webalternatif/js-core/blob/
|
|
1405
|
+
[29]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L616-L639 "Source code on GitHub"
|
|
618
1406
|
|
|
619
|
-
[30]: https://github.com/webalternatif/js-core/blob/
|
|
1407
|
+
[30]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L660-L683 "Source code on GitHub"
|
|
620
1408
|
|
|
621
|
-
[31]: https://github.com/webalternatif/js-core/blob/
|
|
1409
|
+
[31]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L703-L711 "Source code on GitHub"
|
|
622
1410
|
|
|
623
|
-
[32]: https://github.com/webalternatif/js-core/blob/
|
|
1411
|
+
[32]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L730-L740 "Source code on GitHub"
|
|
624
1412
|
|
|
625
|
-
[33]: https://github.com/webalternatif/js-core/blob/
|
|
1413
|
+
[33]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L762-L769 "Source code on GitHub"
|
|
626
1414
|
|
|
627
|
-
[34]: https://github.com/webalternatif/js-core/blob/
|
|
1415
|
+
[34]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L785-L790 "Source code on GitHub"
|
|
628
1416
|
|
|
629
|
-
[35]: https://github.com/webalternatif/js-core/blob/
|
|
1417
|
+
[35]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L806-L811 "Source code on GitHub"
|
|
630
1418
|
|
|
631
|
-
[36]: https://github.com/webalternatif/js-core/blob/
|
|
1419
|
+
[36]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L825-L840 "Source code on GitHub"
|
|
632
1420
|
|
|
633
|
-
[37]: https://github.com/webalternatif/js-core/blob/
|
|
1421
|
+
[37]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L856-L867 "Source code on GitHub"
|
|
634
1422
|
|
|
635
|
-
[38]: https://github.com/webalternatif/js-core/blob/
|
|
1423
|
+
[38]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L881-L883 "Source code on GitHub"
|
|
636
1424
|
|
|
637
|
-
[39]: https://github.com/webalternatif/js-core/blob/
|
|
1425
|
+
[39]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L913-L937 "Source code on GitHub"
|
|
638
1426
|
|
|
639
|
-
[40]: https://
|
|
1427
|
+
[40]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
|
|
640
1428
|
|
|
641
|
-
[41]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/
|
|
1429
|
+
[41]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined
|
|
642
1430
|
|
|
643
|
-
[42]: https://github.com/webalternatif/js-core/blob/
|
|
1431
|
+
[42]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L953-L955 "Source code on GitHub"
|
|
644
1432
|
|
|
645
|
-
[43]: https://github.com/webalternatif/js-core/blob/
|
|
1433
|
+
[43]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L987-L1015 "Source code on GitHub"
|
|
646
1434
|
|
|
647
1435
|
[44]: https://developer.mozilla.org/docs/Web/HTML/Element
|
|
648
1436
|
|
|
649
|
-
[45]: https://github.com/webalternatif/js-core/blob/
|
|
1437
|
+
[45]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1035-L1043 "Source code on GitHub"
|
|
1438
|
+
|
|
1439
|
+
[46]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1063-L1071 "Source code on GitHub"
|
|
1440
|
+
|
|
1441
|
+
[47]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1087-L1090 "Source code on GitHub"
|
|
1442
|
+
|
|
1443
|
+
[48]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1105-L1109 "Source code on GitHub"
|
|
650
1444
|
|
|
651
|
-
[
|
|
1445
|
+
[49]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1127-L1146 "Source code on GitHub"
|
|
652
1446
|
|
|
653
|
-
[
|
|
1447
|
+
[50]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1166-L1176 "Source code on GitHub"
|
|
654
1448
|
|
|
655
|
-
[
|
|
1449
|
+
[51]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1192-L1200 "Source code on GitHub"
|
|
656
1450
|
|
|
657
|
-
[
|
|
1451
|
+
[52]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1216-L1224 "Source code on GitHub"
|
|
658
1452
|
|
|
659
|
-
[
|
|
1453
|
+
[53]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1235-L1241 "Source code on GitHub"
|
|
660
1454
|
|
|
661
|
-
[
|
|
1455
|
+
[54]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1263-L1271 "Source code on GitHub"
|
|
662
1456
|
|
|
663
|
-
[
|
|
1457
|
+
[55]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1287-L1297 "Source code on GitHub"
|
|
664
1458
|
|
|
665
|
-
[
|
|
1459
|
+
[56]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1313-L1317 "Source code on GitHub"
|
|
666
1460
|
|
|
667
|
-
[
|
|
1461
|
+
[57]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1330-L1332 "Source code on GitHub"
|
|
668
1462
|
|
|
669
|
-
[
|
|
1463
|
+
[58]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1347-L1360 "Source code on GitHub"
|
|
670
1464
|
|
|
671
|
-
[
|
|
1465
|
+
[59]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1377-L1397 "Source code on GitHub"
|
|
672
1466
|
|
|
673
|
-
[
|
|
1467
|
+
[60]: https://developer.mozilla.org/docs/Web/API/Window
|
|
674
1468
|
|
|
675
|
-
[
|
|
1469
|
+
[61]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1419-L1429 "Source code on GitHub"
|
|
676
1470
|
|
|
677
|
-
[
|
|
1471
|
+
[62]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1443-L1448 "Source code on GitHub"
|
|
678
1472
|
|
|
679
|
-
[
|
|
1473
|
+
[63]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1499-L1499 "Source code on GitHub"
|
|
680
1474
|
|
|
681
|
-
[
|
|
1475
|
+
[64]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
|
|
682
1476
|
|
|
683
|
-
[
|
|
1477
|
+
[65]: https://github.com/webalternatif/js-core/blob/c59faf2628616256e5ee2499f03adb5e9a32460d/src/dom.js#L1527-L1527 "Source code on GitHub"
|