JSFiddle - React, Tailwind, and code Playground

by Luis Perez

HTML

<span>Click anywhere to get information about that element:</span>
<div class="container" title="DivA">
    DivA
    <div id="DivB" title="#DivB">
        #DivB
        <div title="DivC (div)">
            DivC (div)
        </div>
        <span title="SpanD (span)">
            SpanD (span)
            <ul>
                <li title="Bullet 1">Bullet 1</li>
                <li id="bullet2" title="Bullet 2">Bullet 2 (#bullet2)</li>
                <li title="Bullet 3">Bullet 3</li>
            </ul>
        </span>
    </div>
</div>
<span id="message"></span>

CSS

.container, .container div, .container span {
    padding: 5px;
    margin: 5px;
    border: 1px solid gray;
    display: block;
}

JavaScript

document.onclick= function(event) {
    if (event===undefined) event= window.event;                     // IE hack
    var target= 'target' in event? event.target : event.srcElement; // another IE hack

    var root= document.compatMode==='CSS1Compat'? document.documentElement : document.body;
    var mxy= [event.clientX+root.scrollLeft, event.clientY+root.scrollTop];

    var path= getPathTo(target);
    var txy= getPageXY(target);
    var message = 'You clicked the element '+path+' at offset '+(mxy[0]-txy[0])+', '+(mxy[1]-txy[1]);
    document.getElementById("message").innerText = message;
}

function getPathTo(element) {
    if (element.id!=='')
        return "//*[@id='"+element.id+"']";
    
    if (element===document.body)
        return element.tagName.toLowerCase();

    var ix= 0;
    var siblings= element.parentNode.childNodes;
    for (var i= 0; i<siblings.length; i++) {
        var sibling= siblings[i];
        
        if (sibling===element) return getPathTo(element.parentNode) + '/' + element.tagName.toLowerCase() + '[' + (ix + 1) + ']';
        
        if (sibling.nodeType===1 && sibling.tagName === element.tagName) {
            ix++;
        }
    }
}

function getPageXY(element) {
    var x= 0, y= 0;
    while (element) {
        x+= element.offsetLeft;
        y+= element.offsetTop;
        element= element.offsetParent;
    }
    return [x, y];
}