JSFiddle - React, Tailwind, and code Playground

by eelyafi

HTML

<div id="root" class="a">
    <div class="b">
        <div class="a">
             <div class="d"></div>
        </div>
        <div class="c">
            <div class="a">
                 <div class="d"></div>
            </div>
        </div>
    </div>
</div>

JavaScript

function match (node, className) {
  return node && node.className.indexOf(className) != -1;
}


function getByClassnameHierarchy(node, names, type) {
  
  if (typeof names == 'string') {
    names = names.split(' > ');
  }

  var res = [];
  var children = node.children;
  var ln = children.length;

  
  if (!names.length) {
    return [];
  }
  
  console.log(node.outerHTML, names);
//  debugger;
  if (names.length == 1 && match(node, names[0])) {
    return [node];  
  }
  
  if (match(node, names[0])) {
    for (var i = 0; i < ln; i++) {
      res = res.concat(getByClassnameHierarchy(children[i], names.slice(1)));
    }  
  } else {
  	for (var i = 0; i < ln; i++) {
      res = res.concat(getByClassnameHierarchy(children[i], names));
    }  
  }
  
  return res;
}

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