1 | # unist-util-select
|
2 |
|
3 | [![Build][build-badge]][build]
|
4 | [![Coverage][coverage-badge]][coverage]
|
5 | [![Downloads][downloads-badge]][downloads]
|
6 | [![Size][size-badge]][size]
|
7 | [![Sponsors][sponsors-badge]][collective]
|
8 | [![Backers][backers-badge]][collective]
|
9 | [![Chat][chat-badge]][chat]
|
10 |
|
11 | [**unist**][unist] utility with equivalents for `querySelector`,
|
12 | `querySelectorAll`, and `matches`.
|
13 |
|
14 | Note that the DOM has references to their parent nodes, meaning that
|
15 | `document.body.matches(':last-child')` can be evaluated.
|
16 | This information is not stored in unist, so selectors like that don’t work.
|
17 |
|
18 | [View the list of supported selectors »][support]
|
19 |
|
20 | ## Install
|
21 |
|
22 | [npm][]:
|
23 |
|
24 | ```sh
|
25 | npm install unist-util-select
|
26 | ```
|
27 |
|
28 | ## API
|
29 |
|
30 | ### `select.matches(selector, node)`
|
31 |
|
32 | Check that the given [node][] matches `selector`.
|
33 | Returns `boolean`, whether the node matches or not.
|
34 |
|
35 | This only checks the element itself, not the surrounding tree.
|
36 | Thus, nesting in selectors is not supported (`paragraph strong`,
|
37 | `paragraph > strong`), nor are selectors like `:first-child`, etc.
|
38 | This only checks that the given element matches the selector.
|
39 |
|
40 | ```js
|
41 | var u = require('unist-builder')
|
42 | var matches = require('unist-util-select').matches
|
43 |
|
44 | matches('strong, em', u('strong', [u('text', 'important')])) // => true
|
45 | matches('[lang]', u('code', {lang: 'js'}, 'console.log(1)')) // => true
|
46 | ```
|
47 |
|
48 | ### `select.select(selector, tree)`
|
49 |
|
50 | Select the first node matching `selector` in the given `tree` (could be the
|
51 | tree itself).
|
52 | Returns the found [node][], if any.
|
53 |
|
54 | ```js
|
55 | var u = require('unist-builder')
|
56 | var select = require('unist-util-select').select
|
57 |
|
58 | console.log(
|
59 | select(
|
60 | 'code ~ :nth-child(even)',
|
61 | u('blockquote', [
|
62 | u('paragraph', [u('text', 'Alpha')]),
|
63 | u('paragraph', [u('text', 'Bravo')]),
|
64 | u('code', 'Charlie'),
|
65 | u('paragraph', [u('text', 'Delta')]),
|
66 | u('paragraph', [u('text', 'Echo')])
|
67 | ])
|
68 | )
|
69 | )
|
70 | ```
|
71 |
|
72 | Yields:
|
73 |
|
74 | ```js
|
75 | {type: 'paragraph', children: [{type: 'text', value: 'Delta'}]}
|
76 | ```
|
77 |
|
78 | ### `select.selectAll(selector, tree)`
|
79 |
|
80 | Select all nodes matching `selector` in the given `tree` (could include the
|
81 | tree itself).
|
82 | Returns all found [node][]s, if any.
|
83 |
|
84 | ```js
|
85 | var u = require('unist-builder')
|
86 | var selectAll = require('unist-util-select').selectAll
|
87 |
|
88 | console.log(
|
89 | selectAll(
|
90 | 'code ~ :nth-child(even)',
|
91 | u('blockquote', [
|
92 | u('paragraph', [u('text', 'Alpha')]),
|
93 | u('paragraph', [u('text', 'Bravo')]),
|
94 | u('code', 'Charlie'),
|
95 | u('paragraph', [u('text', 'Delta')]),
|
96 | u('paragraph', [u('text', 'Echo')]),
|
97 | u('paragraph', [u('text', 'Foxtrot')]),
|
98 | u('paragraph', [u('text', 'Golf')])
|
99 | ])
|
100 | )
|
101 | )
|
102 | ```
|
103 |
|
104 | Yields:
|
105 |
|
106 | ```js
|
107 | [
|
108 | {type: 'paragraph', children: [{type: 'text', value: 'Delta'}]},
|
109 | {type: 'paragraph', children: [{type: 'text', value: 'Foxtrot'}]}
|
110 | ]
|
111 | ```
|
112 |
|
113 | ## Support
|
114 |
|
115 | * [x] `*` (universal selector)
|
116 | * [x] `,` (multiple selector)
|
117 | * [x] `paragraph` (type selector)
|
118 | * [x] `blockquote paragraph` (combinator: descendant selector)
|
119 | * [x] `blockquote > paragraph` (combinator: child selector)
|
120 | * [x] `code + paragraph` (combinator: adjacent sibling selector)
|
121 | * [x] `code ~ paragraph` (combinator: general sibling selector)
|
122 | * [x] `[attr]` (attribute existence, checks that the value on the tree is not
|
123 | nullish)
|
124 | * [x] `[attr=value]` (attribute equality, this stringifies values on the tree)
|
125 | * [x] `[attr^=value]` (attribute begins with, only works on strings)
|
126 | * [x] `[attr$=value]` (attribute ends with, only works on strings)
|
127 | * [x] `[attr*=value]` (attribute contains, only works on strings)
|
128 | * [x] `[attr~=value]` (attribute contains, checks if `value` is in the array,
|
129 | if there’s an array on the tree, otherwise same as attribute equality)
|
130 | * [x] `:any()` (functional pseudo-class, use `:matches` instead)
|
131 | * [x] `:has()` (functional pseudo-class)
|
132 | Relative selectors (`:has(> img)`) are not supported, but `:scope` is
|
133 | * [x] `:matches()` (functional pseudo-class)
|
134 | * [x] `:not()` (functional pseudo-class)
|
135 | * [x] `:blank` (pseudo-class, blank and empty are the same: a parent without
|
136 | children, or a node without value)
|
137 | * [x] `:empty` (pseudo-class, blank and empty are the same: a parent without
|
138 | children, or a node without value)
|
139 | * [x] `:root` (pseudo-class, matches the given node)
|
140 | * [x] `:scope` (pseudo-class, matches the given node)
|
141 | * [x] \* `:first-child` (pseudo-class)
|
142 | * [x] \* `:first-of-type` (pseudo-class)
|
143 | * [x] \* `:last-child` (pseudo-class)
|
144 | * [x] \* `:last-of-type` (pseudo-class)
|
145 | * [x] \* `:only-child` (pseudo-class)
|
146 | * [x] \* `:only-of-type` (pseudo-class)
|
147 | * [x] \* `:nth-child()` (functional pseudo-class)
|
148 | * [x] \* `:nth-last-child()` (functional pseudo-class)
|
149 | * [x] \* `:nth-last-of-type()` (functional pseudo-class)
|
150 | * [x] \* `:nth-of-type()` (functional pseudo-class)
|
151 |
|
152 | ###### Notes
|
153 |
|
154 | * \* — Not supported in `matches`
|
155 |
|
156 | ## Related
|
157 |
|
158 | * [`unist-util-filter`](https://github.com/syntax-tree/unist-util-filter)
|
159 | — Create a new tree with all nodes that pass a test
|
160 | * [`unist-util-map`](https://github.com/syntax-tree/unist-util-map)
|
161 | — Create a new tree with all nodes mapped by a given function
|
162 | * [`unist-util-flatmap`](https://gitlab.com/staltz/unist-util-flatmap)
|
163 | — Create a new tree by mapping (to an array) with the given function
|
164 | * [`unist-util-is`](https://github.com/syntax-tree/unist-util-is)
|
165 | — Check if a node passes a test
|
166 | * [`unist-util-remove`](https://github.com/syntax-tree/unist-util-remove)
|
167 | — Remove nodes from trees
|
168 | * [`unist-util-remove-position`](https://github.com/syntax-tree/unist-util-remove-position)
|
169 | — Remove positional info from trees
|
170 | * [`unist-util-visit`](https://github.com/syntax-tree/unist-util-visit)
|
171 | — Recursively walk over nodes
|
172 | * [`unist-util-visit-parents`](https://github.com/syntax-tree/unist-util-visit-parents)
|
173 | — Like `visit`, but with a stack of parents
|
174 | * [`unist-builder`](https://github.com/syntax-tree/unist-builder)
|
175 | — Helper for creating trees
|
176 |
|
177 | ## Contribute
|
178 |
|
179 | See [`contributing.md` in `syntax-tree/.github`][contributing] for ways to get
|
180 | started.
|
181 | See [`support.md`][help] for ways to get help.
|
182 |
|
183 | This project has a [code of conduct][coc].
|
184 | By interacting with this repository, organization, or community you agree to
|
185 | abide by its terms.
|
186 |
|
187 | ## License
|
188 |
|
189 | [MIT][license] © Eugene Sharygin
|
190 |
|
191 |
|
192 |
|
193 | [build-badge]: https://img.shields.io/travis/syntax-tree/unist-util-select.svg
|
194 |
|
195 | [build]: https://travis-ci.org/syntax-tree/unist-util-select
|
196 |
|
197 | [coverage-badge]: https://img.shields.io/codecov/c/github/syntax-tree/unist-util-select.svg
|
198 |
|
199 | [coverage]: https://codecov.io/github/syntax-tree/unist-util-select
|
200 |
|
201 | [downloads-badge]: https://img.shields.io/npm/dm/unist-util-select.svg
|
202 |
|
203 | [downloads]: https://www.npmjs.com/package/unist-util-select
|
204 |
|
205 | [size-badge]: https://img.shields.io/bundlephobia/minzip/unist-util-select.svg
|
206 |
|
207 | [size]: https://bundlephobia.com/result?p=unist-util-select
|
208 |
|
209 | [sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg
|
210 |
|
211 | [backers-badge]: https://opencollective.com/unified/backers/badge.svg
|
212 |
|
213 | [collective]: https://opencollective.com/unified
|
214 |
|
215 | [chat-badge]: https://img.shields.io/badge/chat-discussions-success.svg
|
216 |
|
217 | [chat]: https://github.com/syntax-tree/unist/discussions
|
218 |
|
219 | [npm]: https://docs.npmjs.com/cli/install
|
220 |
|
221 | [license]: license
|
222 |
|
223 | [contributing]: https://github.com/syntax-tree/.github/blob/HEAD/contributing.md
|
224 |
|
225 | [help]: https://github.com/syntax-tree/.github/blob/HEAD/support.md
|
226 |
|
227 | [coc]: https://github.com/syntax-tree/.github/blob/HEAD/code-of-conduct.md
|
228 |
|
229 | [unist]: https://github.com/syntax-tree/unist
|
230 |
|
231 | [node]: https://github.com/syntax-tree/unist#node
|
232 |
|
233 | [support]: #support
|