Querel

Utility for querying DOM elements.

Installation

With npm:

npm i querel

Usage

The Query class provides a chainable API for querying elements. It's reminiscent of jQuery:

import { Query } from 'querel'

var element = document.getElementById('foo')
var query = new Query(element)
var result = query
  .parent(2)        // grandparent of `element`
  .sibling()        // next sibling
  .children()       // all child elements
  .child(3)         // third child of all elements
  .select('.test')  // elements with class `test` in matched elements

console.log(result.elements) // Array of resulting elements

Interpreter

It might be more comfortable to use the query interpreter via parse():

import parse from 'querel'

var element = document.getElementById('foo')
var result = parse(element, '@parent(2).sibling.children.child(3).select(.test)')

This could be useful when the input value comes from somewhere else as it can handle all those cases:

parse(null)               // falsy value
parse(document.body)      // Element
parse('div#foo')          // CSS selector
parse('div#foo@sibling')  // CSS selector + query

If you have a defined starting element, you specify it as the first argument and the foreign input as second:

parse(element, null)                // element
parse(element, document.body)       // element
parse(element, 'div#foo')           // result of CSS selector on element
parse(element, '@sibling')          // sibling of element
parse(element, 'div#foo@sibling')   // sibling of div#foo

The return value of parse() is always an array containing the resulting elements. This allows you to get consistent results from various inputs. For example, if you're interested in a single element of the resulting query:

parse(null)[0]           // undefined
parse(document.body)[0]  // Element
parse('.many')[0]        // Element
parse('#foo@parent')[0]  // Element