Query

Utility for querying DOM elements, used in the Watcher.

# Class

The Query class provides a chainable API for querying elements:

import { Query } from 'oblik/utils/query'

let el = document.querySelector('.some-element')
let query = new Query(el)
let result = query
    .parent(2)        // grandparent of `element`
    .sibling()        // next sibling
    .children()       // all child elements
    .child(3)         // third child of all elements
    .select('.test')  // matched elements with class `test`

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

# Interpreter

There's a simple syntax for using the Query utility with plain text:

import parse from 'oblik/utils/query'

let el = document.querySelector('.some-element')
let result = parse(
    element,
    '@parent(2).sibling.children.child(3).select(.test)'
)

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

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')         // CSS selector
parse(element, '@sibling')        // sibling of element
parse(element, 'div#foo@sibling') // sibling of div#foo (`element` is ignored)

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

Class
Interpreter