tealight

DOM queries that always return an array.

Introduction

Modern browsers enable us to perform DOM queries natively, e.g:

``js
let cookies = document.querySelectorAll(".cookie");
`

But we all want to loop over the returned elements. So in practice, we’ve got to do a little more work, particularly converting the resulting NodeList to an array, e.g:

`js
let cookies;
try {
let query = document.querySelectorAll(".cookie");
cookies = Array.prototype.slice.call(query);
} catch (err) {
console.error(err.message);
}

cookies.forEach(cookie => {
// ...
});
`

Tealight provides a familiar API to perform native queries, without the extra work.

`js
tealight(".cookie").forEach(cookie => {
// ...
});
`







Installation

$3

A simple and fast way to get started is to include this script on your page:

`html

`

This will create the global variable tealight.

$3

`bash
$ npm install tealight
`

#### CommonJS

`js
const tealight = require("tealight");
`

#### ES2015

`js
import tealight from "tealight";
`







Usage

tealight accepts a single argument target and will always return an array of 0 or more DOM nodes.

For the examples below, we will query against this HTML fragment:

`html



`

$3

string targets will be used as CSS selectors.

`js
tealight("#jar");
// => [ ]
`

`js
tealight(".cookie");
// => [ , , ]
`




$3

HTMLElement targets will simply be wrapped in an Array

`js
const node = document.querySelector("#jar");

tealight(node);
// => [ ]
`




$3

HTMLCollection arguments will be converted to Array.

`js
const nodeList = document.querySelectorAll(".cookie");

tealight(nodeList);
// => [ , , ]
`




$3

Array targets will be filtered, leaving only HTMLElement

`js
let node = document.querySelector("#jar");
let array = [node, null, ".cookie"];

tealight(array);
// => [ ]
``

---

Copyright 2018 Fisssion LLC.


Open source under the MIT License.