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.

59 lines
1.8 KiB

4 years ago
  1. # bianco.query
  2. [![Build Status][travis-image]][travis-url]
  3. [![NPM version][npm-version-image]][npm-url]
  4. [![NPM downloads][npm-downloads-image]][npm-url]
  5. [![MIT License][license-image]][license-url]
  6. Modern DOM query selectors helpers written in es2015
  7. ## Usage
  8. ```js
  9. import $ from 'bianco.query'
  10. const footer = document.querySelector('.main-footer')
  11. const header = document.querySelector('.main-header')
  12. // convert DOM nodes to arrays
  13. $(footer)
  14. .concat($(header))
  15. .forEach(el => el.classList.add('fade-in'))
  16. // handle DOM queries
  17. $('h1', 'main').forEach(h1 => h1.classList.add('main-title'))
  18. ```
  19. [travis-image]: https://img.shields.io/travis/biancojs/query.svg?style=flat-square
  20. [travis-url]: https://travis-ci.org/biancojs/query
  21. [license-image]: http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
  22. [license-url]: LICENSE.txt
  23. [npm-version-image]: http://img.shields.io/npm/v/bianco.query.svg?style=flat-square
  24. [npm-downloads-image]: http://img.shields.io/npm/dm/bianco.query.svg?style=flat-square
  25. [npm-url]: https://npmjs.org/package/bianco.query
  26. ## API
  27. <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
  28. #### Table of Contents
  29. - [$](#)
  30. - [Parameters](#parameters)
  31. ### $
  32. Simple helper to find DOM nodes returning them as array like loopable object
  33. #### Parameters
  34. - `selector` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | DOMNodeList)** either the query or the DOM nodes to arraify
  35. - `ctx` **[HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element)** context defining where the query will search for the DOM nodes
  36. Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)** DOM nodes found as array