JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div>
  <div>
    <div>
      <div>
      
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
      
      </div>
    </div>
  </div>
  <div>
    <div>
      <div></div>
      <div id="test">
         Test Element
      </div>
    </div>
  </div>
</div>

JavaScript

function getSiblingPosition(obj) {
    var siblings = obj.parentNode.children;
    var elemCnt = 0;
    for (var i = 0; i < siblings.length; i++){
    	  if (siblings[i] === obj) {
            return elemCnt;
        } else {
            if (siblings[i].nodeType === 1) {
                ++elemCnt;
            }
        }
    }
}

function getPath(obj) {
    var path = "";
    while (obj && obj !== document.body) {
        var cnt = getSiblingPosition(obj);
        path = ".children[" + cnt + "]" + path;
        obj = obj.parentNode;
    }
    path = "document.body" + path;
    return path;
}

log(getPath(document.getElementById("test")));

// utility function to display output
function log(args) {
    var str = "";
    for (var i = 0; i < arguments.length; i++) {
        if (typeof arguments[i] === "object") {
            str += JSON.stringify(arguments[i]);
        } else {
            str += arguments[i];
        }
    }
    var div = document.createElement("div");
    div.innerHTML = str;
    var target = log.id ? document.getElementById(log.id) : document.body;
    target.appendChild(div);
}