quick-selector v1.0.10

Quick selector

Syntactic sugar for querySelector, querySelectorAll, & addEventListener allowing you to select, modify, and add event listeners for multiple elements in one line of code. Tiny package (<1KB GZIP). All Javascript events are supported.

Install

Node

npm install quick-selector

import qs from 'quick-selector'
// or
const qs = require('quick-selector')

Browser

<script src="https://unpkg.com/quick-selector/dist/qs.js"></script>

Usage

Selecting

Selecting <div class="box"> elements, use any CSS selectors:

const boxes = qs`div.box`

This always returns an array of elements, not just one element.

Events

Adding and removing click event listener:

const clickEvent = () => console.log('Clicked!')
qs`#custom-button`.click(clickEvent)

Removing event listener:

qs`#custom-button`.remove.click(clickEvent)

Filtering

Selecting only .element elements with the innerHTML value of 'Apples':

const filtered = qs`.subtitle`.filter(element => element.innerHTML === 'Apples')

Selecting only the first .subtitle element and adding a class (only(0) returns the first selected element, only(1) returns the second, etc.):

qs`.subtitle`.only(0).set(element => element.classList.add = 'first-subtitle')

Setting & getting

Setting text colour of elements to red:

qs`p`.set(el => el.style.color = 'red')

Getting an array containing the text content of each <p> element:

const paragraphText = qs`p`.get(el => el.textContent)

Modifying vanilla-selected elements

Adding a blur event to a list of elements selected with querySelectorAll:

const elementList = document.querySelectorAll('input')
qs(elementList).blur(event => console.log(`${event.target} lost focus`))

Comparison

Selecting and adding two event listeners

// Quick selector
qs`input.email`.input(ev => console.log(ev.target.value)).click(ev => ev.target.value = '')

// Vanilla JS
const emailInput = document.querySelectorAll('input.email')
for (const input of emailInput) {
  input.addEventListener('input', ev => {
    console.log(ev.target.value)
  })
  input.addEventListener('click', ev => {
    ev.target.value = ''
  })
}

Selecting, filtering selection, adding event listener, setting text colour

const clickFunc = () => console.log("I've been clicked")

// Quick selector
qs`p.text`.filter(el => el.innerHTML.startsWith('Hello')).click(clickFunc).set(el => el.style.color = 'red')

// Vanilla
const textBox = document.querySelectorAll('p.text')
for (const box of textBox) {
  if (box.innerHTML.startsWith('Hello')) {
    box.addEventListener('click', clickFunc)
    box.style.color = 'red'
  }
}

Adding a change event to every other textarea, from the second

// Quick selector
qs`textarea`.filter((el, index) => index % 2).change(ev => ev.target.value = 'Changed')

// Vanilla
const textareas = querySelectorAll('textarea')
for (i = 0; i < textareas.length; i++) {
  if (i % 2) {
    textareas[i].addEventListener('change', ev => {
      ev.target.value = 'Changed'
    })
  }
}

// Vanilla functional
const textareas = Array.from(querySelectorAll('textarea'))
textareas.filter((el, index) => index % 2).forEach(el => {
  el.addEventListener('change', ev => {
    ev.target.value = 'Changed'
  })
})

API

Query function

Query function methods

Note: All Array methods work, but the above methods all return a templated quick-select array (apart from .get()), and can be used with method chaining.