Как сгенерировать CSS Path с помощью JavaScript или JQuery?

Question

Есть предложения о том, как сгенерировать путь 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 и может предоставить хорошее решение, но я до сих пор не смог его найти.

Answer 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>

Answer 2

Создать путь Css элемента

Полный путь Пример: тело / нижний колонтитул. Нижний колонтитул / раздел. 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++; } } Короткий путь Пример: 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