JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<ul id="test" class="foo">
    <li class="foo a">A</li>
    <ul>
        <li class="bar b">B</li>
        <ul>
            <li class="foo d">D</li>
            <ul>
                <li class="foox i">I</li>
                <li class="foo j">J</li>
            </ul>
            <li class="foo e">E</li>
            <li class="fooz f">F</li>
            <li class="fooz g">G</li>
            <ul>
                <li class="foo k">K</li>
                <li class="foox l">L</li>
                <li><span class="foo">M</span></li>
            </ul>
            <li class="foo h">H</li>
        </ul>
        <li class="foo c">C</li>
    </ul>
</ul>

CSS

li.foo,
span.foo {
  color: red;
}

JavaScript

function _getElementsByClassName2(node, name, results) {
  var elements = node.children;
  
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    if (_.contains(element.classList, name)) {
      results.push(element);
    }
    _getElementsByClassName2(element, name, results);
  }
}

function getElementsByClassName2(node, name) {
  var results = [];
  
  if (node == null) {
    return results;
  }
  if (_.contains(node.classList, name)) {
    results.push(node);
  }
  _getElementsByClassName2(node, name, results);
  return results;
}

var ul = document.getElementById("test");
var li = getElementsByClassName2(ul, "foo");
console.log(li.map(function(element) { return element.innerHTML }));