如何使用 javascript 或 jquery 生成 CSS 路径？答案

【问题标题】：how to generate CSS Path with javascript or jquery?如何使用 javascript 或 jquery 生成 CSS 路径？
【发布时间】：2010-12-11 12:41:49
【问题描述】：

关于如何为元素生成 CSS 路径的任何建议？

CSS 路径是标识特定元素所需的 css 选择器的路径，例如，如果我的 html 是：

<div id="foo">
 <div class="bar">
  <ul>
   <li>1</li>
   <li>2</li>
   <li><span class="selected">3</span></li>
  </ul>
 </div>
</div>

那么，“3”的类路径将是div#foo div.bar ul li span.selected

JQuery 使用类路径来识别 DOM 元素，可能会提供一个很好的解决方案，但我一直找不到。

【问题讨论】：

这个“CSS 路径”是什么？
CSS 在 css 选择器路径中。
您能否进一步澄清这个问题？大概举个例子，你看到用 javascript 做了什么？
我知道这是一个旧线程，但这个链接将解决这个问题stackoverflow.com/questions/4588119/…

标签： javascript css

【解决方案1】：

我不明白为什么这个问题被否决了，一个好的和合理的问题

这是一个（过于简单化的）示例，说明如何做到这一点

<div id="a">
    <div class="b">
        <div><span></span></div>
    </div>
</div>


<script>
function getPath(elem) {
    if(elem.id)
        return "#" + elem.id;
    if(elem.tagName == "BODY")
        return '';
    var path = getPath(elem.parentNode);
    if(elem.className)
        return path + " " + elem.tagName + "." + elem.className;
    return path + " " + elem.tagName;
}

window.onload = function() {
    alert(getPath(document.getElementsByTagName("SPAN")[0]));
}
</script>

【讨论】：

【解决方案2】：

生成元素的 Css 路径

完整路径例如：body/footer.Footer/div.Footer-inner/ul.FooterList/li.FooterList_item

function getFullCSSPath(element) {
    if (element.tagName == 'HTML')    return '';
    if (element===document.body)      return getShortCSSPath(element);

   // To calculate position among siblings
    var position = 1;
    // Gets all siblings of that element.
    // Gets the parent tree node of the current tree node.
    var siblings = element.parentNode.childNodes;
    for (var i = 0; i < siblings.length; i++) {
        var sibling = siblings[i];
        // Checks Siblink with passed element.
        if (sibling === element)    {
            var elemCssPath = getShortCSSPath(element);
//console.log('====='+elemCssPath);
//console.log('-----'+position);
            return getFullCSSPath(element.parentNode)+'/'+elemCssPath; // using recursion to find its parents untill root element HTML
        }
        // if it is a siblink & element-node then only increments position. 
        var type = sibling.nodeType;
        if (type === 1 && sibling.tagName === element.tagName)            position++;
    }
}

短路径 Ex:li.FooterList_item

function getShortCSSPath(element) {
    var path = element.tagName.toLowerCase();
    if(element.id)
        path += "#" + element.id;   
    if(element.className)
        path += "." + element.className;
    return path;
}

测试

var elem = document.getElementsByTagName('div')[20];
console.log('Full  Path : '+getFullCSSPath(elem));
console.log('Short Path : '+getShortCSSPath(elem));

生成Xpath

【讨论】：