Skip to content

Latest commit

 

History

History
76 lines (56 loc) · 1.64 KB

README.md

File metadata and controls

76 lines (56 loc) · 1.64 KB

choozy

choozy is a tiny 331 byte DOM utility that simplifies the selection of multiple elements

Installation

npm i choozy

Usage

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

License

MIT License © Mike Wagz