JSFiddle - React, Tailwind, and code Playground

by aramk

HTML

<div id="root">
  <div id="first"></div>
  <div id="second">
    <div id="second-first"></div>
    <div id="second-second"></div>
    <div id="second-third"></div>
  </div>
  <div id="third"></div>
</div>

JavaScript

function getPathToRoot(node, root) {
	console.log(node);
  let currentNode = node;
  const path = [];
  while (currentNode && currentNode !== root) {
  	const parent = currentNode.parentNode;
    if (parent) {
	    const index = getChildren(parent).indexOf(currentNode);
    	path.push(index);
    }
	  currentNode = parent;
  }
  return path;
}

function getChildren(parent) {
  return Array.from(parent.childNodes.values());
}

console.log(getPathToRoot(document.getElementById('second-second'), document.getElementById('root')));