- Notifications
You must be signed in to change notification settings - Fork1
A tiny library that gives arrays rather than NodeLists from DOM queries
License
artcommacode/q
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A tiny library to be used withbrowserify (orwebpack) that returns arrays rather than NodeLists from DOM queries and allows for composable queries.
$ npm install @artcommacode/q --saveq wrapsquerySelectorAll into two exported functions;query, which returns arrays rather than NodeLists andqueryOne, which returns a single element.
import{query,queryOne}from'@artcommacode/q'query('ul li')// => [ <li>...</li>, <li>...</li>, <li>...</li> ]query('ul li')[0].textContent// => $1queryOne('ul li')// => <li>...</li>queryOne('ul li')===query('ul li')[0]// => true
You can compose queries by passing an element as the second argument:
constul=queryOne('ul')query('li',ul)// => [ <li>...</li>, <li>...</li>, <li>...</li> ]
query will return an empty array if no elements are found andqueryOne will returnundefined:
query('ul div')// => []queryOne('ul div')// => undefined
q will throw an error if you try to run a query on an element that doesn't exist:
constli='not_an_element'query('div',li)// => Error: "not_an_element" does't exist in the document
q is only 20 lines short, small enough to fit in this README:
consttoArray=<T>(list: Iterable<T>): T[] =>[...list]constfirst=<T>(xs: T[]): T =>xs[0]constelemError=(e:mixed):void=>{thrownewError(`"${String(e)}" does\'t exist in the document`)}constgetRoot=(e?:HTMLElement): ?(Document|HTMLElement)=>(!e ?document :(document&&document.body&&document.body.contains(e) ?e :elemError(e)))exportconstquery=(q:string,e?:HTMLElement):HTMLElement[]=>{ constroot=getRoot(e)returnroot ?toArray(root.querySelectorAll(q)) :[]}exportconstqueryOne=(q:string,e?:HTMLElement): ?HTMLElement=>(first(query(q,e)))
A couple things to note here:
- I'm usingflow for static type checking.
- q doesn't shim
querySelectorAlland as such is meant for modern (post IE7 or post IE8 if you're using CSS 3 selectors) browsers.
$ npm install && npm testThis will open a tab in your browser to run tests againsttest/index.html with the results displayed in your terminal. If you see# ok then it all went well, if there are any errors please submit anissue.
The 2.0 release of q is a complete rewrite, if you're still using 1.0 you can find the previous docshere.