JSFiddle - React, Tailwind, and code Playground

by ChaseWest

HTML

<div id="parentDIV">
    <ul id="outerUL">
        <li></li>
        <li class="selected"></li>
        <li class="selected"></li>
        <li></li>
        <li></li>
        <li></li>
        <li>
            <div>
                <ul id="innerUL">
                    <li></li>
                    <li></li>
                    <li class="selected"></li>
                    <li class="selected"></li>
                    <li></li>
                    <li class="selected"></li>
                    <li></li>
                </ul>
            </div>
        </li>
    </ul>
</div>

JavaScript

var jsc = (function(window, document, undefined){

    _cache = {};

    function cache(selector, parent, all){
        var key = _generateKey();
        all = !!all;
        parent = !!parent ? parent : document;
        _cache[key] = all ? parent.querySelectorAll(selector) : parent.querySelector(selector);

        return key;

    }

    function get(key){
        return _cache[key];
    }

    function _generateKey(){
        return Math.random().toString(36).slice(2);
    }

    return{
        cache: cache,
        get: get
    }; 

})(window, document);

  //grab the ul with id innerUL, store it in _cache and return the key for that object
  var ulKey = jsc.cache("ul#innerUL");

  //get all the li with class selected within the cached ul above
  var liKey = jsc.cache("li.selected", jsc.get(ulKey), true);  

  //Get the DOM node(s) that were cached above
  var ul = jsc.get(ulKey);
  var li = jsc.get(liKey);

  console.log(ul);
  console.log(li);