Get By Classname Hierarchy

<div id="root">
  <div class="a" id="a-1">
    <div class="b" id="b-1">
      <div class="c" id="c-1"></div>
      <div class="c" id="c-2">
        <div class="a" id="a-2">
          <div class="c" id="c-3"></div>
        </div>
      </div>
    </div>
    <div class="c" id="c-4"></div>
  </div>
</div>

const root = document.getElementById("root");

function getByClassnameHierarchy(root, classNames) {
  const results = [];
  const classes = classNames.split(">");
  traverseDOM(root, classes, 0, results);
  return results;
}

function traverseDOM(element, classNames, index, results) {
  if (!element) {
    return;
  }
  const targetClass = classNames[index];
  if (
    index === classNames.length - 1 &&
    element.classList.contains(targetClass)
  ) {
    results.push(element);
    return;
  }

  for (let child of element.children) {
    if (element.classList.contains(targetClass)) {
      traverseDOM(child, classNames, index + 1, results);
    } else {
      traverseDOM(child, classNames, 0, results);
    }
  }
}

console.log(getByClassnameHierarchy(root, "a>b"));
console.log(getByClassnameHierarchy(root, "a>c"));
console.log(getByClassnameHierarchy(root, "a>b>c"));

// [div#b-1.b]
// [div#c-3.c, div#c-4.c]
// [div#c-1.c, div#c-2.c]