1. Business scenario
I"m going to manually trigger a click for any dom and generate the style levels as follows:
<html>
<body>
<h3></h3>
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
</body>
</html>html > body > ul:eq (1) > li:eq (1)
the following is the js I wrote that currently only implements the hierarchy and can"t get a few elements to ask for help:
var getClassName = function(event, name) {
if (event.parentNode && event.parentNode.tagName) {
return getClassName (
event.parentNode,
event.tagName + ">" + (name || "")
);
} else {
return name;
}
}
document.addEventListener("click",function(event){
console.log(getClassName (event.target));
})