如何在 Javascript 中获取给定元素的非绝对 css 路径?

我希望能够使用 Javascript 获取元素的非绝对css 路径，以便我随后可以调用：

document.querySelectorAll()

我正在尝试从共享相同css 路径的页面中获取所有元素。

例如，使用 Google 的搜索结果页：

css 选择器(绝对(将是：

div.g:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > h3:nth-child(1) > div:nth-child(1)

css 路径(非绝对(将是：

html body#gsr.srp.tbo.vasq div#main div#cnt div.mw div#rcnt div.col div#center_col div#res.med div#search div div#rso div.bkWMgd div.srg div.g div div.rc div.r a h3.LC20lb div.ellip

我看到的每个答案通常都会返回一个元素的绝对路径(css 选择器(——即第 n 个子元素。例如：从 Dom 元素获取 CSS 路径。

有没有人知道如何获取仅适用于页面上多个元素的纯 css 路径？

编辑：我真正要找的是Firefox Web开发人员检查器工具中的源代码，您可以在其中右键单击并选择"复制CSS路径"。如果有人有指向此的指针，我将不胜感激。

这有点困难，因为您必须决定所需的特异性级别。您可以选择包含或忽略标签、ID、类和属性，所有这些标签、ID、类和属性都有自己的格式。我已经编写了一个函数来为您执行此操作。

nonabsoluteCSS()接受任何元素和布尔值，以确定是否包含元素的标记名称、类、id 和属性。它是递归的，会爬上 DOM 树，直到它到达<body>元素。

如果你想进入伪元素和兄弟姐妹之类的东西，你可以进一步扩展这个功能，但这应该是一个很好的起点。

$(function(){
	$("a").click(function(){
	console.log(nonabsoluteCSS(this, true, true, true, true));
});
});
function nonabsoluteCSS(elm, useElements, useClasses, useIds, useAttributes)
{
if($(elm).length < 1)
	return false;
var p = $(elm).parent()[0];
var e = $(elm)[0];

var output = "";

if(!useElements && !useClasses && !useIds && !useAttributes)
	output = "*";
else
{
if(useElements)
	output += e.tagName.toLowerCase();
if(useClasses)
{
	for(var i = 0; i < e.classList.length; i++)
	output += "."+e.classList[i];
}
if(useIds && e.id != "")
	output += "#"+e.id;
if(useAttributes)
{
	for(var i = 0; i < e.attributes.length; i++)
{
	output += "["+e.attributes[i].name+"=""+e.attributes[i].value+""]";
}
}
}

if(p.tagName.toLowerCase() != "body")
{
	return nonabsoluteCSS(p, useClasses, useIds, useAttributes) + " " + output;
}
else
{
	return output;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p class="class1">
<span class="class2 class3" id="spanid">
<a href="#">
Click me to see my CSS path.
</a>
</span>
</p>
</div>

相关内容

最新更新

热门标签：