原文链接：JavaScript 获取任意元素点击后的 CSS 标准路径
下面的代码是一个原生的 JavaScript (JS) 版本，获取任意元素点击后的 CSS 标准路径(不用 jQuery) ，并处理 ShadowDOM。
注意: shadow DOM v1 已放弃对: : shadow 选择器的支持。 没有办法为影子 DOM 元素生成完整的 CSS 选择器。
<html>
<body>
<h3>标题</h3>
<ul>
<li>这里触发点击事件11</li>
<li>这里触发点击事件12</li>
</ul>
<ul>
<li>这里触发点击事件21</li>
<li>这里触发点击事件22</li>
</ul>
<ul>
<li>这里触发点击事件31</li>
<li>这里触发点击事件32</li>
</ul>
<script>
function getDomPath(el) {
if (!el) {
return;
}
var stack = [];
var isShadow = false;
while (el.parentNode != null) {
// console.log(el.nodeName);
var sibCount = 0;
var sibIndex = 0;
// 获取节点索引
for ( var i = 0; i < el.parentNode.childNodes.length; i++ ) {
var sib = el.parentNode.childNodes[i];
if ( sib.nodeName == el.nodeName ) {
if ( sib === el ) {
sibIndex = sibCount;
}
sibCount++;
}
}
// if ( el.hasAttribute('id') && el.id != '' ) { no id shortcuts, ids are not unique in shadowDom
// stack.unshift(el.nodeName.toLowerCase() + '#' + el.id);
// } else
var nodeName = el.nodeName.toLowerCase();
if (isShadow) {
nodeName += "::shadow";
isShadow = false;
}
if ( sibCount > 1 ) {
stack.unshift(nodeName + ':eq(' + (sibIndex + 1) + ')');
} else {
stack.unshift(nodeName);
}
el = el.parentNode;
if (el.nodeType === 11) { // for shadow dom, we
isShadow = true;
el = el.host;
}
}
//stack.splice(0,1); // 移除html标签
return stack.join(' > ');
}
document.addEventListener("click",function(event){
console.log(getDomPath(event.target));
})
</script>
</body>
</html>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于