- 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.
About
A tiny library that gives arrays rather than NodeLists from DOM queries
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.