| 1 | # [NWSAPI](http://dperini.github.io/nwsapi/)
|
|---|
| 2 |
|
|---|
| 3 | Fast CSS Selectors API Engine
|
|---|
| 4 |
|
|---|
| 5 |    
|
|---|
| 6 |
|
|---|
| 7 | NWSAPI is the development progress of [NWMATCHER](https://github.com/dperini/nwmatcher) aiming at [Selectors Level 4](https://www.w3.org/TR/selectors-4/) conformance. It has been completely reworked to be easily extended and maintained. It is a right-to-left selector parser and compiler written in pure Javascript with no external dependencies. It was initially thought as a cross browser library to improve event delegation and web page scraping in various frameworks but it has become a popular replacement of the native CSS selection and matching functionality in newer browsers and headless environments.
|
|---|
| 8 |
|
|---|
| 9 | It uses [regular expressions](https://en.wikipedia.org/wiki/Regular_expression) to parse CSS selector strings and [metaprogramming](https://en.wikipedia.org/wiki/Metaprogramming) to transforms these selector strings into Javascript function resolvers. This process is executed only once for each selector string allowing memoization of the function resolvers and achieving unmatched performances.
|
|---|
| 10 |
|
|---|
| 11 | ## Installation
|
|---|
| 12 |
|
|---|
| 13 | To include NWSAPI in a standard web page:
|
|---|
| 14 |
|
|---|
| 15 | ```html
|
|---|
| 16 | <script type="text/javascript" src="nwsapi.js"></script>
|
|---|
| 17 | ```
|
|---|
| 18 |
|
|---|
| 19 | To include NWSAPI in a standard web page and automatically replace the native QSA:
|
|---|
| 20 |
|
|---|
| 21 | ```html
|
|---|
| 22 | <script type="text/javascript" src="nwsapi.js" onload="NW.Dom.install()"></script>
|
|---|
| 23 | ```
|
|---|
| 24 |
|
|---|
| 25 | To use NWSAPI with Node.js:
|
|---|
| 26 |
|
|---|
| 27 | ```
|
|---|
| 28 | $ npm install nwsapi
|
|---|
| 29 | ```
|
|---|
| 30 |
|
|---|
| 31 | NWSAPI currently supports browsers (as a global, `NW.Dom`) and headless environments (as a CommonJS module).
|
|---|
| 32 |
|
|---|
| 33 |
|
|---|
| 34 | ## Supported Selectors
|
|---|
| 35 |
|
|---|
| 36 | Here is a list of all the CSS2/CSS3/CSS4 [Supported selectors](https://github.com/dperini/nwsapi/wiki/CSS-supported-selectors).
|
|---|
| 37 |
|
|---|
| 38 |
|
|---|
| 39 | ## Features and Compliance
|
|---|
| 40 |
|
|---|
| 41 | You can read more about NWSAPI [features and compliance](https://github.com/dperini/nwsapi/wiki/Features-and-compliance) on the wiki.
|
|---|
| 42 |
|
|---|
| 43 |
|
|---|
| 44 | ## API
|
|---|
| 45 |
|
|---|
| 46 | ### DOM Selection
|
|---|
| 47 |
|
|---|
| 48 | #### `ancestor( selector, context, callback )`
|
|---|
| 49 |
|
|---|
| 50 | Returns a reference to the nearest ancestor element matching `selector`, starting at `context`. Returns `null` if no element is found. If `callback` is provided, it is invoked for the matched element.
|
|---|
| 51 |
|
|---|
| 52 | #### `first( selector, context, callback )`
|
|---|
| 53 |
|
|---|
| 54 | Returns a reference to the first element matching `selector`, starting at `context`. Returns `null` if no element matches. If `callback` is provided, it is invoked for the matched element.
|
|---|
| 55 |
|
|---|
| 56 | #### `match( selector, element, callback )`
|
|---|
| 57 |
|
|---|
| 58 | Returns `true` if `element` matches `selector`, starting at `context`; returns `false` otherwise. If `callback` is provided, it is invoked for the matched element.
|
|---|
| 59 |
|
|---|
| 60 | #### `select( selector, context, callback )`
|
|---|
| 61 |
|
|---|
| 62 | Returns an array of all the elements matching `selector`, starting at `context`; returns empty `Array` otherwise. If `callback` is provided, it is invoked for each matching element.
|
|---|
| 63 |
|
|---|
| 64 |
|
|---|
| 65 | ### DOM Helpers
|
|---|
| 66 |
|
|---|
| 67 | #### `byId( id, from )`
|
|---|
| 68 |
|
|---|
| 69 | Returns a reference to the first element with ID `id`, optionally filtered to descendants of the element `from`.
|
|---|
| 70 |
|
|---|
| 71 | #### `byTag( tag, from )`
|
|---|
| 72 |
|
|---|
| 73 | Returns an array of elements having the specified tag name `tag`, optionally filtered to descendants of the element `from`.
|
|---|
| 74 |
|
|---|
| 75 | #### `byClass( class, from )`
|
|---|
| 76 |
|
|---|
| 77 | Returns an array of elements having the specified class name `class`, optionally filtered to descendants of the element `from`.
|
|---|
| 78 |
|
|---|
| 79 |
|
|---|
| 80 | ### Engine Configuration
|
|---|
| 81 |
|
|---|
| 82 | #### `configure( options )`
|
|---|
| 83 |
|
|---|
| 84 | The following is the list of currently available configuration options, their default values and descriptions, they are boolean flags that can be set to `true` or `false`:
|
|---|
| 85 |
|
|---|
| 86 | * `IDS_DUPES`: true - true to allow using multiple elements having the same id, false to disallow
|
|---|
| 87 | * `LIVECACHE`: true - true for caching both results and resolvers, false for caching only resolvers
|
|---|
| 88 | * `MIXEDCASE`: true - true to match tag names case insensitive, false to match using case sensitive
|
|---|
| 89 | * `LOGERRORS`: true - true to print errors and warnings to the console, false to mute both of them
|
|---|
| 90 |
|
|---|
| 91 |
|
|---|
| 92 | ### Examples on extending the basic functionalities
|
|---|
| 93 |
|
|---|
| 94 | #### `configure( { <configuration-flag>: [ true | false ] } )`
|
|---|
| 95 |
|
|---|
| 96 | Disable logging errors/warnings to console, disallow duplicate ids. Example:
|
|---|
| 97 |
|
|---|
| 98 | ```js
|
|---|
| 99 | NW.Dom.configure( { LOGERRORS: false, IDS_DUPES: false } );
|
|---|
| 100 | ```
|
|---|
| 101 | NOTE: NW.Dom.configure() without parameters return the current configuration.
|
|---|
| 102 |
|
|---|
| 103 | #### `registerCombinator( symbol, resolver )`
|
|---|
| 104 |
|
|---|
| 105 | Registers a new symbol and its matching resolver in the combinators table. Example:
|
|---|
| 106 |
|
|---|
| 107 | ```js
|
|---|
| 108 | NW.Dom.registerCombinator( '^', 'e.parentElement' );
|
|---|
| 109 | ```
|
|---|
| 110 |
|
|---|
| 111 | #### `registerOperator( symbol, resolver )`
|
|---|
| 112 |
|
|---|
| 113 | Registers a new symbol and its matching resolver in the attribute operators table. Example:
|
|---|
| 114 |
|
|---|
| 115 | ```js
|
|---|
| 116 | NW.Dom.registerOperator( '!=', { p1: '^', p2: '$', p3: 'false' } );
|
|---|
| 117 | ```
|
|---|
| 118 |
|
|---|
| 119 | #### `registerSelector( name, rexp, func )`
|
|---|
| 120 |
|
|---|
| 121 | Registers a new selector, the matching RE and the resolver function, in the selectors table. Example:
|
|---|
| 122 |
|
|---|
| 123 | ```js
|
|---|
| 124 | NW.Dom.registerSelector('Controls', /^\:(control)(.*)/i,
|
|---|
| 125 | (function(global) {
|
|---|
| 126 | return function(match, source, mode, callback) {
|
|---|
| 127 | var status = true;
|
|---|
| 128 | source = 'if(/^(button|input|select|textarea)/i.test(e.nodeName)){' + source + '}';
|
|---|
| 129 | return { 'source': source, 'status': status };
|
|---|
| 130 | };
|
|---|
| 131 | })(this));
|
|---|
| 132 | ```
|
|---|