choozy is a tiny 331 byte DOM utility that simplifies the selection of multiple elements
npm i choozy
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>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'),
}If multiple elements contain the same suffix, they are collected into an array.
import choozy from 'choozy'
const dom = choozy()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-')This package is inspired by query-dom-components