JSFiddle - React, Tailwind, and code Playground

by asdf

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

// 1st getByClassName(document.getElementById('root'), 'a')
// 2nd. getByChildClassName(document.getElementById('root'), 'a > b > c')

function getByClassName(root, className) {
	var classes = className.split('>');
  var elmArr = [root];
  var childArr;
  var i = 0;
  var j, k, temp;
  while (i < classes.length) {
  	childArr = [];
  	for (j =0; j<elmArr.length; j++) {
    	temp = elmArr[j].getElementsByClassName(classes[i]);
      for (k=0; k<temp.length; k++) {
      	childArr.push(temp[k]);
      }
    }
    elmArr = childArr;
    if (!elmArr.length) {
    	break;
    }
  	i++;
  }
  return childArr;
}

console.log(getByClassName(document.getElementById('root'), 'a'));
console.log(getByClassName(document.getElementById('root'), 'a>b>c'));
console.log(getByClassName(document.getElementById('root'), 'a>d'));
console.log(getByClassName(document.getElementById('root'), 'b>a>d'));