原文链接：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>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于