$select utility

$select is a unified utility to access the DOM. It accesses single and multiple elements with JavaScript. $select returns an element or an array of found elements but returns undefined for any element not found. It supports all CSS selectors.

It's like import for DOM.

$select('selector(s)');

Quick demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="root">
      <div class="audio"></div>
      <div class="post"></div>
      <div class="post"></div>
      <div class="post"></div>
      <div class="post"></div>
      <div class="comment"></div>
      <div class="comment"></div>
      <div class="comment"></div>
      <div class="comment"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@codingnninja/render/dist/umd/bundle.min.js"></script>
    <script>
      const { $select } = render;
      const [audio, posts, comments] = $select(".audio, .post, .comment");
      console.log(audio);
      posts.map((post) => console.log(post));
      comments.map((comment) => console.log(comment));
    </script>
  </body>
</html>

Playground

ℹ️

Note: always make sure selectors are separated by commas and destructured variables should correspond to the selectors.

Select single element

const audio = $select('#audio');
console.log(audio);

Select grouped elements

Elements selected with a class, tag and other group selectors are grouped into an array.

const posts = $select('.post');
posts.map(post => console.log(post));

Select multiple elements

Select multiple elements including single and grouped elements.

const [audio, posts, comments] = $select('#audio, .post, .comment');
 
console.log(audio);
 
posts.map(post => console.log(post));
 
comments.map(comment => console.log(comment));

Selection with attributes

const [logo, article] = $select('a[class~="logo"], [article]');

Selection with psuedo-selectors

const [activeSong, queuedSongs] = $select('.audio:is(.playing), .audio:not(.playing)');

A more complex selection

const [
    posts,
    comments,
    audios,
    features
    articles,
    navs,
    queuedSongs
] = $select('posts, comments, .audios, #features>.feature, [article], .nav, .audio:not(.playing)');

Handling variable re-assignment with $select

It is recommended to use $select with const until you need to re-assign a variable. Then, you can select such a variable separately using $select and let.

const [audio, posts, comments] = $select('#audio, .post, .comment');

So when you need to re-assign the audio element, you can re-write the code snippet.

let audio = $select('#audio');
const [posts, comments] = $select('.post, .comment');

Going with const and $select by default helps to avoid unnecessary bugs.

$select is a unified utility to access the DOM.

Handling self-selection in a component

Self-selection is when a componet selects an element within itself. Self-selection will return undefined in the first rendering because the elements selected won't be available in the DOM.

So, it is necessary to check if the selected elements are available whenever a component self-select.

const Volume = (song) => {
  const volumeBtn = $select('#volumeBtn');
  if(volumeBtn){
    // use volumeBtn here
  }
  // the rest of the component without using audio
}

Click to check the common errors in using $select.

$render $trigger