JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<div>
    sample text in div 1
    <ul>
        <li>list item 1 in 1st div</li>
        <li class="list-2">list item 2 in 1st div <strong>(bold text)</strong></li>
    </ul>
</div>
<div> second div here with <em id="emphatic">emphasized <span id="deepest" class="red blue">with deeper</span></em> text</div>

<div id="xpath"></div>

CSS

strong{font-weight:bold;}
em{font-style:italic;}
li{margin-left:15px;padding-left:5px;list-style:disc}
.red{color:red}

#xpath{font-family:courier;padding:3px;margin-top:10px;}

JavaScript

function getXpath(event){
    var hierarchy = [],
        current = event.srcElement||event.originalTarget;
    while (current.parentNode){
        hierarchy.unshift(current);
        current = current.parentNode;
    }
    var xPath = hierarchy.map(function(el,i){
            return el.nodeName.toLowerCase() + ((el.id !== '') ? '#'+el.id : '') + ((el.className !== '') ? '.'+el.className.split(' ').join('.') : '');
        }).join('/');
    document.getElementById('xpath').innerHTML = xPath;
    return xPath;
}

document.addEventListener('mouseover', getXpath);