Any suggestions for how to generate the CSS Path for an element?
A CSS path is the path of css selectors needed to identify a specific element, for example, if my html is:
<div id="foo">
<div class="bar">
<ul>
<li>1</li>
<li>2</li>
<li><span class="selected">3</span></li>
</ul>
</div>
</div>
then, the class path to "3" would be div#foo div.bar ul li span.selected
JQuery uses class paths to identify DOM elements and might provide a good solution, but I've been unable to find one up until now.
i don't understand why this one is downvoted, a good and legitimate question
here's an (oversimplified) example on how this could be done
<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>
Generate Css path of an element
Full Path Ex: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++;
}
}
Short Path 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;
}
Test
var elem = document.getElementsByTagName('div')[20];
console.log('Full Path : '+getFullCSSPath(elem));
console.log('Short Path : '+getShortCSSPath(elem));
To generate Xpath
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.