10
10
[ ![ Backers] [ backers-badge ]] [ collective ]
11
11
[ ![ Chat] [ chat-badge ]] [ chat ]
12
12
13
- [ ** hast** ] [ hast ] utility with equivalents ` querySelector ` , ` querySelectorAll ` ,
13
+ [ hast] [ ] utility with equivalents for ` querySelector ` , ` querySelectorAll ` ,
14
14
and ` matches ` .
15
15
16
+ ## Contents
17
+
18
+ * [ What is this?] ( #what-is-this )
19
+ * [ When should I use this?] ( #when-should-i-use-this )
20
+ * [ Install] ( #install )
21
+ * [ API] ( #api )
22
+ * [ ` matches(selector, node[, space]) ` ] ( #matchesselector-node-space )
23
+ * [ ` select(selector, tree[, space]) ` ] ( #selectselector-tree-space )
24
+ * [ ` selectAll(selector, tree[, space]) ` ] ( #selectallselector-tree-space )
25
+ * [ Support] ( #support )
26
+ * [ Unsupported] ( #unsupported )
27
+ * [ Types] ( #types )
28
+ * [ Compatibility] ( #compatibility )
29
+ * [ Security] ( #security )
30
+ * [ Related] ( #related )
31
+ * [ Contribute] ( #contribute )
32
+ * [ License] ( #license )
33
+
34
+ ## What is this?
35
+
36
+ This package lets you find nodes in a tree, similar to how ` querySelector ` ,
37
+ ` querySelectorAll ` , and ` matches ` work with the DOM.
38
+
16
39
One notable difference between DOM and hast is that DOM nodes have references
17
40
to their parents, meaning that ` document.body.matches(':last-child') ` can
18
- be evaluated.
41
+ be evaluated to check whether the body is the last child of its parent .
19
42
This information is not stored in hast, so selectors like that don’t work.
20
43
21
- [ View the list of supported selectors » ] [ support ]
44
+ ## When should I use this?
22
45
23
- ## Install
46
+ This is a small utility that is quite useful, but is rather slow if you use it a
47
+ lot.
48
+ For each call, it has to walk the entire tree.
49
+ In some cases, walking the tree once with [ ` unist-util-visit ` ] [ unist-util-visit ]
50
+ is smarter, such as when you want to change certain nodes.
51
+ On the other hand, this is quite powerful and fast enough for many other cases.
24
52
25
- This package is [ ESM only] ( https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c ) :
26
- Node 12+ is needed to use it and it must be ` import ` ed instead of ` require ` d.
53
+ This utility is similar to [ ` unist-util-select ` ] [ unist-util-select ] , which can
54
+ find and match any unist node.
55
+
56
+ ## Install
27
57
28
- [ npm] [ ] :
58
+ This package is [ ESM only] [ esm ] .
59
+ In Node.js (version 12.20+, 14.14+, 16.0+, 18.0+), install with [ npm] [ ] :
29
60
30
61
``` sh
31
62
npm install hast-util-select
32
63
```
33
64
65
+ In Deno with [ ` esm.sh ` ] [ esmsh ] :
66
+
67
+ ``` js
68
+ import {matches , select , selectAll } from " https://esm.sh/hast-util-select@5"
69
+ ```
70
+
71
+ In browsers with [ ` esm.sh ` ] [ esmsh ] :
72
+
73
+ ``` html
74
+ <script type =" module" >
75
+ import {matches , select , selectAll } from " https://esm.sh/hast-util-select@5?bundle"
76
+ </script >
77
+ ```
78
+
34
79
## API
35
80
36
- This package exports the following identifiers: ` matches ` , ` select ` , and
37
- ` selectAll ` .
81
+ This package exports the identifiers ` matches ` , ` select ` , and ` selectAll ` .
38
82
There is no default export.
39
83
40
84
### ` matches(selector, node[, space]) `
41
85
42
- Check that the given ` node ` matches ` selector ` .
43
- Returns boolean, whether the node matches or not.
86
+ Check that the given ` node ` ([ ` Node ` ] [ node ] , should be [ element] [ ] ) matches the
87
+ CSS selector ` selector ` (` string ` , stuff like ` a, b ` is also supported).
88
+ Also accepts a ` space ` (enum, ` 'svg' ` or ` 'html' ` , default: ` 'html' ` )
89
+ Returns whether the node matches or not (` boolean ` ).
44
90
45
91
This only checks the element itself, not the surrounding tree.
46
92
Thus, nesting in selectors is not supported (` p b ` , ` p > b ` ), neither are
47
93
selectors like ` :first-child ` , etc.
48
94
This only checks that the given element matches the selector.
49
95
50
- ##### Use
96
+ ###### Example
51
97
52
98
``` js
53
99
import {h } from ' hastscript'
@@ -63,26 +109,14 @@ matches('[lang|=en]', h('a', {lang: 'en-GB'})) // => true
63
109
// ...
64
110
```
65
111
66
- ##### Parameters
67
-
68
- * ` selector ` (` string ` )
69
- — CSS selectors (` , ` is also supported)
70
- * ` node ` ([ ` Node ` ] [ node ] )
71
- — Thing to check, could be anything, but should be an [ * element* ] [ element ]
72
- * ` space ` (enum, ` 'svg' ` or ` 'html' ` , default: ` 'html' ` )
73
- — Which space the node exists in
74
-
75
- ##### Returns
76
-
77
- ` boolean ` — Whether the node matches the selector.
78
-
79
112
### ` select(selector, tree[, space]) `
80
113
81
- Select the first ` node ` matching ` selector ` in the given ` tree ` (could be the
82
- tree itself).
83
- Searches the [ * tree* ] [ tree ] in [ * preorder* ] [ preorder ] .
114
+ Select the first [ element] [ ] (or ` null ` ) matching the CSS selector ` selector ` in
115
+ the given ` tree ` ([ ` Node ` ] [ node ] ), which could be the tree itself.
116
+ Searches the [ tree] [ ] in * [ preorder] [ ] * .
117
+ Also accepts a ` space ` (enum, ` 'svg' ` or ` 'html' ` , default: ` 'html' ` )
84
118
85
- ##### Use
119
+ ###### Example
86
120
87
121
``` js
88
122
import {h } from ' hastscript'
@@ -111,24 +145,14 @@ Yields:
111
145
children: [ { type: ' text' , value: ' Delta' } ] }
112
146
```
113
147
114
- ##### Parameters
115
-
116
- * ` selector ` (` string ` ) — CSS selectors (` , ` is also supported)
117
- * ` tree ` ([ ` Node ` ] [ node ] ) — [ * Tree* ] [ tree ] to search
118
- * ` space ` (enum, ` 'svg' ` or ` 'html' ` , default: ` 'html' ` )
119
- — Which space the tree exists in
120
-
121
- ##### Returns
122
-
123
- [ ` Element? ` ] [ element ] — The found element, if any.
124
-
125
148
### ` selectAll(selector, tree[, space]) `
126
149
127
- Select all nodes matching ` selector ` in the given ` tree ` (could include the tree
128
- itself).
129
- Searches the [ * tree* ] [ tree ] in [ * preorder* ] [ preorder ] .
150
+ Select all [ element] [ ] s (` Array<Element> ` ) matching the CSS selector ` selector `
151
+ in the given ` tree ` ([ ` Node ` ] [ node ] ), which could include the tree itself.
152
+ Searches the [ tree] [ ] in * [ preorder] [ ] * .
153
+ Also accepts a ` space ` (enum, ` 'svg' ` or ` 'html' ` , default: ` 'html' ` )
130
154
131
- ##### Use
155
+ ###### Example
132
156
133
157
``` js
134
158
import {h } from ' hastscript'
@@ -163,17 +187,6 @@ Yields:
163
187
children: [ { type: ' text' , value: ' Foxtrot' } ] } ]
164
188
```
165
189
166
- ##### Parameters
167
-
168
- * ` selector ` (` string ` ) — CSS selectors (` , ` is also supported)
169
- * ` tree ` ([ ` Node ` ] [ node ] ) — [ * Tree* ] [ tree ] to search
170
- * ` space ` (enum, ` 'svg' ` or ` 'html' ` , default: ` 'html' ` )
171
- — Which space the tree exists in
172
-
173
- ##### Returns
174
-
175
- [ ` Array<Element> ` ] [ element ] — All found elements, if any.
176
-
177
190
## Support
178
191
179
192
* [x] ` * ` (universal selector)
@@ -282,6 +295,18 @@ Yields:
282
295
* § — Not very interested in writing / including the code for this
283
296
* ‖ — Too new, the spec is still changing
284
297
298
+ ## Types
299
+
300
+ This package is fully typed with [ TypeScript] [ ] .
301
+ It exports the additional type ` Space ` .
302
+
303
+ ## Compatibility
304
+
305
+ Projects maintained by the unified collective are compatible with all maintained
306
+ versions of Node.js.
307
+ As of now, that is Node.js 12.20+, 14.14+, 16.0+, and 18.0+.
308
+ Our projects sometimes work with older versions, but this is not guaranteed.
309
+
285
310
## Security
286
311
287
312
` hast-util-select ` does not change the syntax tree so there are no openings for
@@ -300,8 +325,8 @@ Yields:
300
325
301
326
## Contribute
302
327
303
- See [ ` contributing.md ` in ` syntax-tree/.github ` ] [ contributing ] for ways to get
304
- started.
328
+ See [ ` contributing.md ` ] [ contributing ] in [ ` syntax-tree/.github ` ] [ health ] for
329
+ ways to get started.
305
330
See [ ` support.md ` ] [ help ] for ways to get help.
306
331
307
332
This project has a [ code of conduct] [ coc ] .
@@ -342,15 +367,23 @@ abide by its terms.
342
367
343
368
[ npm ] : https://docs.npmjs.com/cli/install
344
369
370
+ [ esm ] : https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
371
+
372
+ [ esmsh ] : https://esm.sh
373
+
374
+ [ typescript ] : https://www.typescriptlang.org
375
+
345
376
[ license ] : license
346
377
347
378
[ author ] : https://wooorm.com
348
379
349
- [ contributing ] : https://github.com/syntax-tree/.github/blob/HEAD/contributing.md
380
+ [ health ] : https://github.com/syntax-tree/.github
350
381
351
- [ help ] : https://github.com/syntax-tree/.github/blob/HEAD/support .md
382
+ [ contributing ] : https://github.com/syntax-tree/.github/blob/main/contributing .md
352
383
353
- [ coc ] : https://github.com/syntax-tree/.github/blob/HEAD/code-of-conduct.md
384
+ [ help ] : https://github.com/syntax-tree/.github/blob/main/support.md
385
+
386
+ [ coc ] : https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md
354
387
355
388
[ tree ] : https://github.com/syntax-tree/unist#tree
356
389
@@ -364,4 +397,6 @@ abide by its terms.
364
397
365
398
[ xss ] : https://en.wikipedia.org/wiki/Cross-site_scripting
366
399
367
- [ support ] : #support
400
+ [ unist-util-visit ] : https://github.com/syntax-tree/unist-util-visit
401
+
402
+ [ unist-util-select ] : https://github.com/syntax-tree/unist-util-select
0 commit comments