You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

4 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. # css-select [![NPM version](http://img.shields.io/npm/v/css-select.svg)](https://npmjs.org/package/css-select) [![Build Status](https://travis-ci.com/fb55/css-select.svg?branch=master)](http://travis-ci.com/fb55/css-select) [![Downloads](https://img.shields.io/npm/dm/css-select.svg)](https://npmjs.org/package/css-select) [![Coverage](https://coveralls.io/repos/fb55/css-select/badge.svg?branch=master)](https://coveralls.io/r/fb55/css-select)
  2. a CSS selector compiler/engine
  3. ## What?
  4. css-select turns CSS selectors into functions that tests if elements match them.
  5. When searching for elements, testing is executed "from the top", similar to how
  6. browsers execute CSS selectors.
  7. In its default configuration, css-select queries the DOM structure of the
  8. [`domhandler`](https://github.com/fb55/domhandler) module (also known as
  9. htmlparser2 DOM). It uses [`domutils`](https://github.com/fb55/domutils) as its
  10. default adapter over the DOM structure. See Options below for details on
  11. querying alternative DOM structures.
  12. **Features:**
  13. - Full implementation of CSS3 selectors
  14. - Partial implementation of jQuery/Sizzle extensions
  15. - Very high test coverage
  16. - Pretty good performance
  17. ## Why?
  18. The traditional approach of executing CSS selectors, named left-to-right
  19. execution, is to execute every component of the selector in order, from left to
  20. right _(duh)_. The execution of the selector `a b` for example will first query
  21. for `a` elements, then search these for `b` elements. (That's the approach of
  22. eg. [`Sizzle`](https://github.com/jquery/sizzle),
  23. [`nwmatcher`](https://github.com/dperini/nwmatcher/) and
  24. [`qwery`](https://github.com/ded/qwery).)
  25. While this works, it has some downsides: Children of `a`s will be checked
  26. multiple times; first, to check if they are also `a`s, then, for every superior
  27. `a` once, if they are `b`s. Using
  28. [Big O notation](http://en.wikipedia.org/wiki/Big_O_notation), that would be
  29. `O(n^(k+1))`, where `k` is the number of descendant selectors (that's the space
  30. in the example above).
  31. The far more efficient approach is to first look for `b` elements, then check if
  32. they have superior `a` elements: Using big O notation again, that would be
  33. `O(n)`. That's called right-to-left execution.
  34. And that's what css-select does – and why it's quite performant.
  35. ## How does it work?
  36. By building a stack of functions.
  37. _Wait, what?_
  38. Okay, so let's suppose we want to compile the selector `a b` again, for
  39. right-to-left execution. We start by _parsing_ the selector, which means we turn
  40. the selector into an array of the building-blocks of the selector, so we can
  41. distinguish them easily. That's what the
  42. [`css-what`](https://github.com/fb55/css-what) module is for, if you want to
  43. have a look.
  44. Anyway, after parsing, we end up with an array like this one:
  45. ```js
  46. [
  47. { type: "tag", name: "a" },
  48. { type: "descendant" },
  49. { type: "tag", name: "b" },
  50. ];
  51. ```
  52. Actually, this array is wrapped in another array, but that's another story
  53. (involving commas in selectors).
  54. Now that we know the meaning of every part of the selector, we can compile it.
  55. That's where it becomes interesting.
  56. The basic idea is to turn every part of the selector into a function, which
  57. takes an element as its only argument. The function checks whether a passed
  58. element matches its part of the selector: If it does, the element is passed to
  59. the next turned-into-a-function part of the selector, which does the same. If an
  60. element is accepted by all parts of the selector, it _matches_ the selector and
  61. double rainbow ALL THE WAY.
  62. As said before, we want to do right-to-left execution with all the big O
  63. improvements nonsense, so elements are passed from the rightmost part of the
  64. selector (`b` in our example) to the leftmost (~~which would be `c`~~ of course
  65. `a`).
  66. _//TODO: More in-depth description. Implementation details. Build a spaceship._
  67. ## API
  68. ```js
  69. const CSSselect = require("css-select");
  70. ```
  71. **Note:** css-select throws errors when invalid selectors are passed to it,
  72. contrary to the behavior in browsers, which swallow them. This is done to aid
  73. with writing css selectors, but can be unexpected when processing arbitrary
  74. strings.
  75. #### `CSSselect.selectAll(query, elems, options)`
  76. Queries `elems`, returns an array containing all matches.
  77. - `query` can be either a CSS selector or a function.
  78. - `elems` can be either an array of elements, or a single element. If it is an
  79. element, its children will be queried.
  80. - `options` is described below.
  81. Aliases: `default` export, `CSSselect.iterate(query, elems)`.
  82. #### `CSSselect.compile(query, options)`
  83. Compiles the query, returns a function.
  84. #### `CSSselect.is(elem, query, options)`
  85. Tests whether or not an element is matched by `query`. `query` can be either a
  86. CSS selector or a function.
  87. #### `CSSselect.selectOne(query, elems, options)`
  88. Arguments are the same as for `CSSselect.selectAll(query, elems)`. Only returns
  89. the first match, or `null` if there was no match.
  90. ### Options
  91. All options are optional.
  92. - `xmlMode`: When enabled, tag names will be case-sensitive. Default: `false`.
  93. - `rootFunc`: The last function in the stack, will be called with the last
  94. element that's looked at.
  95. - `adapter`: The adapter to use when interacting with the backing DOM
  96. structure. By default it uses the `domutils` module.
  97. - `context`: The context of the current query. Used to limit the scope of
  98. searches. Can be matched directly using the `:scope` pseudo-selector.
  99. - `cacheResults`: Allow css-select to cache results for some selectors,
  100. sometimes greatly improving querying performance. Disable this if your
  101. document can change in between queries with the same compiled selector.
  102. Default: `true`.
  103. #### Custom Adapters
  104. A custom adapter must match the interface described
  105. [here](https://github.com/fb55/css-select/blob/1aa44bdd64aaf2ebdfd7f338e2e76bed36521957/src/types.ts#L6-L96).
  106. You may want to have a look at [`domutils`](https://github.com/fb55/domutils) to
  107. see the default implementation, or at
  108. [`css-select-browser-adapter`](https://github.com/nrkn/css-select-browser-adapter/blob/master/index.js)
  109. for an implementation backed by the DOM.
  110. ## Supported selectors
  111. _As defined by CSS 4 and / or jQuery._
  112. - [Selector lists](https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list)
  113. (`,`)
  114. - [Universal](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors)
  115. (`*`)
  116. - [Type](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors)
  117. (`<tagname>`)
  118. - [Descendant](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator)
  119. (` `)
  120. - [Child](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator)
  121. (`>`)
  122. - Parent (`<`)
  123. - [Adjacent sibling](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator)
  124. (`+`)
  125. - [General sibling](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator)
  126. (`~`)
  127. - [Attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
  128. (`[attr=foo]`), with supported comparisons:
  129. - `[attr]` (existential)
  130. - `=`
  131. - `~=`
  132. - `|=`
  133. - `*=`
  134. - `^=`
  135. - `$=`
  136. - `!=`
  137. - Also, `i` can be added after the comparison to make the comparison
  138. case-insensitive (eg. `[attr=foo i]`)
  139. - Pseudos:
  140. - [`:not`](https://developer.mozilla.org/en-US/docs/Web/CSS/:not)
  141. - [`:contains`](https://api.jquery.com/contains-selector)
  142. - `:icontains` (case-insensitive version of `:contains`)
  143. - [`:has`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)
  144. - [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root)
  145. - [`:empty`](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty)
  146. - [`:parent`](https://api.jquery.com/parent-selector)
  147. - [`:first-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child),
  148. [`:last-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child),
  149. [`:first-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type),
  150. [`:last-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type)
  151. - [`:only-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type),
  152. [`:only-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child)
  153. - [`:nth-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child),
  154. [`:nth-last-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child),
  155. [`:nth-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type),
  156. [`:nth-last-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type),
  157. - [`:link`](https://developer.mozilla.org/en-US/docs/Web/CSS/:link),
  158. [`:any-link`](https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link)
  159. - [`:visited`](https://developer.mozilla.org/en-US/docs/Web/CSS/:visited),
  160. [`:hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover),
  161. [`:active`](https://developer.mozilla.org/en-US/docs/Web/CSS/:active)
  162. (these depend on optional `Adapter` methods, so these will only match
  163. elements if implemented in `Adapter`)
  164. - [`:selected`](https://api.jquery.com/selected-selector),
  165. [`:checked`](https://developer.mozilla.org/en-US/docs/Web/CSS/:checked)
  166. - [`:enabled`](https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled),
  167. [`:disabled`](https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled)
  168. - [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/:required),
  169. [`:optional`](https://developer.mozilla.org/en-US/docs/Web/CSS/:optional)
  170. - [`:header`](https://api.jquery.com/header-selector),
  171. [`:button`](https://api.jquery.com/button-selector),
  172. [`:input`](https://api.jquery.com/input-selector),
  173. [`:text`](https://api.jquery.com/text-selector),
  174. [`:checkbox`](https://api.jquery.com/checkbox-selector),
  175. [`:file`](https://api.jquery.com/file-selector),
  176. [`:password`](https://api.jquery.com/password-selector),
  177. [`:reset`](https://api.jquery.com/reset-selector),
  178. [`:radio`](https://api.jquery.com/radio-selector) etc.
  179. - [`:is`](https://developer.mozilla.org/en-US/docs/Web/CSS/:is), plus its
  180. legacy alias `:matches`
  181. - [`:scope`](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope)
  182. (uses the context from the passed options)
  183. ---
  184. License: BSD-2-Clause
  185. ## Security contact information
  186. To report a security vulnerability, please use the
  187. [Tidelift security contact](https://tidelift.com/security). Tidelift will
  188. coordinate the fix and disclosure.
  189. ## `css-select` for enterprise
  190. Available as part of the Tidelift Subscription
  191. The maintainers of `css-select` and thousands of other packages are working with
  192. Tidelift to deliver commercial support and maintenance for the open source
  193. dependencies you use to build your applications. Save time, reduce risk, and
  194. improve code health, while paying the maintainers of the exact dependencies you
  195. use.
  196. [Learn more.](https://tidelift.com/subscription/pkg/npm-css-select?utm_source=npm-css-select&utm_medium=referral&utm_campaign=enterprise&utm_term=repo)