tealight

tealight

ES2015 module for DOM queries.

Installation

Browser

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

<script src="https://unpkg.com/tealight"></script>

This will create the global variable tealight.

Module

$ npm install tealight

CommonJS

const tealight = require('tealight')

ES2015

import tealight from 'tealight'

Usage

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

tealight(target) => Array<Node>

For the examples below, assume we have this HTML fragment to query against:

<div id="jar">
	<div class="chocolate-chip cookie"></div>
	<div class="peanut-butter cookie"></div>
	<div class="short-bread cookie"></div>
</div>

tealight(String<Selector>)

String arguments will be used as DOM query selectors.

tealight('#jar')
// => [ <div#jar> ]

tealight('.cookie')
// => [ <div.chocolate-chip.cookie>, <div.peanut-butter.cookie>, <div.short-bread.cookie> ]

Keep in mind that document.querySelectorAll throws an error when passed an invalid selector (requiring a try/catch block), whereas tealight will swallow the error and return an empty array.

tealight(Node)

Node arguments will be wrapped in an Array.

const node = document.querySelector('#jar')

tealight(node)
// => [ <div#jar> ]

tealight(NodeList)

NodeList arguments will be converted to Array.

const nodeList = document.querySelectorAll('.cookie')

tealight(nodeList)
// => [ <div.chocolate-chip.cookie>, <div.peanut-butter.cookie>, <div.short-bread.cookie> ]

tealight(Array)

Array arguments will be filtered, leaving only Node items.

const node = document.querySelector('#jar')
const array = [node, null, '.cookie']

tealight(array)
// => [ <div#jar> ]

Even though .cookie is a valid selector that could match elements in our DOM, it is pruned from the source node array just like any other foreign types (i.e. null in this case as well); no matter what is implied, if it's not a Node, it will be removed.

© 2018 FISSSION, LLC.
Open source under the MIT License.

Changelog

[0.3.0] - 2018-01-12

Changed

• Refactor ES module distribution with exteral dependencies.
• Add usage instructions to readme.