1.0.0 • Published 3 years ago
choozy v1.0.0
choozy
choozy is a tiny 331 byte DOM utility that simplifies the selection of multiple elements
Installation
npm i choozyUsage
Given the following HTML
<html>
<body>
<header class="js-header">
<h1 class="js-logo">Logo</h1>
<nav class="js-nav">
<button class="js-button">Menu</button>
<ul class="js-list">
<li class="js-items"></li>
<li class="js-items"></li>
<li class="js-items"></li>
</ul>
</nav>
</header>
<main class="js-main"></main>
<footer class="js-footer"></footer>
</body>
</html>Before choozy
const dom = {
header: document.querySelector('.js-header'),
logo: document.querySelector('.js-logo'),
nav: document.querySelector('.js-nav'),
button: document.querySelector('.js-button'),
list: document.querySelector('.js-list'),
items: [...document.querySelectorAll('.js-items')],
main: document.querySelector('.js-main'),
footer: document.querySelector('.js-footer'),
}After choozy
If multiple elements contain the same suffix, they are collected into an array.
import choozy from 'choozy'
const dom = choozy()Options
The first argument is the container that choozy will query. This is the body element by default.
The second argument is the prefix that will be used to select elements. By default, this is js-
choozy(container = document.body, prefix = 'js-')Inspiration
This package is inspired by query-dom-components